Role
UX/UI Designer
Deliverables
Responsive Website, brand
Tools
Figma

Calliope

Calliope is an interior design studio that has grown significantly in the past year. They are looking to take their business to the next level with a responsive e-commerce website where they can showcase their services, allow prospective clients to make inquiries and lastly, promote and sell their unique, artisan home products.

Objectives

Design a responsive e-commerce website that allows users to easily review interior design services, view past projects, and initiate a design project with the studio

Create a new and modern fresh brand for the company

Process

Discover

Define

Design

Test

Discover

Goal: To understand the end-to-end process of how people connect with interior designers,  choose/ purchase interior design services and engage with designers throughout the life of the project.

Market Research, User Survey, Competitive Analysis, User Interviews
Market Research

To kick off the project, I conducted a market research to uncover the behaviors and trends relevant to the interior design industry

User Survey

A survey was conducted to gather quantitative data about potential users and help us determine our market, business plan and key product features.

See Findings

Competitor Analysis

I conducted a competitor analysis of the industry to identify strengths, weaknesses, and gaps from competitors to uncover opportunity in the market.

User Interviews

With a better understanding of the interior design industry, I scheduled in-depth interviews with 4 participants. Through a series of open-ended questions, I gained a greater understanding of user needs, motivations and pain points.

See Notes & Key Findings

Define

Goal: Consolidate user research in order to define core problems

Empathy Map Persona, Sitemap, User flow
Empathy Map

An empathy mapping exercise was conducted to synthesize research observations and gain deeper insights about the users, their needs, motivations and pain points.

View Empathy Map

Persona

From the observations and insights gathered through research, I constructed Julianna, a persona created to exemplify the user and humanize the design process.

Sitemap & User Flow

Once I discovered more about my users, I began to build information architecture. A card sorting exercise helped me discover how people would group information on the site. Taking into account both user and business needs, I developed the sitemap below.

A User Flow was then created to map out and better understand the different routes and actions our persona may take in order to complete the tasks of initiating a new interior design project with the studio.

See User Flow

Design

Goal: Design user interface and brand

Sketch, wireframe, brand, UI Design
Wireframes

I created a few sketches as low-fidelity early iterations for the website's layout, navigation, search and other key sections.

Using Figma, I then digitized mid-fidelity wireframes of key pages for the process of initiating a new interior design project with Calliope and purchasing one of their unique, handcrafted products. Based on the feedback from my interviews, I prioritized the design studio's past projects, service overview and reviews in the design and hierarchy. I also focused on designing a project inquiry form that effectively streamlines and simplifies the project onboarding process for both users and the business while ensuring better quality of service throughout the life of the design project.

Branding

Then I worked on establishing a brand for Calliope, a company that is sophisticated, daring, friendly, stylish, competent, dependable, which aligns with research findings and company goals. I started with a logo design and went on to make a complete style guide and UI kit.

UI Desing

Once branding was established, I added imagery, brand styles, and UI elements to create high-fidelity wireframes of the home, shop & product page, and project inquiry form to complete the task flow of initiating a new interior design project with the studio.

Test

Goal: Evaluate viability of solutions through testing and feedback

Prototype, Usability Test, Affinity Map, Revisions
Final Prototype

I created a prototype using Figma to test the task flow of purchasing a product and initiating a new design project with the studio. This included 1) Finding the shop, reviewing product page and adding product to cart 2) Selecting "get started" and completing project inquiry form.

See prototype

Usability Test

To determine if the website is usable, I set 2 tasks for 4 participants to complete. I observed their patterns and behaviors through screen recordings and notes.

Objectives:
- Evaluate the quality and ease of the user flow relevant to:
     - Choosing Calliope's interior design services
     - Starting a new interior design project with Calliope
     - Purchasing a product from Calliope’s exclusive website
- Evaluate overall brand appeal
- Identify any areas of improvement relevant to navigation and design

User Tasks:
- Purchase exclusive tea pot
- Initiate new interior design project
- Complete project inquiry form

Results

Generally, all participants were able to complete all tasks with ease, and the brand received consistent positive feedback. Half of the participants complained about confusing language and unclear visual icons on the form. They also suggested adding review to the product page.

Summary & Recommendations

Revisions

Based on the the results of the usability test and time, the following revisions were prioritized and implemented to the prototype.

This section was updated to clarify and simplify the primary Call to Action. The original language was confusing for some users; therefore, it was changed from "start now" to "start project".

On the product page, a review section was added, in addition to a link to add reviews. Regardless of the fact that Calliope's product inventory is limited-time only. Users found this essential when deciding whether to purchase a product given that they are exclusive to the studio.

Lastly, the stroke weight on the selected state on the form cards was increased to avoid confusion and more clearly indicate that a response has been selected, and labels were added to icons.

Reflection & Next Steps

I learned quite a lot from this project. The initial brief appears to be pretty straightforward; however. the challenge is in its perceived simplicity. At the end of the day, plenty of successful interior design websites already exist and having some personal experience with this, I had to careful put aside my assumption and rely on user research as well as creative thinking to successfully identify user issues and define the problem(s) and design effectively solutions.

As for next steps;
First, previously identified recommendations should be revisited (refer to usability test summary), including:

1. Add a feature to product page with relevant interior design inspiration to 1. showcase how to style the product and 2. promote Calliope's interior design services.

2. Link product and/or design inspiration/past projects to the design project meeting confirmation page.

After this, I would like to focus on the user account page. Some features I would like to see include the message center (to facilitate communication between user and interior designer) and 3D designs (interior design deliverable to show the designer's ideas and allow users to make changes), among others.

More Projects