‍

01

Background

I felt so excited for this project! Why? Not just because I’m a huge coffee lover, it is I had to design an online coffee store!

Because of the pandemic situation, many coffee shops closed down in Hong Kong. The founder, Cecilia Yeung, thought that it is the time for her to bring positive vibes to the society, by holding experiential coffee workshops and promoting quality speciality coffee to the coffee lovers in town. This is the reason why she founded Lab Aura in August 2020.

Currently the sales channels are Facebook and Instagram. The sales are good and she got an interview from a magazine on coffee brewing. Cecilia and I got together to discuss the need of setting up a website for more exposure and branding purposes.

Business goals:

• Promote the brand
• Reach new customers

Target market:

• Aged 16-50 who live in Hong Kong and Macau

Key objectives of the website:

• Branding
• Communicate experience and services
• Generate sales leads for the courses and products
• Share the coffee knowledge & experiences with others

02

Starting from scratch

Before the research, I felt the need to understand more about the brand, like the brand personality, the mission, target market etc. So I had a meeting with the client to discuss this in-depth. However, the client mentioned that this is still a raw idea so she needs some help on refining the brand as well.

So I had a quick brainstorming session with the client to get a clearer idea on the core values, mission/vision and the brand personality. I asked quite a few questions just to guide her to think more about the direction and how we should represent the brand. It was a fruitful session and I enjoyed it very much!

After the meeting, I’ve worked out a few options of brand color based on the client's idea.

03

The Challenges

1. Small team with only me and the founder. So I will be the one who do project management as well.
2. The client does not want a pure E-commerce site. The site will also be a platform for her to share her knowledge and experiences with coffee lovers.

Project Goals

1. Complete the project within 2 months
2. Do a competitive analysis of the big players in the market
3. Create the brand guidelines
4. Discover an interaction platform for coffee knowledge sharing

Key Features:

1. Automate business process (currently the client has to manually update the customer orders)
2. Content Management System for products, events and blog
3. Online store with payment and shipping calculation tools
4. Allow customers to subscribe for updates

04

Competitor Analysis

The client has identified 4 of her key rivals in Hong Kong. Below is the analysis of their websites:

The next step is to conduct user research by survey and interviews.

05

User Research

Objectives:

• Understand users’ habit of drinking coffee
• Where do they buy coffee beans and why
• Their motivations on purchasing coffee-related products online

a. Survey - 24 participants

The survey is divided by 3 parts: the habit of drinking coffee, buying speciality coffee beans and whether they want to attend courses to gain more knowledge.

b. Interview with consumers - 5 participants

I have interviewed with some of the participants to get an in-depth understanding of their opinion on coffee and their buying behavior/decision criteria when choosing a coffee brand.  Followed by a few questions to find out what induce them to learn more about coffee, and what makes them applying for coffee related courses or workshops.

From these conversations, I've obtained more information for the user persona of the project:

06

Ideation

With the results of the user research, we have a more substantial idea of the users. I have created a site map and user flow to support my design strategy.

a. Site Map

I've drafted the distribution of the website pages and sent to my client for review:

The client has reviewed the site map and there are a few minor changes:

• Coffee Gear and Gift Box have to be taken out as she decided to sell coffee beans only at the moment
• Member section is not needed
• Events will be grouped under "About" section

b. User Flow

This shows the steps need to be taken for Eugenia to purchase coffee beans from the website.

c. The wireframes (Landing page and About page)

I've decided to design the landing page and company information page to present to the client first. Its style had to define the stylistic direction for the rest of the pages. This enables me to get a feedback from client and iterate quickly.

UI Concept:

• Minimalistic and focused
• Simple and clear microinteractions

Design strategies:

• Hero image with tagline to emphasize the USP of the brand
• Press section will be presented on the landing page as from the result of the user research, users feel more confident of making their purchase from a reputable brand
• Increase the interactiveness by having the scroll animation on the landing page (so user can see from coffee cherry, coffee bean and brewing when they scroll down). While on the company page, I've added a section where users can click to see the fun facts of the founder.

07

More challenges ahead

After discussing with client, she is fine with the look and feel of the design. There are a few changes need to be made:

