KILPI — Ecommerce app to provide a better experience.
My goal was to create a unique and simple eCommerce experience for kilpi.
Preparation:
Building an eCommerce experience was a big challenge for a company with such a number of users.
To make sure that I have to take the right direction, I joined a scoping session with the client to understand the user's pains and needs, what they are failing to navigate in the old version and how I can help to improve this experience.
The Process
Research
I started the process with usability testing and ended with validation.
This process provided me with a roadmap and a solid foundation to base my design solutions on users findings.
Project Roadmap
Persona
First I created a provisional persona for a typical user for Kilpi based on online research and the base of users within my friends and family.
Guerrilla user testing
For the next phase, I went out to the street and conducted 10 guerrilla usability tests. I tested 3 users in a sports shop and the others in a restaurant. I was able to meet users that validated some of my persona hypotheses and I could spot some pain points that emerged through using the actual kilpi store.
Customer Journey Map
I decide to make a customer journey map from my Guerrilla user testing results, for I can analyse and extract all data to understand customers needs.
Affinity mapping
From my notes on user testing patterns, and from customer journey map results I started categorizing these issues by similar pains through affinity mapping.
Define the problem 1
Pain point 1: “Featured products”. Users were not able to find featured products, and the product list was out of the screen, users must scroll down to start to see products.
Define the problem 2
Pain point 2: “Product filter”. Users were not able to find the search field and they can’t filter products by a specific category.
Define the problem 3
Pain point 3: “Product details”. Product image is hidden in the bottom. Missing product details. Can’t choose product size and color. Missing product price. Missing saving interested products.
Define the problem 4
Pain point 4: “Add to cart”. Users were not able to add products to a cart. They must to click 3 times to go to another page to add a product to a cart.
Ideation
I started sketching out solutions on paper to give freedom to my flow of thought and not be constrained by details.
Design solutions
1- “Featured products” By default, I proposed to add the “Featured products” in the home screen to this will allows the user to see last featured products, product discounts (eg: Black Friday).
2- “Filter and search products” By default, I proposed to add two search types. The first on top of the screen present in all screens allows the user to search products by keywords such: make, type, and much more. The second one on the bottom of the screen will be present at home screen, product lists. This filter feature allows user to define what kind the product's user will want to see. User will be able to customise the filter by rotating each product types aligned with the categories as well. By clicking “OK” user will see the list of products filtered.
3- “Product details” I proposed a completely detailed product screen for user can see all details. In this screen, the user will be able to customise all product details.
4- “Add to cart” I proposed a simple “Fab button” on the right at the bottom of the screen. This button will allow users to add a product to cart easily.
5- “My cart” I proposed a simple way to user sees all products inside the cart screen. User will be able to delete and edit products cart list. By clicking on “checkout” User will run the checkout process.
Hi-fi Wireframes
After sketching on paper I turned my ideas into high fidelity Wireframes using Sketch, then used Axure to create a clickable wireframes prototype to validate my solutions.
Validation
I tested the Wireframes prototype with 10 new users using the same scenario used for guerrilla testing to validate if the problem has been solved.
After conducting validation tests:
- Users had no difficulty creating account and they have completed this task successfully.
- Users were able to search for products by keywords and were able to filter products by category as well. All users were able to complete this task successfully.
- Users were able to view all product details also they were able to customize product details and they were able to save products as well. All users were able to complete this task successfully.
- All users were able to add products to cart and they have complected the checkout process as well.
Generally, the results were a success. Now I can start to think about the design process.
Design process
Project goal
The new eCommerce platform has to respond with Kilpi brand image and have to attract all users with the best experience it also has to fit the existing content such as product images, colours and text as well.
Solution Path
The end application includes all necessary features to offer good experience for users can achieve what they will need from the easy way. From this point of view below are 5-key features on how I have achieved that.
User Flow
I have worked on the entire flow so the user journey would be smooth.
Branding
The Application colours, fonts and data representations are aligned with the branding of the core Kilpi brand.
Visual
Finally, UI. I added the colours, icons and micro-interactions to the wireframes, so the final product would reflect the look and feel of the kilpi brand.
Interactions
I have worked on some interactions to simulate how the user will interact with the product.
