Redesigning a Responsive Website
Duration: 80 hours
Role: User Research | Product Design | Visual Design | Branding
Tools: Figma| Adobe Photoshop
Background/
Kuppi Coffee Shop is a small local coffee shop that opened its doors 9 years ago in Edgewater, New Jersey. Kuppi has successfully established a welcoming, family-friendly environment that is even equipped with highchairs and other accommodation for customers of all ages. They want a new kind of service to offer their customers to continue serving them safely.
Problem/ what the client/team has identified as the thing that needs to change
Their current online presence is promising, but there are several detailed issues:
Visual Engagement: The website lacks visually appealing elements like high-quality images and videos, making it less captivating.
Brand Consistency: Inconsistent branding elements, including the logo and color scheme, hinder brand recognition and trust.
Homepage Content: The homepage lacks informative content, making it less engaging for visitors.
Non-functional Menu Options: Non-functional menu items disrupt site navigation and usability.
Hierarchy and Organization: The website's structure needs refinement for better user experience and navigation.
Security Concerns: Operating on HTTP instead of HTTPS poses security risks and affects user trust.
Customer Testimonials and Reviews: The absence of social proof may deter potential customers.
E-commerce Potential: The "store" page lacks products for sale, missing an opportunity for e-commerce revenue growth.
Putting everything in place
Going into the research phase, I had the assumption that customers would want an option to order online. This was based on my brief analysis of different competitor websites that are out there. As I began my research, I flushed out this process by creating a research plan. I wanted to guide my research by identifying my assumptions, questions, and goals.After crafting my research plan, I decided to conduct a secondary research in order to solidify my understanding of the current state and future projections of the coffee industry.
I needed a framework within which to work. For a user-centric process focused on problem-finding, I leaned heavily into Design Thinking.
Design Thinking Process
✦ Discover//
✦ Semi-Structured Interviews
Prior to embarking on the design process, a crucial step involved engaging in user research to understand the typical user interactions with coffee ordering applications and identifying potential pain points.
In the user research phase, I opted for a strategy centered around semi-structured interviews. This approach proved to be highly valuable at the outset of the project, providing a comprehensive perspective on issues or aspects that might have otherwise been overlooked.
Three participants were deliberately chosen to align with the specific demographic under scrutiny:
Young, busy working professionals.
Friends and co-workers.
Individuals who regularly utilize coffee apps
Males and females.
✦ Interview Findings
I compiled interview findings and created a persona representing a young professional with a busy schedule, a social circle consisting of friends and coworkers, and a regular coffee consumer from local coffee shops.
✦ Competitive Analysis
Alongside the primary research, I wanted to look at direct and indirect competitors.
✦ Research Goals
1. Identify who are Kuppi Coffee’s customers
2. Understand current needs, goals, frustrations, and motivations by Kuppi Coffee’s customer
3. Understand what drives new customers when trying a coffee shop
4. Understand the strengths and weaknesses of other coffee shops
5. Understand how online ordering affects a food and beverage shop
6. Understand the habits of a customer when ordering food at Kuppi Coffee
7. Understand how customers find out about local coffee shops
8. Understand how people order a menu item at a coffee shop
✦ Research Questions
1. Who are Kuppi Coffee’s customers?
2. How did they find out about Kuppi Coffee?
3. What are pain points when it comes to purchasing a menu item at a coffee shop?
4. What is the role of online ordering for Kuppi Coffee?
5. What are the strengths and weaknesses of direct and indirect competitors?
6. How do customers find out about local shop information before visiting the location?
7. How do customers purchase coffee currently at local coffee shops?
8. What is the third wave coffee movement?
9. What defines a coffee shop that is within the third wave coffee movement?
✦ HMW & POV Statements
With our research and newly discovered pain points in mind, how should we tackle our project going forward?
✦ Task Flows
2 task flows to demonstrate the navigation and determine key screens for wireframe:
✦ User Flows
User flow to describe the main navigation for buying a coffee:
✦ Early Sketches
For the wireframes, I based my designs on the hierarchy of importance highlighted by the sitemap and the flows. I also considered what could be best in order to keep viewer retention when users navigated the site. This is something I would need to test further.
✦ Affinity Mapping
The practice of affinity mapping proved beneficial in extracting insights and identifying themes by emphasizing empathy and finding shared perspectives among users. From a broader standpoint, affinity mapping greatly assisted me in clearly defining primary areas of concern.
✦ Project Goals
Prior to finalizing my complete set of features, I decided to take a moment to gain a comprehensive understanding of my objectives, encompassing the needs of users, the business, and the technical aspects, as well as any shared goals among them. Having a clear comprehension of these objectives will greatly assist in making well-informed prioritization decisions in the future.
✦ Personas
I created three different personas; a young professional, a group of friends and co-workers and a local person.
✦ Branding
For visual style, Kuppi team wanted something that felt accessible yet Friendly - Welcoming - Modern - Relaxing - Cultured for their branding. We landed on a color scheme of blue and grey. After gathering mood board inspirations, I put together a style tile to use as a visual reference for the interface design. The style tile includes logo, fonts, colors, photography styles, and icons. UI kit is developed after the final interface design. Both style tile and UI kit are comprehensive design collection for the Kuppi Coffee Shop website. The two will be handed off to the developer team as a reference for building the website.
✦ Usability Testing
After completing the style guide, it was time to move onto high fidelities, where color, branding, and actual images were added to the frames.The second rendition comprised going back to the drawing board, and digging deeper into proper UI layouts. I went to sites like Apple’s UI Do’s and Don’ts, Google’s Material Design, WebAIM’s color contrast checker, to get a better feel for UI best practices.
✦ Define//
✦ Ideate//
✦ Prototype//
✦ Test//
✦ High Fidelity Wireframe
FINAL MOCK-UP
Closing Thoughts
As we conclude this phase of the UX/UI project for Kuppi Coffee Shop, we reflect on the strides made towards enhancing their online presence and customer experience. The identified issues have been meticulously addressed, laying a solid foundation for future growth and success.
Looking ahead, there are several key areas we plan to focus on to further elevate Kuppi's digital footprint. First and foremost, ongoing monitoring and optimization will be essential to ensure that the implemented changes continue to resonate with users and meet evolving needs.
Additionally, we aim to explore opportunities for further integration of e-commerce functionalities, expanding Kuppi's online offerings and revenue streams. This includes refining the "store" page and implementing secure payment gateways to facilitate seamless transactions for customers.
Furthermore, ongoing collaboration with the Kuppi team will be crucial in maintaining brand consistency and relevance across all digital touchpoints. This involves regular updates to content, visuals, and functionality to keep pace with industry trends and customer expectations.
Finally, we remain committed to providing ongoing support and guidance to Kuppi Coffee Shop as they navigate the digital landscape. Whether through training sessions, performance analysis, or strategic consultations, our goal is to empower Kuppi to thrive in the competitive online market.
In closing, we're excited about the positive impact of these enhancements on Kuppi Coffee Shop's continued success and look forward to embarking on the next phase of our journey together.