Gratis E-commerce Web App Design
A complete redesign of the digital presence of one of Turkey's largest cosmetics chains.
The Challenge
This project was the first e-commerce project that I was assigned to throughout my career. This project included a complete responsive redesign of the client’s website, as well as a brand new mobile app.
My Role
I was the lead designer in the research and design phases of this project. I designed the website and app with the help of another member of my team.
Kick-off & SWOT Analysis
.jpg)
To begin with, we completed a SWOT analysis with the client and members of our strategy team in order to understand our client’s needs, business strategies, and risks and limitations. It became clear that our client’s fun, and exciting brand image was not currently being reflected by their online presence. The client’s website needed a radical redesign – something bold and original, reflective of the in-store experience, and supportive of long-time customers’ habits while continuing to draw newcomers in.
Goals
From the SWOT analysis, we set three main goals for our redesign:
-
The new site needed to provide a smooth pre-sale, checkout and post-sale experience to users aged 18-45. The client wanted to be sure that even if they wouldn’t beat their competitors in terms of price and performance, their superior user experience would make them customers’ first choice.
-
The new site should offer a full and complete experience, avoiding any need to go to the physical store.
-
However, the online experience must not eclipse the in-store experience. It should integrate with and support the in-store experience seamlessly to customers.
In order to accomplish this, we first needed to understand the in-store experience both from the customer and business sides.
The Discovery
Research Techniques
We outlined a research plan in collaboration with our strategy team. Because the goals of this project were so many-sided, we wanted to use a variety of qualitative and quantitative research methods to understand our users’ behaviour both online and offline.
​
Our research plan included:
-
Stakeholder Interviews
-
In-depth Interviews
-
Shadowing
-
Diary Study
-
Offline/Online Card Sorting
-
Tree Test
-
Netnography
-
Competitive Analysis
Discovery Phase: User Behaviour
1. Stakeholder Interviews
We began with stakeholder interviews in order to gain insight into the users before interviewing them. We conducted a total of 9 interviews with stakeholders from various levels of the company, including sales representatives, store managers, and the Heads of Sales and E-commerce.
These interviews together gave us a wealth of knowledge about our potential users (their likes and dislikes, what topics they complain about, what they tend to buy and when) as well as our client (their business and marketing strategies and goals).
2. In-depth Interviews
With a little contextual knowledge about our client’s customers, we decided to proceed directly to the source: the power users. We identified 3 beauty bloggers and social media influencers who were long-time customers of our client. These customers not only knew a lot about their own shopping habits but also knew a lot about the shopping habits of others as well.
3. Shadowing
We also shadowed 5 customers through a typical in-store shopping experience – not interfering, just observing. Later we asked them to clarify some of their actions during the shopping trip (eg. why they chose a certain product over others). The most important insight was the users’ need for more detailed information when selecting the products, as many users proceeded through the store while they are searching the item on Google.
4. Diary Study
We gave 25 sales representatives a diary with a set of questions to answer every day. The topics of focus were: What problems do the customers experience in the store? What questions do they ask the most? Is it possible to group customers into clear subsets?
(The most often question that asked by customers: “Is there a sale on?”)
5. Competitive Analysis & Netnography
Finally, we carried out an extensive analysis of our client’s competitors’ online presences, as well as the websites and mobile apps of over 120 other companies worldwide. We also investigated how our client’s brand was being discussed on social media.
Discovery Phase: Building the Information Architecture
Online / Offline Card Sorting
In order to improve the experience over the current website, it was important to form the right information architecture. We held 2 card sorting sessions with real users in order to understand how users expected product categories to be organized.
In the first session, we asked four users to organize products into logical categories and then give a name to each category. Once we had our card sorting test running smoothly, we took it online for an additional 51 users.
Similarity Matrix
We analysed the results of our cart sorting sessions using a similarity matrix to determine which products were most often sorted together and what category names appeared the most.
Tree Test
Finally, we put the resulting product categories through a series of online tree tests to see if users could easily find products in these categories. We ran three tree test sessions, adjusting the product categories each time, with a total of 131 participants. In the end, the information architecture we put together showed a 31% increase in performance compared to the old website’s.
Ideation
Affinity Map & Mental Model
PS: Click image to zoom:)
We began sorting through our research findings by way of an affinity map exercise. While creating the map, it became clear that our findings could be grouped into two major categories: things the user DID or THOUGHT (the pink rectangles), and things the user WANTED or NEEDED (the yellow rectangles). The findings could be grouped further into steps or phases of the shopping experience.The map we ended up with actually illustrated the users’ mental model of cosmetics shopping: from brand awareness, through product research and selection, to the final purchase. The yellow rectangles became the basis for most of the features we built into the final website and app.
Keywords
To guide us in creating our design concept, we mapped our mental model to a few keywords describing users’ expectations of the new site and app.
CONNECT WITH ME
RECOMMEND
LOOK AFTER
TEACH
RAISE SELF-ESTEEM
GRATIS SHOULD...
MAKE ME FEEL
FIRST
SPECIAL
ORIGINAL
COOL
TRENDSETTING
DIRECT ME
RECOGNIZE
SEE & SHOW
CREATE NEW
COMPLETE
We translated these keywords directly into design elements during the iteration phase. A few examples:
-
Our research showed that users wanted direction in finding and selecting products. For this reason, we ideated on a richly detailed product page, including a tags system to help users find similar products.
-
Another thing users expected was personalization - to feel like the site recognized their likes and dislikes, and could make product suggestions just like a trusted in-store sales representative. To meet this need, we decided to include a rich profile section for the user to fill out their favourite products, brands, and styles, as well as their personal details like hair and eye colour. The site would use this data to send the user smart updates and recommendations every time they logged on.
Design Phase
Web Site Design
The first and perhaps most important wireframe was the new homepage. We took the important elements that we knew from our research that users typically looked for (eg. sales, new products, how-to’s and other style-related content, and brands), ranked them in the order of importance to both users and the client, experimented with what kind of modules would be best showcase in order to form our homepage.
Fortunately, our first designs for the website tested quite well, so most of our iterating ended up focusing on the website and app integrations and fine-tuning details such as how the product filters should work, what forms of personalization to offer, and how much detail was feasible to include on the product pages.
Mobile App Design
The mobile app had of the following goals to meet:
​
-
Integrate seamlessly with the web shopping experience. We ensured that not only every element of the user’s shopping journey was easy to complete from the app, but also every action completed on either the website or the app was reflected on.
-
Support the in-store experience. In the research phase, we often saw customers standing in the middle of the store staring at their phones. While some were googling products and ingredient names, others were taking pictures of a product, either to remember to buy it later or to check if they already had one. To make the process easy for the customer, we added a barcode scanner to the app. Users would be able to scan any product in the store and linked to its product page, where they could see detailed information about the product, check whether they’d already bought it. Customers can also add the products to their favourites list. To further support the in-store experience, we designed a virtual loyalty card system and locate it into the app to replace the current physical card.
-
Highlight the brand’s original content. Our client had already built a following around their beauty how-to blogs and videos. We designed a number of features to allow the user to engage more with this content, but the most important strategy here was simply to bring the content to the forefront of the app, which we did partly through our choice of navigation patterns.
Mobile Navigation
It was vital to the success of this app that its in-store and content features be easily discoverable and accessible with a few taps as possible. We designed the app with a bottom navigation bar due to its high discoverability.
To be sure, we tested versions of the app with both the navigation bar and a more traditional hamburger menu. The results showed that while users were able to discover the app’s other features more easily using the navigation bar, their first instinct when searching for the product categories was to look in the top left corner of the screen.
In the end, we kept the navigation bar for high-level navigation and put a hamburger menu in the top left corner as a shortcut to the product categories.
Prototype & 5-Second Testing
After finishing our wireframes, we collaborated with the UI team. Then I created clickable prototypes using InVision and tested them with users.
While the tests mostly went smoothly, there were a couple of rough areas that required rethinking. Most notably, our client’s brand focus on discounts that a product might have any number of applicable sales offers and up to three different prices at any given time. Trying to display all of these at once on the product detail page presented a unique challenge.
We mocked up around 30 different versions of the product detail page and conducted countless 5-second tests before finally arriving at a version that users could understand at a glance.
The Results
After the project was delivered to our customer and we couldn't reach the metrics. However, the users who tested our clickable prototype gave it one of the highest QUIS (Questionnaire for User Interface Satisfaction) scores of any project our company has ever produced.
In addition, the back-end implementation team called our UX design the most detailed and comprehensive they had ever seen, which made all the endless 5-second tests and the edge case-chasing seem worthwhile. =)
Unfortunately, most of the functions are not launched because of the restrictions of the company, but you can view some of our works from this link:
https://www.gratis.com/
​
Thanks :)