CONTEXT
OVERVIEW
Leon Coffee House: a Seattle based coffee shop that emphasizes Latin culture.
Leon Coffee House is a cute, homey cafe based in University District, Seattle. DUBvelopers (now WebImpact) is an RSO at the University of Washington that designs and develops websites for small businesses in Seattle. Our team worked with Leon Coffee House to solidify the branding on their website, as well as design the pages to create a better experience for customers of the cafe.
MY ROLE
User research
Usability testing
User centered design
TEAM
Robert Bonglamphone
Sophia Xu
Vivian Tu
Maia (me!)
DURATION
20 weeks
TOOLS
Figma
Pen and paper
USER RESEARCH
RESEARCHING THE CLIENT
The first step our team took was to research the current branding and design of Leon Coffee House. We did this by going to the cafe multiple times, observing the ambiance of the interior. We also looked at their current website for inspiration.
ORIGINAL WEBSITE OBSERVATIONS
01
Only one page with links that do not lead anywhere.
Question:
Would you like all the information to be on one static page, or have multiple pages for different information?
02
Dark color scheme does not match interior of cafe.
Question:
Is there a specific color palette you would like to see us design for the new website?
03
No information about items on the menu.
Question:
Would you like us to include information about menu items on the website?
INTERVIEWING THE CLIENT
Our team had multiple interview sessions speaking with our client, the owner of Leon Coffee House. We asked questions about what he was looking for in an updated website including typography, colors, and the main pages/layouts.
What are the major pages/sections you are looking for on the new website? Home page, about page, gallery with beautiful pictures, visually appealing menus, location/address, and social media information.
Is there any color scheme/color palette you would like us to use? I don't have anything in mind. Please give me different options and I will choose from what you show me.
What kind of information would you like us to put on the menus? Only the name of the item, and a short description for the specialty/most popular items. No prices on the menus, as this can change.
You mentioned there were certain things you would like us to omit from the website. Can you tell us more? Do not list the store hours on the website. Our hours are flexible depending on the number of customers, so I would like to direct them to our Instagram page where we keep our hours regularly updated in the Instagram bio.
PROBLEM STATEMENT
How might we redesign the current website so that it emphasizes Latin heritage and provides an intuitive experience for users?
GOALS
After conducting initial research and speaking multiple times with our client, we established 3 main goals that we would keep in mind while developing the new website.
01
Create distinct pages
Create main pages including the home, menu,
gallery, and about page.
02
Design new menus
Design new menus for all of the menu items, including drinks, sandwiches, and waffles.
03
Emphasize Latin culture
Ensuring that Latin culture is highlighted as an important aspect of the cafe on the website.
WIREFRAMING + PROTOTYPING
LOW FIDELITY WIREFRAMES
After determining our main goals, we made initial low fidelity wireframes based on our initial findings. Most importantly, we created the main pages that the client asked for: the home, menu, gallery, and about pages.
FINAL DESIGNS + REFLECTION
STYLE GUIDE
FONTS
We wanted fonts that were classy, but also could be quickly scanned. We used Julius Sans One for headers, as it matches the sleek, modern aesthetic of the cafe. Nunito is a font that is easy to read, so we picked it for the body text.
COLORS
We had difficulty picking colors for the website, as the cafe interior has a variety of colors. We decided on a brown as the secondary color as it is in the logo, and a soft pastel pink as a primary color to make it easy on the eyes.
HIGH FIDELITY PROTOTYPE
Once we finalized the fonts and colors and confirmed with our client that these would be the final styles, we began iterating on our low fidelity wireframes to develop the high fidelity prototype. We emphasized Latin culture by putting information on the front of the home page, about page, and using images that highlight the culture.
REFLECTION
The two quarters my team and I spent working on this website went by quickly, as we not only designed the website, but the menus as well. I learned a lot about visual design and the importance of consistently communicating with the client. Check out our website and menu designs at leoncoffeehouse.com!
Actively update client with design progress.
Initially, we had different font choices for the website, as can be seen from the changes in the header font from the low to high fidelity prototype. It was helpful to actively keep in touch with our client so we knew when to make changes to any design ideas we had.
Not all designs are easily implemented in the final product.
While designing our final prototype, we had envisioned animations to enhance the viewing experience. However, once we went to the developers we realized that it was not possible to implement many of these in the short time frame. I had also just wrapped up a web development course this quarter, and it made me realize that it is helpful for designers to be aware of the limitations that developers have, especially when it comes to complex animations.
Accessibility is important!
Using the screen reader and accessibility knowledge I gained from work, I was able to test the website once it was live. I found that some of the elements on the page did not read out correctly with VoiceOver, and brought it up with the development team to fix.
PREVIOUS PROJECT
NEXT PROJECT