For the product section - she prefer having different background color to reflect the tasting notes of the coffee beans. So I will go back and amend that.

Navigation bar - courses/workshop is too long and will be replaced by classes. I asked the client if we could just put the brand name instead of the logo as the marble background may look odd. It is still to be confirmed so I will keep it as it is as of now.

More challenges identified during the meeting:

• No resources for marketing so even after the customers subscribe to her website, she has no time to create e-newsletter for promotional purposes.
• The client does not have the budget to set up a store on Shopify or other similar e-commerce platform and she does not prefer using Wordpress and Wix.

To narrow down the scope, I asked how many products she intends to sell per month and whether a shopping cart on site is needed. It turned out that there will be less than 5 products and she is fine with the site without a payment gateway/shipping calculation tool on the site.

Solutions:

• Take out the subscription button at the moment until she has marketing resources.
• Use Webflow as the publishing platform which allows more flexibility on design.
• Create online order form. Credit card payment will be added later when there are growing requests.

08

The Revision

I went back and done some research on the online order form. Google form was one of the choices but it is not very interactive. Then I found Typeform which acts as a live user agent and guide the customers throughout the ordering process. The conversational form creates a better experiences for users while still able to customise the form to match the brand identity. It can integrate with google sheet so there will be a centralised order database for client to process.

So I drafted the revised order flow and the content to be created in CMS, together with the drafted online form and jumped in the call with the client for her approval.

09

The Design

Per client's request, the overall look is minimal and elegant which matches the brand personality.

Use Motion Design to Create Movement

Since there are a few sections on the landing page, I thought user experience would be enhanced if I add some animations to tell stories and guide the users to scroll through different sections.

The Concept:

• Farm to cup coffee journey (coffee cherry > coffee beans > brewing > a cup of coffee)
• Each animation relates to the section. For example, coffee brewing animation being placed before the "Classes" section, serves as an introduction of coffee brewing classes.

Client likes the concept so I created the vector arts and use After Effects for animation. Then converted them to Lottie files by Bodymovin plugin.

Here it is how it looks like:

Product Images

• Gradient background with white spotlight to add more depth and it also matches the brand as aura is associated with light.
• Added coffee bean to the main product background.
• For the drip bag coffee boxset, I've designed a frosted glass background.

About

Scrolling animation is implemented to create a dynamic user experience and make users to spend more time on the website.

CTA button placed under the Events session to ask companies who are interested in collaboration to contact the client.

Classes

Here's a glance at design for the classes page. I have created a flip-card animation on the coffee certified programs. Users can click or tap on the images to reveal the details of the class schedules. This is to:

• Brings real-world movement to the website, thus engage the users to interact with the page
• Client can use the same images for social media platforms. This can save her time from updating both the website and the social media posts.

The following web animation has been implemented throughout the website:

• Parallax scrolling effect
• Click/hover animation

Testing

10 people tested the prototype and there was no request to change the navigation. But there are suggestions on the other pages:

Contact Form

They pointed out that it would help a lot of they can choose what kind of issue so it would save them from explaining in the comment box.

Blog

The participants have no problem on the categorization but the navigation can be improved by being able to click and back to top easily without scrolling all the way to the top.

‍

The Second Revision

The contact page will have the below form with a drop-down menu for users to pick the type of issue that they are reaching out for.

‍

‍

For the Blog page, I've added a back to top button and a further reading session for better navigation experience.

10

Client's Review

The website has been published to webflow-generated domain name for client's review. The sharing buttons will be created on the product and blog after the project is switched to paid plan as custom codes are not able to be embedded for free plan.

After meeting with client in person, the followings are the changes need to be made:

1. Brand Logo on the Nav Bar - remove the marble background
2. Workshops on 'Class' - add flip card animation to keep consistency
3. Product Image - the actual product will be replaced by the photos of the food that represent the tasting notes.
4. Add a basket under the coffee cherries for the Lottie Animation on the landing page
5. Spacing have to be adjusted as there are discrepancies between MAC and Windows
6. Add Chinese version to the Online Order Form

So I will start work on the 3rd revision, along with a google sheet that listed all the content needed with parameters to client within 2 weeks.