*Due to the confidentiality agreement, this description has been modified to conceal sensitive information.
The case study involved participants situated in Sweden and was communicated in Swedish to the team and stakeholders. Thus, the artefacts presented below are documented in Swedish.
The project was carried out by a team of five designers. Each team member was involved in all activities, and my specific contribution is described in the case study.
Human-centered designer
My contribution to the project:
• Project Timeline
• Heuristic evaluation
• Stakeholder interviews and analysis
• Product goals
• Scenarios
• Sketching
• Sitemap
• Affinity map
• User cases
• Wireframe and interface mockup
6 weeks, April-May 2022
Figma
Customers frequently interrupt the process of selecting the Premium Product Box before placing their order.
The purchase process is complicated when using a mobile device.
Customers pause or end their product subscriptions.
Redesign the Logged-in Section
Redesign the flow of the ordering process
Redesign the Product Guide
Design for Loyalty Program Integration
Mobile-first approach for enhanced accessibility
We achieved a more intuitive user interface, which resulted in a streamlined purchase process and increased customer engagement through a loyalty program.
In the initial stages of enhancing the User Experience for an online store, our design team embarked on a comprehensive approach. Beginning with a heuristic evaluation, we identified pain points within the website and shared them with a stakeholder. Subsequently, a stakeholder interview provided insights into the business vision and service purposes. Leveraging the company’s prior target group analysis, including detailed Personas, we gained a deeper understanding of the audience (end users).
Further refining our insights, we conducted a webshop evaluation with real users, inviting them to participate in shaping the user-centric improvements. The participants were asked to evaluate the webshop after they were involved in a brainstorming session to gather suggestions for improving the tested interface. The goal was to understand users’ attitudes, expectations, and what they appreciated about the webshop experience.
We organised and analysed our research findings by creating an affinity diagram. This diagram included the results of heuristic evaluations conducted by our team of five designers, the insights gathered during contextual evaluations with users, brainstorming sessions, and the goals set by the company at the start of the project. Using all of this information, we identified six main themes related to problem areas and potential improvements.
I created a goal tree that outlines five fundamental values that should drive the user experience. This tree was developed based on insights gathered from end users and stakeholders and discussed with the design team. The values identified as crucial for the project were customer loyalty, customer satisfaction, simplicity, understandability, and inspiration.
We identified the idea of building a community during our initial discussions with the company. Our design team shared this vision and decided to explore the concept further. As our conversations progressed, we recognised the potential for a loyalty program that could help the company build a strong relationship with users and their future community. We have identified that social interaction within the webshop service can be a keystone of community building, providing added value that is not necessarily linked to purchases.
To better serve the users’ needs, additional criteria and features were identified and added to the tree as green boxes on the right side of the illustration below. These criteria were deemed necessary in assessing the quality of services offered by the webshop.
Concept sketches of the future interface were created based on the written scenarios. The focus was on designing new features and steps that would meet the requirements of the users and stakeholders. Sketching allowed us designers to quickly explore ideas in a freeform and low-fidelity form, first individually and then to communicate ideas in the team. We aimed to work collaboratively and find answers in each other’s sketches, which we could then develop in later stages through an iterative process.
The website had a complex structure with multiple levels and a range of pages offering various types of information and features. To simplify the website and enhance its usability, we concentrated on four main pages and created a user flow to provide a clear understanding of how the pages connect with each other.
During the prototype design phase, I created five use cases by analysing different scenarios created by the whole design team and identifying the actors and goals involved. For each use case, I described and listed all the necessary actions and event steps, with a focus on ensuring the correct sequence of actions was followed.
After finishing the wireframes, we proceeded to create mockups and interactive prototypes to improve the graphical and functional aspects of the design. Our goal was to build complete user flows that would provide a realistic experience for users.
In order to ensure consistency with the company’s identity and adhere to the identity guide, the mockups were created using the same images, colour schemes, fonts, and other design elements.
We developed the mockup and the interactive prototype in two iterations. Following the first iteration, we conducted usability testing to gather feedback from users about the product. The objective of the test was to understand how users perceive and comprehend the design and interface. A user test was conducted on an interactive prototype and participants in the test were asked to complete five tasks. After that, we made some changes based on user feedback. We regularly received feedback from stakeholders and discussed ideas for further development of the prototype to validate our design.
We made some solutions to increase the number of loyal customers and reduce subscription cancellations. As a part of the loyalty program, we have added features to collect and share recipes, invite friends and earn points. This was meant to be a deeper source of information and functionality for other users and a gathering point for interaction between users linked to the company’s products and values. We used the keyword “sällskapsklubben” for the webshop to enhance user experience, which could have generated a greater interest in the business and added value for the user. Our goal was to acquire new customers and retain existing ones by providing them with an engaging platform.
When opening the website, the customer is greeted by a pop-up window that automatically appears. The user can fill in their zip code, which means that mistakes are minimised because they cannot miss this step, as it is crucial for new customers if the company can deliver orders home. The user is also invited to take action by receiving tips in the shopping cart for items that the user may have forgotten they need.
Keeping a common thread throughout the interface’s layout has been prioritised so the user can recognise and get used to the interface. An orange colour has been used on the “Call to action” buttons” and a green colour has been used on the “Add” buttons”. Furthermore, users can now select items and create boxes across all pages to display information from different tabs.
A pop-up window appears after changing the delivery day, as it’s important to give users feedback after making changes. A progress indicator shows the steps from choosing the box to adding it to the shopping cart. Users can go back a step if they made a mistake. Feedback from user tests improved navigation, such as adding more interaction between the guide page and primary boxes.
The opacity of objects changes when, for example, maximum selections are made. Once enough objects have been selected, their opacity will be reduced to indicate that no additional selections can be made.
At the end of each selected box, a summary of the contents is available to the user. This feature prevents users from memorising information by showing them everything they have in their box.
We have improved the user interface by removing irrelevant information and creating a more logical and streamlined flow of relevant information. Through user testing, we identified the mental model users follow when navigating between different functions, and we have implemented a common thread to avoid confusion and ensure a consistent user experience.
Buttons are designed to be well-spaced and large enough to avoid incorrect clicks. As we were creating designs for a mobile screen, we had limited space to work on compared to computer screens.
Gamification was integrated by linking rewards when inviting friends, creating recipes, saving and sharing them with others. The scoring system tracks users’ progress and records their score history to provide valuable insights for informed decision-making.
A calendar designed to choose the delivery day and time that also shows “green days” for delivery. Users can choose environmentally compensated delivery by selecting green days in the calendar. This helps to reduce the environmental impact of the package delivery.
The efficiency of the prototype could have been improved by testing wireframes before developing the hi-fi interface.
The limited interactivity can result in some confusion when users take unplanned paths in navigation, as some features are not clickable.
The prototype provided insufficient feedback, which can lead to negatively impacting the user experience during the evaluation of the prototype.
