Interior Decorator Website
Project Overview
The problem
My client* is an aspiring small business owner. She spends her free time immersed in her side hustle—designing interiors for friends, families, and referrals. With a growing portfolio and clientele, a website is the next logical step for her. She asked that I draw up a proposal for her to show her what a business website could look like should she continue down this path.
*NOTE: The client's name is censored in the case study copy and designs to protect her privacy.
The goal
Design a static website to 1) showcase her portfolio and 2) to establish an online presence to explain her services to prospective clients while standing out in this saturated field.
My Role
Lead web designer and UX researcher
Responsibilities
Competitive analysis and UI design
Research
I performed a competitive audit to 1) understand typical information architecture in this field and 2) to see how the competition uses visual, interactive, and content design to stand out.
Key questions I looked to answer were: What are common themes, types of content, and design patterns among websites in this field? Which design elements works well? Which don't, and how could I improve upon them?
What worked vs what didn't
Clear Hierarchy
When the content is grouped together or separated properly, the user has an easier time taking it all in and finding what they're looking for. Good examples I saw include using images to separate content, consistent spacing, and use of white space vs. bleeds.
Detailed Portfolios
The most successful portfolios had, not just photos, but also brief synopses explaining their process and the client's wishes. Before and after photos are also a great way to demonstrate the design process and instill confidence in clients.
Personal Touch
You don't have to restrict introducing yourself to the About page. Including pictures of the designer in the spaces they decorated, for example, helps add personality throughout the site.
Unclear Hierarchy
Inconsistent hierarchy is extremely distracting and can hurt your conversion rate. It's crucial to have a clear set of parameters (whether proximity, spacing, color) and stick to them.
Font Overload
Using too many fonts can be equally as distracting and can give the website an unpolished look. A couple of fonts that pair well together is sufficient!
Gatekeeping Services
Prospective clients may be more inclined to inquire about your services if they can easily read a description of what you offer beforehand. It may be intimidating for some to have to reach out first.
Design
Paper wireframes
I wanted to create a website that showcases my client's work throughout. All the photos on the home page, for example, would highlight her work and link to a specific project in her portfolio. The portfolio would also feature an easy-to-access tab menu that allows users to filter by service type.
Digital wireframes
This page shows the user all the services offered with a small blurb and relevant photo attached. Users are also able to click "Learn More" to find out more details on the service, like what to expect and the pricing model should my client choose to include it.
The portfolio is critical for user conversion rate, so I wanted to give the user all the necessary information without overwhelming them with big blocks of text. There is space for a brief synopsis of the project, but the main highlight is the photos. There's a large place at the top of the screen for the key image as well as a slideshow for before and after photos.
Low-fidelity prototype
The low-fidelity prototype connects the primary user flow of viewing the portfolio and navigating to the contact page to schedule a consultation.
Mockup
In my mockup, I standardized the spacing between elements and added a menu in the footer to make it easier for users to navigate through the website.
Font Definitions
To ensure consistency with my font choices, I created a font definitions cheat sheet that tells me what typefaces, styles, and font sizes to use at a glance. I stuck to just two fonts that pair well together to visually differentiate elements without disorienting the user. I also made sure my choices comply with WCAG standards.
Accessibility considerations
The color palette was based on an inspiration photo from the client. From there, I iterated on the palette and created color definition cards to make sure it complies with WCAG standards. For my cards, I place dots in the top right corner to remind myself what color text is accessible to use with each color. For this palette, I could only use black with the cream and orange.
Takeaways
Impact
My client has a preliminary web design as inspiration for when she is ready to pursue her business full-time.
What I learned
It’s important to ask specific questions when interviewing your clients for their preferences and feedback. Most people don't have the same level of knowledge about web design, so asking, "What do you think?" isn't helpful. Ask the questions you want an answer to!
Next steps
When my client is ready to continue pursuing her business, I will complete the mockups for the other pages, conduct u usability studies, and continue to iterate ion my designs.
Done reading?
Check out another project!