The Night Owl

UX/UI Design
VIEW PROTOTYPE
Tools
Figma
Adobe Photoshop
Contributions
UX Research
UX/UI Design
User Testing
Branding
Team
Individual Student Project
Timeframe
4 Weeks / 80 Hours
Oct 2021 - Nov 2021
The Problem
The Night Owl is a local coffee shop that has been serving the Fullerton community since 2011. They offer a variety of organic coffees and teas, fresh pastries, and showcase local live music and art at their venue. They provide an extensive menu and the perfect environment for studying, relaxing or hanging out with friends.
The Solution
The Night Owl wants to redesign their existing website to showcase a more modern design, but wants to retain an aesthetic that still highlights their DIY approach to running their shop and live events. The coffee shop would like to create a new website that highlights their live entertainment calendar as well as their varietous menu.
Surveying Users & Gathering Data
For this project, I decided to collect data by creating a Google Forms survey and posting it on the internet for anyone interested to fill out. I asked a total of 9 questions with the following three goals/main questions in mind: 1) What information do people look for in coffee shop websites, 2) What type of live events are people interested in attending, and 3) What is the main motivation for going to a coffee shop?

Key Findings:
• When asked what the main reasons they visit coffee shops are, 49 participants answered for some form of caffeine (36 for coffee, 13 for tea) and 12 responded that they visit for the atmosphere and/or ambiance.
• The main information people look for on a coffee shop's website are to 1) View the menu (46 responses), 2) Look up their hours of operation (40 responses), and 3) Look up their location (37 responses).
• The type of live events people are interested in attending are live music (29 responses), art-related events (9 responses) and food-related events (6 responses).
Market Research & Competitor Analysis
For market research, I decided it was best to look around at mostly other local coffee shop establishments with some more well known coffee shops as well. This would give me an idea of where the local scene is currently at, but to also learn what more established coffee brands are doing as well.
Identifying the Ideal Persona
Creating the persona was mainly full of extracting details from the survey data and analyzing the responses. The primary persona of this project is a creative 29-year-old from Orange County, CA. I imagined this persona to be an espresso addict to fuel his crazy work-life schedule. Someone who was always on the go, but still made time to hang out at his favorite coffee shop for open mic nights.
Website Sitemap
Ultimately, the website site map was based on the coffee shop’s current layout, but cleaned up a bit so as to not have too many pages and to be more organized with content on the final design.
Preliminary Sketches
With the site map laid out, I utilized a new iPad app I recently discovered called “Mockup” and drew some wireframe sketches for the home page. I  had previously found some inspiration on Behance and Dribbble and explored a few different layouts I envisioned for the website’s home page. Ultimately, I wanted the layout to be a little out of the ordinary from the grid used in order to keep a more DIY feel, but more professional looking than the current website’s state.
Mid Fidelity Wireframes
I took one of the initial  sketches for the home page and recreated it in Figma, while making a few design tweaks that made more sense in the process. This allowed me to start visualizing what worked and what didn’t from my initial sketches. I then built out the remaining pages and redesigned them in a way that seemed cleaner to read from the viewer’s perspective, removing elements when needed to declutter layouts and adding them where they seemed to work better with the content.
High Fidelity Wireframes
I had pretty much gotten close to final with the mid fidelity mockups and needed to finalize adding the brand colors I created in a style tile to create my high fidelity screens. I wanted to give a more modern feel to the website with the colors used.
Style Tile
With the style tile, I completely modernized and minimized the coffee shop’s logo as I envisioned would be appropriate for the brand. For the colors, I stayed with mostly browns and blues that seemed appropriate to use for this project. I also added a more moody feel to the photos to use on the website pages to compliment the new look.
High Fidelity Prototype
As my final deliverable for this project, I created a usable prototype showing how The Night Owl’s website would look and feel as an actual developed product. Since there was no main flow to the site, I made sure to link all pages to operate as a working site to try to make it as close to how it would feel as a developed website as possible.
Next Steps
As far as next steps, the website design is ready to hand off to a developer to be brought to life.

If given the opportunity, I would continue to test the design and create iterations based on the results of the testing. One thing I would have liked to test further would be the amount of content on the Menu page of the website as it may need to be cut down for better content consumption. Other than that, I believe the design is set and would market the Night Owl as a unique and modern coffee shop.
← Previous ProjectNext Project →