-min_edited.png)
Moonlight cafe
Responsive Website Design
Project overview
This is a project I completed while studying User-Centered Design at Lake Washington Institute of Technology. I was tasked with creating a website for a fictional 24-hour café called Moonlight Café based in Kirkland, WA. The overall design needed to be responsive and include desktop and mobile breakpoints.
Skills & Methods
Competitive Analysis, User Interviews, User Personas, Usability Testing, Lo-Fi and Hi-Fi Wireframing, Logo Design, Design Systems, Prototyping, User Research, User Testing
Role
Sole UX Designer & Researcher
Timeline
October - December 2022
Approximately 6 weeks
Tools
Figma, InDesign, Illustrator
-min.png)
The Problem
Moonlight Cafe lacked a company website. Without a website, awareness of Moonlight Cafe and its offerings was limited to their Facebook page and word of mouth. This also created limitations on business services such as online ordering.​
Project Goals
-
Establish a website prioritizing the mobile design.
-
Create a design with integrated ecommerce functionality.
-
Emphasize coffee shop offerings such as 24-hour availability, free Wi-Fi, and signature drinks.
-min_edited.png)
The process
UNDERSTAND
Define the problem & set project goals
RESEARCH
Conduct user research & gather insights
ANALYZE
Analyze user insights
(ie. user personas)
SKETCH
Rough wireframes of solution
PROTOTYPE
Create mockup of solution
TEST
Conduct user testing, iterate, refine
Competitive Analysis
Coffee shop websites are a dime a dozen and not all are executed well. I evaluated four competitors to determine what was working and what was not and applied that information towards my final design.
I then took two of the competitor sites I felt were the most successful designs and evaluated them more closely using the four E's: Entice, Enter, Engage, and Extend. This process helped me to understand aspects such as business messaging and customer behavior.
User Interviews
My next step involved conducting user interviews. I recruited three volunteer participants to go through an in-person cognitive walkthrough task analysis of one of the competitor mobile sites, Caffe Ladro. This exercise gave me insights into what appeals to a customer, where they instinctively look for information, and how they expect things to behave on an ecommerce website.
User Persona
From this research, I created a user persona to symbolize my target user.
Sketches
Now that I was equipped with research data, I moved to sketching out my pages for desktop and mobile layouts of the website. I planned out section content such as a mission statement, specials, loyalty program, customer testimonials, and location in addition to the menu and ordering screens.
Lo-fi wireframes
I took my sketches into Figma and built low fidelity wireframes to start adjusting the visual hierarchy, spacing, and other details.
Design System & Hi-Fi Wireframes
At this point I started to plan out my visual design direction, creating components within Figma, and organizing all of this information into a design system. Once this was set, I applied the design system to my wireframes to make them high fidelity. Modest prototyping was also built out for forthcoming user testing.
Logo Design
The fictional prompt for this coffee shop did not include a logo, so I decided to create one. I was inspired by an illustration of the moon casting moonlight onto a body of water and used that idea along with modifying a moon crater into a coffee bean shape. I made two basic variations of the logo: one to serve as the home icon on the site, and the more detailed one to use in imaging and possible product packaging.
User Testing
Once I had a basic high fidelity prototype, I ran a user test using Maze to gather feedback about my UI decisions and user flow paths from seven volunteer participants. I ran into an unexpected challenge using Maze in the course of this test; Maze did not like how my prototype originally had users return to previous screens, so the testing platform ended up dictating last minute changes to my user flow plans. If I had more time I would have planned my revised user flow more thoughtfully and in a way I actually preferred, but I made the most it and was still able to gather helpful feedback.
reflection
This project was my first experience using Figma and allowed me to learn the fundamentals of this industry standard software. I has so much fun learning the capabilities of this program as well as utilizing my design skills in a website design project, which was also a new experience for me. There are plenty of things I would change about this design, the biggest one being the proportions of things like my accordion menu in the ordering platform and how it represents in both breakpoints. I'm extremely pleased with my branding scheme and logo design and personally feel I could see a local coffee shop using a site like this.
The hiccup with my user test was unfortunate, but it did make me think about my user research approach and planning out my user flows more carefully as well as determining the best research tool for the job required. Overall, this was an incredibly enjoyable project that allowed me to practice both UX design and user research methodologies.