Responsive Web Design: UX | UI | Branding

Responsive website for Los Angeles business: Disco Cat Nap Coffee.

DURATION
‍
80 Hours
4 weeks
ROLE

UX/UI
User Research
Branding
TOOLS & METHODS 
‍
Pen & Paper
Figma
Maze
Prototyping
Usability Testing
CATEGORY

Client Project
Local Business: 
Coffee
PROJECT OVERVIEW

PROBLEM

Disco Cat Nap Coffee is a small, local business that offers catering services and aims to add coffee classes to their business model. While similar businesses focus either on catering or events (classes), Disco Cat Nap Coffee offers both.
‍‍

SOLUTION

My solution aimed to enhance the search experience by enabling users to navigate between options tailored to their specific needs. This allows users to find classes aligned with their goals and motivations, and easily inquire about booking the business for events.

How might we design a site that fits their business model while making sure the experience is intuitive?
‍

01
Research

MEETING WITH STAKEHOLDERS
‍I first talked to the stakeholders to understand their business, their audience, and what they hoped to achieve with the website. Then, I dove into research to gain a better understanding of the market. To build an efficient site for Disco Cat Nap Coffee, I wanted to research what was currently available in order to find opportunities fitting their specific needs.

Secondary Research
To gain an understanding of the market, I started with secondary research to get a sense of what we already know, who our audience is, and current trends. This approach enabled me to access a wide range of existing information and insights on the industry. This helped me to identify opportunities and gaps in the market as well as potential challenges and obstacles we might face.

“The latest research has found that 77% of adults in the United States drink coffee on a daily basis. The age of the coffee drinkers matters, too, with 40% of people aged 18- to 24-years old drinking coffee daily, while 54 percent of people aged 25- to 39- years, indulge in a daily cup. Covid-19 undoubtedly had a major impact on the global coffee industry. Naturally, this led many consumers to start brewing more coffee at home. However, consumers also realized that having good coffee and equipment wasn’t important if you didn’t have the knowledge to accompany them.”

So, in response to this boom in home coffee consumption, some coffee shops and roasters started offering remote educational courses to people interested in making café-quality beverages. “Despite a huge switch to virtual education through 2020 and 2021, Chahan says he thinks coffee will always require some level of in-person training.”

Competitive Analysis
I then jumped into competitive analysis, as their products will help me gather insights about strengths, weaknesses, and possible opportunities for Disco Cat Nap Coffee. By assessing the competitors' products and services, I could identify areas where Disco Cat Nap Coffee could differentiate itself and stand out in the market.
From competitive analysis, I found that competitors either focused on classes OR catering, while Disco Cat Nap Coffee provides both. In addition, competitors didn't have a way for users to find classes based on experience level. This presented an opportunity to optimize our search experience and help users find classes based on their needs.
Key Findings
☼ Users find it difficult to find classes based on their experience level, and prefer in-person classes
☼ User want to spend less time finding classes that align with their specific motivations and goals
☼ Class availability and travel time account for why users don’t end up committing to taking a class
User Research
Building on a general understanding of the market, I conducted 5 user interviews in total to really empathize with our users. My goal was to uncover their overall process of seeking classes as well as their motivations and frustrations. To synthesize the qualitative data gathered from user interview, I created an affinity map to identify patterns across users and generate needs. In this stage, I'm hoping to find some opportunities for design.

Regardless of their demographic characteristics, users seeking classes struggled to find classes that fit their specific needs and mention travel time and a lack of available dates as pain points.

02
Define

After gathering insights from real users, I created a user persona to represent key audience segments. This helps me focus on tackling the most important problems – to address the major needs of the most important user groups. With keeping my persona in mind, I think of how I can help satisfy their needs when moving forwards with my design decisions.

Let's meet our persona, Megan. Megan is an accountant who loves coffee. She wants to learn how to make coffee at home, but finds it difficult to find classes that fit into her busy schedule and are beginner friendly.
“It's hard to find a class that fits my schedule”
“I want to learn how to make coffee at home, but I don't know where to start”

03
Ideate

