Art of Espresso

The Overview

My team and I redesigned the Art of Espresso’s website. The old website is static and out of date. Our goal was to recreate a website that is both modern and minimal to capture the welcoming vibes of the Art of Espresso.

My Role: I was 1 of the 2 UX | UI designers on a team of 3 that redesigned the Art of Espresso’s website. I conducted user interviews, created personas, storyboards, and low and high fidelity prototypes with prototyping software and HTML and CSS. I also curated visuals to accompany the written content.

Duration: January 2016 - March 2016

Toolbox: Illustrator, Balsamiq, Photoshop, Sketch, HTML5, CSS.

Deliverables: Creative Brief, User Interview, Competitive Analysis.

The Process

User Interviews

My team and I interviewed a total of 12 users, four of those were TA’s or Professors, and 8 of those were students. Within these 12 users, most are coffee drinkers, and some are occasional to rare coffee drinkers. We uncovered 4 possible scenarios. Regular customers that “grab-n-go” their coffee, potential customers, customers that utilize the space to socialize or to complete tasks, and customers that use Art of Espresso’s catering services. From our findings, we redesigned the website to accommodate these 4 scenarios.

Competitive Analysis

In addition to user interviews, we conducted a competitive analysis to show our client their competitors’ websites. Our goal was to gauge what our client liked and what he wanted his website to convey. Ultimately, our client prefered a clean and modern website that reflected his brand.

Wireframes

We created low fidelity desktop wireframes using Balsamiq to layout our main content and to structure our thought process. With a large menu and catering menu, we needed to structure the content in digestible chunks. Ultimately, we decided to go with a card style since cards allow for a clean design while minimally displaying the necessary content. With cards, we also hoped that potential customers will be able to easily browse the menu and jump to areas of interest.

Prototype

One major design decision was to determine how to display the menu and catering menu content. With such an extensive menu and little real estate, we concluded that creating a collapsible menu in mobile would be best, since it allows for an improved user experience without information overload. This design decision also catered to the “grab-n-go” customers because the collapsible menu allows the user to jump to their areas of interest.

We wanted our product to be immersive and enticing to reflect the nature of coffee. One of our other design decisions was to utilize large high quality images of the menu items, staff, and food to engage customers.

The Final Product

The final product reflects the Art of Espresso’s brand by staying true to the logo. The earthy greens and yellows evoke the brand, while the images of the staff and space create a personable feel. Images of coffee also indicate to the user that the Art of Espresso is more than just a coffee cart.

One major design decision was to create a separate left hand navigation for the desktop "Food and Drink" menu as well as the desktop "Catering" menu. Since both the menu and catering menu are extensive, we needed a separate navigation on the left to better categorize the items. On desktop, the left hand navigation follows the user to eliminate excessive scrolling to the top every time the user wishes to see a different category. In addition, the card style is present throughout the entire website to maintain a consistent and modern aesthetic.

Check out the final product here, I hope you like what you see!