[2021 Ironhack Hackshow Winner] E-commerce design — beKnus
I had a great opportunity to design for beKnus, a premium e-commerce textile brand that is preparing its first launch in Germany. Their mission is to offer eco-friendly coziness to customers’ home with an emphasis on self-care. Their first product, Noé is a weighted blanket made of 100% recyclable materials with fine look and quality.
Summary
Client: beKnus
Sprint Length: 2 weeks
Tools: Figma, Maze
Role: UX/UI Designer
Key Emotions: warmth, coziness, premium, sustainability
Scope: Create a stunning website for mobile (mobile first!) and desktop that explains the weighted blanket with all its advantages.
Challenge: The design needs to educate, inspire and appeal at the same time since many are not familiar with our approach to the ultimate blanket.
Emphasize+Define
Client
beKnus, your cozy companion for day and night
My primary focus for this design was:
Visually speak for the brand’s statements with key emotions
Simplify ways to navigate through the website
Attractive look & feels, yet inspiring & informative
A stakeholder meeting was held twice a week to stay transparent through the process and keep everyone in the loop while providing a space for timely feedback.
Guerilla Interview
To understand the current level of acknowledgment in general demographics of users, I conducted a simple guerilla interview via a google form. The result was very interesting!
From these findings, I could safely say that the design should implement informative data on weighted blankets to better inform the potential customers how it could improve quality of life and wellness.
User Persona
I built two personas, Anne and Matteo with two different focuses: sustainability and sleep efficiency.
Both shared similarities in being busy professionals. Regardless of the level of awareness, both of them struggle with anxiety and balance management.
With Anne and Matteo, I went further to see how we can offer a solution that can satisfy their immediate needs and wants while accomplishing the brand’s mission, by creating an empathy map.
With this understanding of our potential users’ needs and wants, I moved onto the define stage where I validated these findings and ideated the direction of my design.
Market Research
In order to understand the existing demands, known facts, and studies regarding our product and messages,
I web-surfed around for an entire day and learned a lot about the possible competitors, interesting pros and cons about weighted blankets, and scientific data to back up those facts.
We must admit that weighted blanket has not been actively proven to be all that it says to be. Some say it is a placebo, the others say it has been used as a therapeutic practice by humans for a long time.
The stakeholders wanted to put less emphasis on the whole idea of anxiety and mental wellness, and instead, they wanted to promote the idea of “me-time” or “self-care for everyone”.
Job to be Done (JTBD)
Appeal, educate, inspire
“Small goals, small wins”. It is hard to remember that when you are in a 2-weeks long design sprint alone and all you want to see is this beautiful design that you vaguely draw in your head.
Job to be done is often my savior when I feel lost in my thoughts. It guides me directly to what needs to be done.
Making sure that the users’ priorities in their purchase decisions are considered throughout my design was one of my goals to establish high KPIs. Job to be done kept me on track for that matter. I wanted to create a design that satisfies target users’ both emotional and practical needs.
How Might We statements (HMW)
Challenges into opportunities
How might we statement is a great way to frame and define what can be done by the brand’s service. Beyond the JTBD, HMW looks closer into challenges the brand faces currently, and how we can turn them around as opportunities.
Ideate
Visual Competitive Analysis
I have gone through some potential competitors who handle similar types of products, brand statements, and user demographics.
From analyzing these, we could see how they position themselves, their UI design, and their general look and feels. They were all established in current markets and had many things to learn from.
For example, Bearaby, a blanket company in the U.S, was using navy and off-white that had a clean and premium look and feel. They also had a “Weighted Blanket Guide” for users who were not familiar with the product.
I found Zara Home’s web design to be clean and user-friendly as it was simple and easy to navigate while its hero on the landing page was full height which was eye-catching and content-focused.
Gravity, one of the early weighted blanket brands, displayed several quantitative data to validate their products which were interesting to see from a user point of view. I decided to implement that as well.
Among all these beautiful ways of presenting themselves, Allbirds really caught my attention. They showed eye-catching video contents to talk about their materials, statements, and why they do what they do. Their website was a great example of incredibly effective storytelling through moving images.
Site Map
With all these findings, I felt ready to build information architecture and decide how I want to display contents across the screens. At this point in my process, I have cleared out a couple of goals: because we only had one product yet, I wanted to push all the spotlights on it. I also wanted the whole design to informative using the right amount of photos while popping some keywords. Lastly, I wanted to minimize and simplify the navigation as much as possible.
Initially, I created a whole set of hierarchies for the about page, however, after speaking with my mentor and thinking about the feedback I’ve gotten from users testing, I decided that it would be more effective to allow users to navigate brand information directly from the landing page.
Other than that, all the other information distribution was pretty similar to other e-commerce websites. I intended to focus on delivering as much information in more eye-catching ways.
User Flows
From the site map, I had more clear ideas on some user flows. I decided to focus on one main flow in two different circumstances: when the product has not launched (now), and when the product is ready.
For the time being, the stakeholder requested a feature to sign up for a waitlist for the users. As the product launch, another flow would be needed with some additional screens such as check out and options to select.
When I look at these two flows now, I see some improvements that can be made. I want to create more realistic entries to the landing page from user perspectives. For example, if a user is entering the website from a social media platform, it will show them an option to log in with the social media account. If a user enters from a promotion email, they will see an option to create an account using their email address.
In this way, we can create an easier and more personalized path for returning users for the future.
Moving on with some meaningful learnings, I started on the design stage of the journey.
Design
Moodboard
Building a mood board is always incredibly dangerous for me because I can scroll through Pinterest and Unsplash all day. This time was particularly challenging to time-block myself because the overall look and feel we want here were totally my jam. Cozy home/me-time? Sign me up!
But I only had two weeks for this design sprint and I still had a long way to go.
I gathered some photos around the color palette stakeholders and I agreed on: two accent colors with soft off-white and navy colors for high-end yet warm feels. This board anchored me throughout the design process as one of the ways to keep consistency.
Styleguide
Okay, time to make some decisions. The main task for me here was to choose typography that will give premium look while being friendly and welcoming. I originally decided on a font family that my stakeholder did not like, so I changed the plan to go with this guy below, Quiche Sans, accompanied by a serif, New Caledonia LT Std.
Design System
Another major decision time! Building some components. I think the design system has been one of the most useful practices so far in my experience. The full system came together only after mid-fi but I enjoyed exploring some ideas with buttons, text arrangements, and different states for them.
I also explored some different logo designs as the current one was not my favorite but after discussing this matter with the stakeholder, we decided to go with the current design. (I hope they will be open for its improvement in the future!)
Mid Fidelity Prototype (mobile)
Now that we have some rules and guidelines lined up, it was time to build some bone structures. I find the mid-fidelity prototype to be an incredible process that saves a lot of us designers from big disasters. Also an exciting thing about mid-fi is that I finally get to do user testing to validate my research.
User testing 1: Maze (mobile)
I have made a user testing via Maze to see if my intended design was easy and clear for users to navigate and to complete tasks.
The two main tasks for the participants were:
browse brand details and learn more about beKnus
2) Check out the product page and purchase.
A total of 15 people participated in the test and the feedback I’ve gotten was very insightful for my next step in this design journey: Iteration & high-fidelity prototype.
I decided to implement a couple of things from here:
Firstly for the landing page, the side that the navigation arrow is pointing needed to be changed to convey the idea of scrolling up to navigate to the next page.
I also realized some changes in wording are needed such as “check out as guest” or “check out without an account”. A return button/go back button was needed on some screens as well.
I discussed this feedback with the stakeholder and received approval for the iterations. Finally, the time we all were waiting for has arrived: High fidelity prototype!
High Fidelity Prototype
With some major iterations in mind, I started setting frames on Figma canvas. One of the challenges I faced during the project was that brand contents and information on the product were not yet published and needed some work done still. So I spent some time playing around with what information we should include on the landing page, about us page, and product details in order to convey the right amount of message. I started with the landing page which will be the first impression for most of the visitors (except the ones who come with direct entries to product pages).
Now thinking back to this stage, I would start with a product page if I get to do a similar project in the future because it was a lot of pressure and things to decide on a white canvas. Similar to how students write their body paragraph before writing the introduction!
High Fidelity Prototype (interaction)
Take Away
I can not be more grateful for the incredibly understanding stakeholders, and the lessons I’ve gained.
I learned a couple of things from this experience:
Never underestimate mid-fidelity prototype
I have a habit of adding details to mid-fidelity and ending up with semi high-fidelity. During my user testing, I received much valuable feedback that led to iterations that improved the design immensely. However, I did spend a great amount of time building those frames because I was thinking about so many other things such as colors, button sizes, and what words I should include (when those are not the main concerns for mid-fi).
White space is important
Initially, my hi-fi had full height hero and colored backgrounds for frames. I realized that I was afraid to leave things white. But when I gave it a try, the whole look and feel of the screen were more breathable. It looked cleaner. I would like to learn more about how to successfully utilize white spaces moving on.
Keep bigger goal/picture physically drawn/written around you
It was very easy for me to get lost in small goals in the process. I was working alone and there were many things to take care of. I found sticky notes very useful in this matter. I wrote the bigger mission of the project on post-its and pasted them on my bathroom mirror, my front door, and my phone background. Seeing the bigger picture literally and visibly helped me to anchor myself in these past two weeks! I will use this method more effectively from now on.
Believe in your design decisions
Last but not least, and of course, I am still not an expert in this, but I learned how to believe in my design decisions. I come from no graphic design or visual design background so working on UI alone was a bit of a challenge for me even though I do enjoy working with colors and grids. I had learned how to back up my design decisions with data and numbers from research. I am incredibly grateful for these gains and am excited to start another one with this knowledge.
Thanks for reading my case study :) If you have any questions or just want to say hi, please don’t hesitate to reach out to kaylajungkim@gmail.com
