How might we rebrand the café to better align with their products?
How might we capture potential customers and increase orders?
Due to its proximity to Simon Fraser University and the high percentage of Instagram referrals, the target demographic of the café is university students. After interviewing a mix of customers and non-customers from the ages of 18-55, I found several commonalities in website content of interest. When asked “In what scenario” and “How often” they visited a café website, most responded they would do so to look for a menu. Seeing that accessible links were a priority, I created a sitemap to make sure sufficient CTAs were present. I then made a user journey map and created a set of design and brand principles to unify the design system with emotional guidelines, intending for all components to reflect “friendliness,” “purposefulness,” and “comfort.”
In the process of planning, I discovered the voice of the café— the comforting tone of copy I wanted to write, and the artistic but approachable designs I wanted to make. Higher prices made it necessary to emphasize quality, while playing to the cafe’s unique value proposition as a comfortable place to study. I tried to convey the calm ambience customers described through hand-drawn illustrations and slightly rounded corners. A friendly color palette of warm browns and beige was incorporated into the art and photography, while the copy was written in a similarly approachable tone. The designs themselves used DM Sans and Roxborough CF, typefaces that appear approachable because of their double story letters and exaggerated circular counters.
The landing page is the first thing visitors see; playing an important role in establishing a brand’s context, aesthetics, and tone. I tested my first prototypes by asking users to rank taglines and complete timed tasks like ordering from UberEats. Finally, I would follow up with an Quick-Exposure Memory test, asking them what they remembered from the landing page, and if they could choose 3 adjectives that best described the visual and emotional impression they got:
Both qualitative and quantitative research contributed to my final design; the images from design 2 were organized in a more interesting way, while the text was enclosed in a container so it didn't look decorative. The photography and design system highlight brand keywords and specialties— reflecting the wholesome and local nature of the café with a human touch.
Some of the older interviewees found design 2 and 3 slightly distracting, and preferred a minimal design with one picture, tagline, and order buttons. However, I chose not to include CTAs on the hero image because they are already accessible on the Google page and Instagram; meaning that users chose to click in and ignore them to seek more information on the business. Instead, I had a fixed navigation bar with the order links, and provided them farther in where more trust is established. Every other page integrates CTAs in an appealing way rather than forcing them on the user early and leaving a bad impression.
My early iterations were problematic because of color choice, poor information hierarchy, and undifferentiated content. Later, I improved on them with visual hints like borders and order icons that suggested the polaroids afforded clicking:
The new CTA page above better employs hierarchy by prefacing the links with text and changing the visual rhythm to move from left to right. The size of the type goes from the heading to the images, drawing a user’s eye to the clickable visual links. Beyond the initial issues with the polaroids, users found them a fun and skeuomorphic way to represent ordering: adding delight and personalization to the experience.
The design rationale behind this was Fitt's Law; which states that the time it takes to reach a target area is a function of distance and size to the location. I employed this principle by conveniently placing order links at the bottom of the screen, closest to the user’s thumbs.
Enjoy my work? Lets grab snacks. Contact me at
luo.waileen@gmail.com
