Responsive Website for Tucknee Coffee
Project Overview
October 2022 - Present
Product: Design a responsive mobile website for Tucknee Coffee Company
Tucknee Coffee Company's responsive website is designed for users looking to view the menu and the atmosphere before visiting in person. It is designed with a minimalistic but direct approach, with a simple and accessible menu flow, hours, and directions all within reach, we made these tasks easy to see for users to accomplish.
Project Goal: Design a responsive website to be accessible for all users looking to view the menu, atmosphere, and hours before planning a visit in person.
My Roles and Responsibilities: I conducted user research, by working at the coffee shop and interacting with the customers. I then carefully started to change colors, text size, picture organization, and flow based on the knowledge I had gathered from working there and feedback from the customers. I made iterations based on the owner's and user's feedback to create final mockups and a responsive prototype. I made sure to keep accessibility and simplicity a priority throughout the design process.
User Research
Research Summary: For my user research I conducted user interviews and then created a persona and a user journey map, I then organized my insights by creating an affinity diagram to better understand the user's needs that I’m designing for. A primary user group that I identified through user research was early career professionals who didn't have time to shop and send gifts to loved ones during unexpected times.
Pain Point #1: Interaction Small buttons and text on websites can make the experience seem difficult which can lead to users being frustrated
Pain Point#2: Experience Online ordering websites don't provide an engaging browsing experience
Paint Point #3: Time Users prefer to look at a menu before arriving at a new place
Starting the Design
Digital Wireframes: Moving from paper to digital wireframes helped me understand how to address user pain points better and redesign parts of the design to improve the user experience.
Usability Study Findings:
Time | Customers prefer to look at a menu before arriving so they can save time during the checkout process
Money | Users want the option to check the prices on the menu
Layout | Users would like to see a cohesive website with appealing visuals that set the tone for the establishment
Refining The Design
More Mockups:
Accessability Considerations:
I used headings with different-sized text for visual hierarchy
I used icons to help improve the navigation for users who rely on assistive technology
I designed the site with alt text to ensure those with screen readers can access the site