Design Challenge: e-commerce. The market of Korean cosmetics in Russia
2nd Ironhack project — Different approach of the Design Thinking project based on an existing product.
For our second week at IronHack, our challenge was to design the e-commerce Desktop version for a small local business. We could either work on an existing website, or creating a new one from scratch.
For this project, I had the pleasure to work and learn with Victoria Kulaeva and Reep Ver Loren van Themaat
The Challenge: Local e-commerce
Overview:
Local shops and practitioners are suffering a decrease in the demand of their services and products due to the extreme situation COVID-19 pushed worldwide. This can affect local economies and many families. Alongside this, we can see true intent and a growing trend to support local businesses in many communities.
Online presence is a good way to hijack the issue and more and more professionals are on the verge of their digital transition.
Design Challenge:
Design a desktop website for a local business or professional. In this project we’re focusing our efforts on organising the information in a clear way, to be most effective for both the customer and provider. Also, we want to tackle Interaction design patterns to make the exchange as streamlined as possible.
Target Device / Platform:
Desktop
Victoria, one of my colleagues, originally from Russia has a friend that owns a small business about Korean cosmetics. She uses Instagram for running her business and order processing. We all agreed that she needed a proper e-commerce site to improve her work and her costumer’s experience.
The Design Thinking process we applied in our first project was also our north star for this one. I highly recommend you read it first.
I’ll list all the steps and briefly explain the re-used ones but I’ll give more details on the new ones implemented. You’ll notice that we skipped some methodologies because every project has its requirements and the process should be adapted to its needs.
Specifically this project is based on an existing business. Hence our primary research starts to explore and analyse everything about the business itself and its competitors.
Below you’ll find a quick run-through on the whole process:
DEFINE THE PROBLEM
1.Empathise | Develop a deep understanding of the problem
1.1 Business Analysis:
1.1.1 Business Analysis. SWOT Analysis
1.1.2 Business Analysis. Stakeholders Interviews
1.1.3 Business Analysis. Competitive Analysis:
1.1.3.1 Feature comparison
1.1.3.2 Market Positioning Map
1.1.4 Business Analysis. JtBD (Jobs to be Done) & Value Proposition Canvas
2.Define | Clearly articulate the problem you want to solve.
2.1 Problem & Hypothesis Statement
2.2 Information Architecture:
2.2.1 Information Architecture. Card Sorting
2.2.2 Information Architecture. Sitemap
SOLVE THE PROBLEM
2.2.3 Information Architecture. User Flow
3.Prototype
3.1 Mid-Fi Prototype
4.Test | Gather user feedback in order to refine your solution
5. High-Fi Prototype
DEFINE THE PROBLEM
Day 1
1.Empathise | Develop a deep understanding of the problem
1.1 Business Analysis
As mentioned, we face at this point the first phase of our Design Thinking process, by empathising with our business. We’ll start off with the Business Analysis and the study of our business’ competition.
Business Analysis is the process of examining the business’s needs and goals. Understanding the Business needs will allow you to create solutions that will deliver value to stakeholders and trigger the development or improvement of concrete products and services.
A good Business Analysis starts from a definition of:
The Business Objective. Which is something we’ll gather during the interview with our main stakeholder.
The Project Scope. It defines guidelines to meet the business needs like identify stakeholders that validates deliverables, document the technology and business process, sign off budget proposed and identify due dates. In this case we work again on a 4 days project timeline to develop and deliver our idea.
Finally, there’s the Project Requirements definition where you gather and analyse the information the whole team needs in order to implement the solution.
1.1.1 Business Analysis. SWOT Analysis
SWOT Analysis consists on identifying Strengths, Weaknesses, Opportunities and Threads. It helps you to build on what the business does well, to address what is lacking, to minimise risks, and to take the greatest possible advantage of chances for success.
Patchyuly is a small business with one single owner and responsible, Julia.
She started it as a hobby in Instagram and she used her account to sell Korean cosmetics and share her personal experiences by using them. It became soon a very popular business mostly due to her personalised and customised selling service alongside with cheap prices.
Her business is divided in two accounts, one for social purposes (3,108 followers) and the second one with the catalogue with the products (61 followers). This reveals a clear evidence and need to create a unified e-commerce site.
This preliminary research helped us to answer some questions and to elaborate new ones for the interview we planned with Julia. This would allow us to get her point of view, and a better understanding on her business needs, goals and objectives.
1.1.2 Business Analysis. Stakeholders Interviews
The stakeholder interviews are an opportunity to gather vital insight for any researcher that needs to perform a good analysis and translate it into actionable insights.
We talked about:
• Users
• Problems
• Goals
• Culture
We didn’t talk about:
• Solutions
• Features
• Implementation details
• Colours and typefaces
Here is the extra information we got from our qualitative interview:
Two years ago, Julia like many other people in Russia, started to use Korean cosmetics. These products are quite expensive but she discovered good suppliers at very cheap rates.
She started selling to friends and family in Instagram. The Social Network gave her enough visibility. However, all the payment transactions were manually done through personal messages and bank transfers. This personal approach and customised service became her strongest value and it increased very fast her popularity.
Her business grew as also her competition. Therefore she needed to spend more time and resources than planned. Many other online and physical stores appeared and that made difficult to stand out from them. The investment was bigger than the benefits and the profit she was getting in return. She finally decided to put aside the business and focus on her other main full time job as a flight assistant.
1.1.3 Business Analysis. Competitive Analysis
The best way to identify opportunities and threats in the current marketplace is by performing a Competitive Analysis. We identified first the main 4 brands that are direct competitors of Patchyuly and we ran our two studies.
1.3.1 Feature comparison:
This table helps you to compare easily what features other brands offer.
The biggest pain-point Patchyuly has is the lack of an existing platform / e-commerce website. On the other hand, Patchyuly offers the cheapest prices.
1.1.3.2 Market Positioning Map
With the below diagram we can see also where our product/service is located based on specific qualities and requirements in the market. Patchyuly offers low prices but it doesn’t have the visibility and/or the high status that Gold Apple for instance has.
1.1.4 Business Analysis. JtBD (Jobs to be Done) & Value Proposition Canvas
The following concepts define the elaboration of the structure of this JtBD methodology:
a.Hire a product. Why hire Patchyuly?:
“When we buy a product, we essentially ‘hire’ it to help us do a job. If it does the job well, the next time we’re confronted with the same job, we tend to hire that product again. If it does a crummy job, we ‘fire’ it.” Clayton M. Christensen | “Know Your Customers: JtBD”
For instance:
- An user has JtBD
- Hires someone to do the Job
- Enjoys the benefits
Lets look from a Patchyuly lens:
What JtBD has an user when buying a Korean cosmetic to hire Patchyuly and no others competitors, to enjoy the benefits of that product/service?
b.Job stories. What users tell when buying Korean cosmetics online?
It becomes even easier when you identify the JtBD based on stories from user’s interviews, and we used the below template to accomplish it:
The when focuses on the situation, the want focuses on the motivation, and the can focuses on the outcome. Three JtBD’s:
- When I have a specific problem in my face, I want a trusted and close person to talk about the product suits better my skin, so I can safely use that product based on a custom advice and my specific needs.
- When I want to spend money on good Korean cosmetics, I want to find products of quality and not pay very expensive prices for them, so I can order more frequently.
- When I need to buy online a Korean cosmetic, I want to have an accessible and safe e-commerce site, so I can add my bank details and safely pay without any risk.
In addition we found also important to elaborate The Value Proposition Canvas to understand what jobs our service Patchyuly is able to hold:
Day 2
2.Define | Clearly articulate the problem you want to solve.
2.1 Problem & Hypothesis Statement
At this stage, we were already able to elaborate the Problem and Hypothesis Statement. Through our collected Business Analysis insights and interviews we had defined the problem we wanted to solve. We followed the same structure we learnt in our first project.
The Problem Statement:
Patchyuly was designed to sell Korean cosmetics for cheaper prices to direct friends. We have observed that the current Instagram page is not offering a good experience when buying a product. This is causing a decrease of trust on the brand and therefore a decrement orders.
The Hypothesis Statement:
We believe that by introducing an e-commerce site for Patchyuly’s users it will translate into a bigger engagement and trust on the brand. We will know we are right with an increment on orders and contact requests.
2.2 Information Architecture:
We need to understand everything about the new site an its Information Architecture. Sorry, its what?
The Information architecture (IA) is a discipline that decides the best way to group content across pages and define the relationship between those pages through navigation elements. It studies 3 components of any site:
1. Ontology. It refers to the content and the keywords that represent that content.
2. Taxonomy. It is the logic way of grouping and label that content.
3. Choreography. After the content is labeled, grouped, and organised, choreography refers the different ways the user browses and interacts with it.
To build Patchyuly’s new IA for the site we based most on the Highlights of her Instagram page and insights.
We collected these keywords -Ontology- (Masks, kits, 10 Steps of Care, Reviews, We test, Stock, Delivery, Patches) and others (Brands, Best sellers, my orders, my story, personal advice, blog, customer service, type of skin…) from other competitor’s platforms that might fit in her new e-commerce site. We even made a first draft of a potential organisation -Taxonomy- and an ideal Navigation structure -Choreography-
At this stage these are all assumptions based on our research and professional experience, but it doesn’t have any value until ours users validate it. We planned and conducted our first Card Sorting experiment.
2.2.1 Information Architecture. Card Sorting
The Card Sorting method is a research tool to understand how your target audience organises the information of your site by collecting the primary mental models and behaviours of our users.
We used the keywords we collected initially (30 in total) and put them in cards in a Card Sort study created in an useful digital tool called Optimal WorkShop. This platform helps to create and run the test, share it with the users we choose, and visualise later the results with different report views.
We could have chosen between two Card Sorting types. Open or Close.
Open lets the participants organise the cards into as many groups as they want and assign their own labels to the groups.
Closed Participants are given both cards and category labels, and have to match the cards to the categories.
We chose the Open one because we wanted to see the information organised from other people’s perspectives. By doing it we avoid introducing our own biases into the grouping of items.
Our team tested the study with different users (they all matched our target audience which were women between 20–60 years old). By doing so, we also were able to ask our participants at the end of the Card Sorting, two questions that could give us more detailed information about their personal experience buying cosmetics online:
- What are your frustrations when buying cosmetics online, if any?
- What is the ideal service you expect when buying cosmetics online?
Some of the answers to the first question were related with the impediment of testing the product physically before you buy it or the potential reaction that the skin might have with it. This is actually the biggest weakness of any current online site. The key solution of this problem is to provide a good description with all the detailed features where the users can understand if that product fit or not their needs.
The answers of the second question claimed a personal advice, and an analysis of the skin by uploading a photo of your face. Some of them mentioned also the Augmented Reality which is a trending solution that some cosmetics websites are already implementing.
The image above is the before and after of how one of our users grouped and labeled the 30 cards we created. In general, the results were interesting, however we got many different combinations and labels that made difficult to analyse and patterns finding. We found a way though:
Day 3
2.2.2 Information Architecture. Sitemap
The keywords we collected are represented as pages and they have to be organised and connected in a logic way. This is called Sitemap, which is another methodology from the Information Architecture process.
Sitemaps define an initial order of content. However, this top-down hierarchy doesn’t represent a unique way to navigate through the pages because each user has its own way. A good Sitemap organises visually all those different options to connect content (pages) in order to provide a good navigation experience to any type of user.
Sitemaps show not just the hierarchy and structure of each page (primary/ secondary navigation, in-page links, footer…), but also the goals and functionality that happens on each section. In the end, when the user goes to your web page, you want them to do something. Sitemaps are a clear way to streamline the conversion funnel to clarify how the user will converse the way you want.
Our Mid-fi prototype will allow us to visualise the above ordering.
SOLVE THE PROBLEM
2.2.3 Information Architecture. User Flow
A User flow helps to validate your User Journey (another methodology we used in our first project).
It shows the path or paths a user takes to complete a task. We primary define the “Happy paths” which means to accomplish a task easily and ideally in between 3–5 clicks; but the User Flow considers also possible pain points that might drive the user into another direction. If that happens, the site should be able to offer a solution to go back to the “Happy Path”.
Unlike the sitemap, pages are shown in the order that a user would view them and this order is made by keeping in mind the user’s motivations and needs.
At this point we had a bunch of information that looked very abstract. To elaborate properly a realistic User flow, we ideated and took solution ideas. User Flow served us as a bridge between the Definition and the Solution stage.
During the whole project, the research highlighted the same strong value Patchyuly offers and lot of users demand: the personal advice. One early solution we took was to implement in the site a quiz where customers could simply answer to 2 questions and get as a result a list of product suggestions adapted to their needs.
Bellow, it is the chart that visualises the User Flow of the following task which includes the Quiz:
“I want to buy a face product but I’m not sure which one is the best for my skin. I need advice before I make a decision.”
3.Prototype
3.1 Mid-Fi Prototype
User Flow is clear. It was time to start Wireframing. All the ingredients to start organising and displaying our content were known. Clinique (below) was also set to be one of our main functional inspirations for Patchyuly.
Wireframes are meant to plan the layout and interaction of our interface. The right order of the visual elements provide a good communication and it anticipates what users might need. Bottom line, a good interface has elements easy to access, understand, and use in order to facilitate the intended actions.
The plan is divided in three components:
- Information design. Which places and prioritises the information in a way that facilitates understanding.
- Navigation Design. Screen elements that allow the user to move from page to page through the website.
In the above 2 steps, we follow the criteria we defined in the Sitemapping (such as a global navigation, local navigation supplementary navigation, contextual navigation.)
- Interface Design includes interface elements (UI Patterns) that enables the users to interact with functionality of the system. We refer to navigational components (breadcrumbs, sliders, search fields…), informational components (tooltips, icons, progress bar, notifications…) input controls… All these are familiar components we have learnt along all the internet era which most of the people already know how to interact with.
Our responsibility as UX Designers is to layout these elements in an holistic way and based on some Design Guidelines we have defined in advance, such as colours, typography, buttons/inputs styles and states.
This provides an nice and ideal experience for the user when navigating through any site. Design Guidelines are aligned with the Design Principles which are two complete different concepts.
Design Principles are intended to improve the quality of user interface design. Its foundations compile these standards: User familiarity, Consistency, Minimal surprise, Recoverability, User guidance, and User diversity.
Jakob Nielsen elaborated in 1995 10 Usability Heuristics that unify these Design Principles. A good UX project should conduct an Heuristic evaluation when designing a new or existing site. The compliance of all them can guarantee a successful user experience.
Finally When designing, we have to consider also all the different resolutions and devices were the site will be used (Mobile vs Desktop). This means that we have to do our content, responsive. We opted to go with a 12 columns grid.
Bellow you can see our first approach for our mid-fi wireframes. It’s time to run an Usability test.
4.Test | Gather user feedback in order to refine your solution
An Usability test can be summarised with this simple quote:
“77% of users return to content and information sites because of ease-of-use. Only 22% return because the site belongs to a favorite brand.” Forrester
The very foundational key qualities of Usability are LEMES (Learnability , Efficiency, Memorability, Errors, Satisfaction). To test the Usability of our User Flow defined in our Mid-fi Wireframe we used Maze together with Figma (aka “Figma Maria” :D).
Within Maze we define the task we want users to accomplish:
This is an online shop of Korean cosmetics and we ask you to accomplish the following task:
1. Start free consultation for skin care product
2. Answer 2 questions
3. Buy the product
Maze also collects all the interaction data from our user and translates it into heatmaps. One revealed an interesting insight:
The task said to “buy the product” but overall the prominent behaviour was actually on getting more details or information from the product by clicking on the product image of the item, before they actually buy it.
With the above data we had the need to define a new JtBD or re-evaluate the existing ones.
It is also important to mention that, although the most rigorously conducted formal test cannot, with 100 percent certainty, ensure that a product will be usable when released; Usability testing, when conducted with care and precision, and as part of an overall user-centered-design approach, is an almost infallible indicator of potential problems and the means to resolve them. It minimises the risk considerably of releasing an unstable or unlearnable product.
The new JtBD:
- When I want to buy a cosmetic product, I want to first read more information about it, so I can view all the details and confirm that it‘s a good mach for my skin’.
Day 4
We increased focus on improving visibility on product details and updated this feature by combining it with an improved interface of the Product Suggestion Page with some inspiration from MD Acne — a cosmetic brand specialised on acne problems.
Md-Acne onboards their users with a questionary that starts with the analysis of your skin by uploading a picture of your face followed by a list of questions about your skin and habits. It finishes with a proposed and customised treatment of a pack of 3 products.
A 3 Steps Treatment suggestion was on top of the table as the main driver instead of a normal list of products. The user would still have the possibility of buying the 3 of them as a pack or individually.
5. High-Fi Prototype
Day 5
Presentation
After 4 intense days the moment to showcase the work in just 5 minutes arrived.
Some Glows:
“-Perfect for always keeping the user in the center of your solution. You presented the business, goals, and needs of the user very well and connected them throughout the presentation.
-Understanding one of the strengths (the personal approach) and creating a quiz feature to keep this service on the website.”
“-Amazing hi-fi!!”
Some Grows:
“-Show better the opportunities on SWOT and Competitive Analysis.
-Add all processes from Low-Fi, Mid-Fi until your final Hi-Fi.
-Highlight the essential data on slides and connect them to your presentation flow. People need to understand your solution.
Improve call to action buttons or other actions on the page.”
In this article I showed in detail everything about the process, including the SWOT analysis, Mid and Low-Fi’s etc.
Introspectively, I believe that the moment to present all of it was not done on the best and clear way.
Learnings and Conclusions
In this project we were able to solve the problems of two main stakeholders — the Patchyuly’s owner and its users.
With this e-commerce site, Julia would be finally able to maintain the business and drive growth. Both Catalog and online shop are now in one single site and orders are easily processed with a proper automated Checkout system.
The initial quiz turned out to be the strongest feature promoting a nice experience for the user and overall understanding of the product and requirements.
The power of team work. Together with different strengths we were able to deliver a powerful product and insights to one of the most common businesses within our day2day’s lives.
If you read it till here, thank you very much. Any feedback is really highly appreciated.
