Responsive Web . Rebranding

Papillon Coffee & Tea

Project overview

Project Background
Papillon Coffees is a family owned local coffee shop located in the eastern side of the San Francisco Bay Area, Lafayette. They are known for their quality coffees and classic American baked goods. Since the start of COVID-19, their business has taken a hit due to city-wide indoor dining restrictions. In order for them to maintain revenue, they want to launch a responsive website that features online ordering as the main function of the site. Papillon Coffees is looking at rebranding themselves and updating their current logo.

High-Level Design Goals and Objectives
• Design a responsive website (desktop, tablet, mobile)
• Redesign their logo and develop or extend coherent branding that aligns with the shop’s current and/or desired clientele and customer experience.
• Add advanced features, such as online order for pick up and delivery.

Process Review

Empathize

I started my empathize stage by competitive analysis to find competitors’ strengths and weaknesses. Also, another research method I used in this stage was Remote User Observation to get to know user's experience with online orders for pickup, and identify the needs, motivations, goals, and pain points of users.

Competitive Analysis

I found a few direct and indirect competitors in the area to see what features may be needed for Papillon website and what is not necessary.

Remote User Observation

I asked three participants to go through the process of online ordering of their coffee drink on four different websites. I chose Peet’s Coffee, Brioche de Paris, Moni Coffee & Tea, and Rooted Coffee. These coffee shops are all in the same area of Papillon and successfully offer online ordering service.

Key Findings:
• Preferred “Online Order” CTA on the first page
• Overwhelmed by the long scroll down menus
• Interested by the detailed customization of their drink
• Liked to see the details of their order on the review page
• Looked for quick payment methods such as Apple Pay
• Using images of the items on the menu help them to decide faster
• Preferred to have an option of scheduling their pick up for later time or day

Persona Development

Based on the research findings in competitive analysis and RUO, I created a user who share the same goals, motivations, needs, and fear/ frustrations.

Empathy Map

Just to know what's going on in Emma's mind, so I have this empathy map developed as below:

Define

During the define phase, I synthesized all the data I have collected during the research phase to define the core problems that were identified up to this point. Then, I created a site map, task flow, and user flow.

Sitemap

Based on my competitor analysis findings, I created a sitemap to show the different categories in the website.

Task Flow & User Flow

My task flow and user flow are mainly focused on the process of ordering online and pickup in the store. I created them to show how a user could move through the website. I listed all the pages and steps the user will go through to order a drink for pickup. I kept in mind user goals and frustrations and tried to make the process as simple as possible.

Ideate

This stage started by sketching and generating ideas. To generate these ideas, I created Wireframes, Style Tile, UI Requirements, and Responsive Design.

Wireframes

Before sketching, I researched common UI design patterns and Papillon Coffee’s competitors to find inspiration and see how they were able to solve user problems. After making a compilation of design solutions, I sketched ideas of wireframes then created mid-fidelity wireframes.

Logo & Style Tile

In this stage, I started by creating logo inspired by their previous butterfly(Papillon) logo. Then, I made a style tile for user to feel quality, freshness, organic, friendly, and inviting.

Prototype

Hi-Fi Screens

Using the style tile as a guide, I developed the high-fidelity screens by visualizing the elements and making sure they are aligned with the brand attributes, have clear hierarchy, and appealing visual presentation.

Prototype

Hi-fidelity pages were mocked up in order to allow users to accomplish online ordering. This way we can assess any usability issues prior to deciding specific details.

Test

Usability Test

Participants:
4 participants
Users aged 18+
Local, existing, and potential customers

Objectives:
Test the journey from ordering online to final checkout
Observe for any confusing area and pain points

Methodologies:
Remote User Observation of prototype over a video call using screen share option
5-8 minutes
Documented via written notes and record videos

Affinity Map

Iterations

• On the add to cart modal, I made a price change based on their selected drink size.

• I changed the prep time to pickup time and only include it on the review page.
• CTA font was hard to read and I changed it to bold style.

• There were two email inputs on the fill out checkout contact information, I removed one.

Next Step

Test, iterate, and repeat.

Reflection

This project was a great experience to work with a local business. My main challenge was to creating a wireframes, I realized how a small changes to an interface can lead to clear design or confusion for the users. My wireframes went through various iterations until they were ready to go to the next step. Also, I learned how to create components for my UI Kit and I think that will save me so much time for my future projects.