Project Overview

Problem

Liv Interiors is a small full-service interior design and construction business based in Chapel Hill, North Carolina. The firm specializes in specialty materials, custom cabinetry, space planning, and more.
The company needs a new website and wants to update their branding.

High Level Design Goals & Objectives

Create new branding
Design a responsive website with the goals of:
- Booking new consultations and attract new clients
- Creating an online presence where potential clientele and business partners can view past work and general information about the company

SCOPE

Responsive web, branding

ROLE

End-to-end UX/UI designer, UX researcher, branding

TOOLS

Sketch, InVision, Photoshop, Google Docs Suite

PROJECT DURATION

80 hours

TEAM

Individual with input from mentor and peers

PHASE I

Empathize

Goal: Collect information that will help me gain a more comprehensive understanding of the people and context of the problem. This involved learning about the state of the industry, possible competitors, and the perspectives of potential users.

I began by meeting with Liv Interiors' owners and then creating a high-level research plan.

Research

Research Goals

Gain a better understanding of the interior design industry
Identify target market
Understand goals and pain points of potential and current clients
Understand how people find and select an interior designer

Market Research

An inquiry into the current state and future projections of the firm’s industry helped me create context as to how the interior design sector operated, what current trends were, and develop ideas about where the future of the industry was headed. View the major takeaways from my market research here.

Competitive Analysis

Researching similar companies in the area gave me better understanding of the strengths and weaknesses of both industry leaders and local potential competitors so that Liv Interiors can learn from their strengths and avoid their pitfalls.

Primary Research

User Interviews

Interviewing potential users helped me to gather crucial insights and validate problem, solution, & implementation assumptions.
‍
I wrote an interviewand used it to talk to 5 potential users about interior design and general professional services preferences.

I then transcribed each interview so I could more easily identify similar preferences and pains, and draw conclusions from the interviewees’ answers.

PHASE II

Define

Goal: Synthesize my research and use it to define the problem in a human-centered manner; I wanted to know as much as I could about the wants and needs potential users.

Research Synthesis

By reviewing the data I had collected, I could gain a strong understanding of who potential users were, what their goals were, what the industry was like, and successes and mistakes of competitors. I compiled a set of major takeaways distilled from my research, such as:

Clientele skews heavily female and wealthier than average
Lots of opportunity for small businesses, especially if they provide better service, specialization in specific areas, and/or unique or custom products or product sources
Many websites of other successful design firms have a strong focus on the designers, this is supported by user interviews - most interviewees felt that trusting the designer was more important than the designer’s past work

Key Insight
Most interviewees felt that trusting the designer was more important than the designer's past work, so I decided to feature the designer prominently and focus on portraying them in a positive and trustworthy manner.

User Personas

By reviewing the data I had collected through my research, I could gain a strong understanding of who potential users were, what their goals were, what the industry was like, and successes and mistakes of competitors.

PHASE III

Ideate

Goal: Generate ideas with the aim of finding the best ways I can solve the problem and create a high-level roadmap of how these ideas might be implemented.

Sitemap

I created a sitemap to organize the information hierarchy and show how the content would relate to each other. The sitemap is small and simple as the business is small, the business model is fairly straightforward, and no transactions will take place on the site.

User Flow

In order to evaluate how easy and logical it was to move through the site, I created an in-depth user flow with every step included. This also helped me optimize paths that were conducive to users’ and business's goals.

Branding

The stakeholder had some general ideas about the direction they wanted the branding to go in; there were around 20 color options, several typefaces, and a few logo options they were considering. They wanted branding to convey these adjectives: classic, simple, clean, and eternal.

Colors

The stakeholder set on using gold, and other colors were up in the air. I chose shades of turquoise to compliment the gold and emphasize a feeling of simplicity and sophistication. (Later, after prototype testing, I decided the site needed another highlight color, so I added a muted seafoam green.)

Typography

For their wordmark, the stakeholder was looking at some different modern fonts with hairline serifs that contrasted with heavy vertical strokes. I chose Cabrito Didone because it had a classic feel but still had some unique personality and style. I chose a sophisticated, “eternal” serif font for the headings and a simple, contrasting light sans serif font for the body. These helped add to the elegant, timeless feel while remaining readable and approachable.

Style Tile

After extensive experimentation, I synthesized this guide of branding and interface elements that would serve as a reference for the visual direction of the site (this is a final version updated later in the process).

Wireframing

My next step was to create mockups of the user interface. I started with low-fidelity designs, then proceeded to mid and high-fidelity. Moving through these stages helps to de-risk investment in our designs gradually as we understand more about the business and customer through experimentation and testing. As we validate more about our understanding of the business and customer we can invest more resources into our prototypes, allowing us to increase fidelity.

Low Fidelity Wireframes

Sketching low-fi designs by hand is quick and cheap, and allows for many different ideas to be tried without a strong commitment to any of them.

Mid Fidelity Wireframes

After I had a solid idea of what my designs would look like on paper, it was time to digitize them. These basic, skeletal pages would serve as a base for my hi-fi designs and allow me to evaluate their functionality without the colorful distractions of a fully fleshed-out UI.

A look into the process

Exploration and evolution of different styles for the navigation bar.

PHASE V

Test & Iterate

Prototyping

Using Sketch and InDesign, I built a desktop prototype with my UI designs. I then created a usability testing plan and recorded 5 participants as they completed set tasks and navigated through the site.

Test Objectives

Test if user can successfully navigate to Project page, Services page, About page, and Contact page, and between these pages
Test if user can successfully book a consultation all the way through confirmation
Find any other miscellaneous usability issues
Get feedback from users

Revisions

While keeping in mind the goals of the project, I iterated on my designs to address major pieces of feedback, make the site more usable, and add more ways to guide customers towards booking consultations.

Since some users had trouble finding the Project page, I added a drop-down list to the Portfolio tab in the tab bar on each page, making it more obvious that there were viewable options in the Portfolio section and making it easier to navigate directly to each project.

I realized a clear call to action at the end of each page would improve the project in multiple ways:
- Addressing an issue raised during testing where a participant used mostly on-page buttons and therefore struggled to find where they could book a consultation
- Prompting users towards booking a consultation, the most important goal of the site

Original

Revised

Several participants thought they might have to fill out the input fields at the top of the Contact page before scrolling down and seeing the calendar element, so I moved the blurb about the different methods to contact the company to be more prominent and changed the order of the elements.

Original

Revised

A look into the process

Different iterations I experimented with while revising the Contact page

Final Thoughts

Liv Interiors now has new branding and a responsive website design meant to enthrall potential clients, attract new consultation bookings, display past work, and provide info about the company.
‍

At this point, I'd hand off my designs to developers. I'd then track important metrics to evaluate the effectiveness of the project, such as site visitors and consultation bookings. If I had more time, I'd consider working on:

Adding and emphasizing links to Liv Interiors' social media accounts
Creating a section to browse Liv's most common items used to decorate, with an emphasis on their specialty in drapes
Expanding on the video call appointment feature

Project Overview

Contents

Thanks for scrolling!