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.
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.
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.
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.
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:
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.
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:
This shows the steps need to be taken for Eugenia to purchase coffee beans from the website.
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.
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:
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.
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.
Per client's request, the overall look is minimal and elegant which matches the brand personality.
Since there are a few sections on the landing page, I thought user experience would be enhanced if I add some to tell stories and guide the users to scroll through different sections.
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:
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.
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:
The following web animation has been implemented throughout the website:
10 people tested the prototype and there was no request to change the navigation. But there are suggestions on the other pages:
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.
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 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.
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.
Learn, Iterate and Design. This is something that I keep reminding myself when working on this web design project.
I had some experience in creating websites by html and Dreamweaver before but Webflow is new to me. It took me awhile to use it.