After synthesizing research, I came up with POVs and HMWs using users' pain points and needs to help me brainstorm ideas. Users mentioned availability, travel time, and finding classes that fit their needs as a pain point. What makes Disco Cat Nap Coffee unique is their travel option, and I realized that this could be used as an opportunity for design.

I’d like to explore ways to highlight Disco Cat Nap Coffee’s ‘travel to you’ option that would otherwise make users not want to commit to a class.
‍
I’d like to explore ways to help people find classes that align with their goals that would otherwise cause them to feel overwhelmed by the options.

How might we help users commit to booking a class by highlighting travel options?
‍
How might we help users with varying degrees of knowledge and experience find classes they would find useful?

Project Goals
Taking all of the findings from research, I focused in on our users’ main goals and frustrations to guide the brainstorming session. I mapped out user and business goals and any common goals they had. The business benefits when users achieve their goal, and in turn, users are satisfied. Defining these goals allowed me to keep them in mind moving forward.
Sketches‍
Information Architecture
After defining the goals, I continued to build up the structure of the website by creating a site map. A site map will help me visualize the relationship between the content and examine the hierarchy.

Wireframes
Once I had a visual direction of the layout, I created wireframes. Using my sketches, I created low-fidelity wireframes to focus on the structure and flow before adding on any detailed content or visual design. This allowed me to get a macro view of my design and gauge how users would interact with the product.
In the initial sketches and early wireframes of Disco Cat Nap Coffee’s search screens, I recognized that the proposed design did not provide a straightforward means for users to navigate between locating classes and requesting services. I also kept in mind that my solution should bring value to the users as well as meet business goals.

To address this issue, I incorporated a search bar on the homepage that when clicked, allows the user to choose between finding classes or catering services (Disco Cat Nap Coffee's business model). Then, I explored how I would help users find classes based on their experience level and select travel options, which were key pain points discovered in user interviews.
Branding & UI Kit
Along with creating a responsive website, Disco Cat Nap Coffee wanted help with their branding. Their brand values included accessibility, community, and inclusivity. With this in mind, I approached the visual design by creating a mood board where I explored two options: one with a minimalistic approach and the other featuring a slightly more playful aesthetic. I later met with the stakeholder to get feedback and decide on which direction to take.

04 Prototype

After deciding on a visual direction and getting feedback on my wireframes, I created a prototype to test usability. The prototype allowed me to simulate the product's functionality and user experience, enabling me to identify any areas of the design that needed improvement or adjustment. They also allowed me to efficiently communicate design decisions with the stakeholders.
VIEW PROTOTYPE

✴
Final Design

I designed a responsive website that allowed users to easily search and book for classes based on their preferences, needs, and goals. This involved developing a user-friendly interface that was both engaging and intuitive, as well as incorporating features such as personalized recommendations.

CONCLUSION

Disco Cat Nap Coffee is still in the early stages of providing public coffee education. Offering this MVP enables them to envision the potential appearance and functionality of their website, aligning with their objectives for user adoption.

NEXT STEPS 

For this project, my main focus was designing a streamlined booking experience. Moving forwards, I would like to explore how to optimize their inquiry process.

For future iterations, there are a few things that I would consider given that I had more time and resources:
‍
✴ Explore flow for post-booking / post-inquiry process
✴ Explore how we might motivate users to continue taking classes
✴Add additional features that fit business needs
✴ Expand on visual design to further solidify branding and update assets from client

REFLECTION

01. Balancing business goals and user needs
‍
The main goal of mine for this project was to create a way to help Disco Cat Nap Coffee increase their customer base for coffee classes as well as provide a way for users to find catering information and submit an inquiry. Initially, it was challenging to find a solution that fit Disco Cat Nap Coffee’s business model while also ensuring it is intuitive for users.

This required me to approach my screens from a business standpoint, as well as keep users in mind by considering their mental model of how they search for classes and what would allow them to easily find information and accomplish their goals. By prioritizing both business and user needs, I was able to achieve a balance between providing value to users and generating revenue for the business.

02. The importance of documentation

‍Documenting my design process helped me to articulate how these designs can address the problem, align with our business objectives, and enhance user experience. This will prove especially valuable when seeking approval from stakeholders.