a seattle based cafe that celebrates latin culture.
LEON COFFEE HOUSE
MY ROLE
TEAM
DURATION
TOOLS
User centered design
User research
User testing
16 weeks
Figma
Robert Bonglamp
Sophia Xu
Vivian Tu
Maia (me!)
BACKGROUND
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.
RESEARCHING THE CLIENT
Understanding the space we're designing for.
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 and observing the ambiance of the interior. We also looked at their current website for inspiration.
INTERVIEWING THE CLIENT
Ensuring we understand the client's expectations.
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.
PROBLEM STATEMENT
How might we redesign the current website so that it emphasizes Latin heritage and provides an intuitive experience for users?
GOALS
Pulling key insights from speaking with the client.
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.
Create main pages including the home, menu, gallery, and about page.
Create distinct pages
01
Design new menus for all of the menu items, including drinks, sandwiches, and waffles.
Design new menus
02
Ensuring that Latin culture is highlighted as an important aspect of the cafe on the website.
Emphasize Latin culture
03
LOW FIDELITY WIREFRAMES
Getting started with the initial designs.
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.
STYLE GUIDE
Determining fonts and colors.
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.
Fonts
Colors
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.
We had trouble picking colors for the website, as the cafe interior has a variety of colors. We decided on 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 WIREFRAMES
Finalizing our designs.
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
My biggest takeaways and learnings from the quarter.
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.
SOME OTHER WORKS