Outdoor Xpress
Local e-commerce app
UX/UI Design
Prototyping
Project Overview
The goal was to design a mobile app where users can select multiple products and know the delivery fee before checking out the cart or having to log in beforehand. It's for a one-store, local family-owned clothing, apparel and outdoor equipment store. The target users are adults, aged 18 - 60 years old who undertake outdoor activities such as camping at least once every three months.
Roles
-
UX/UI Design
-
Information Architecture
-
Researcher
Tools
-
Figma
-
Typeform
Project Length
Nov - Dec 2023
​
Let's go learn about the market and our users...
Market Research
In the discovery phase, the main goal was to get to know the client. I asked big-picture questions and dug into the challenges faced by both the client and their users. I explored potential business issues, desired outcomes, the types of users involved, and any obstacles they might encounter.
This helped me uncover how I might be able to test against any assumptions I may have made about the business or the users.
Competitive Audit
My competitive audit goal was - To compare the user experience while ordering multiple items on the app/website together with their associated delivery costs
User research
The user research methodology employed incorporated primary research with a qualitative approach. I focused on conducting face-to-face interviews, either in-person or via video conferencing platforms such as Zoom or Teams.
My research sample comprises:
-
Two females, two males and one non-binary individual ranging from 18 - 60 years of age
-
of which two users are from a historically marginalised group
Let's go and define what we're dealing with...
Insights
From my interviews and research, I identified some high-level common themes among our participants. They can be structured as follows:
Our pain points
-
Home delivery - Companies either offered only in-store pickups or home delivery at excessive cost where the value can be greater than the purchase cost of the item.
-
Delivery fees - Many companies do not display delivery fees until you complete the entire checkout process up until the payment stage and have to log in or create an account.
-
Delivery options - Many small, local companies do not offer home delivery as an option, and when they do, at prohibitive costs
-
Payment methods - Various small businesses only accept local bank cards and not one by a foreign-issued bank e.g. an expat from Spain now living in France. Smaller companies often do not accept online payment systems like PayPal or Stripe.
Let's meet our target user
The user persona holds significant importance as it helps to visualize our primary user group, making it simpler to relate to and empathize with the challenges they encounter daily.​ From my research findings, Mateo was born.
From the pain points, goals and frustrations that were uncovered during the research phase, I was able to plot out Mateo's user journey in achieving his end goal. The insights gathered while mapping Mateo's user journey revealed how creating a site/app where users can see the delivery cost upfront before spending unnecessary time browsing for it can address the user's frustrations.
It looks like we uncovered a problem
Through my journey map analysis, I identified the challenge that Mateo encounters while trying to complete the actions outlined in his user journey.
​
The problem statement - Mateo is a small business owner who needs somewhere he can get multiple camping items in one place and know what it’ll cost to deliver because he doesn’t have time and can’t afford excessive delivery fees.
How might we...
​
-
create a platform that offers a diverse range of camping items and equipment in one convenient location for Mateo?
-
develop a transparent pricing system that accurately calculates delivery costs for Mateo's selected camping items?
-
streamline the delivery process to ensure timely and affordable shipping options for Mateo, considering his busy schedule and budget constraints?
Now, let's play around with some ideas...
We'll start with possible solutions
I employed the MoSCoW method to categorize the feature ideas according to their priority, ranging from crucial to less critical, guided by my data analysis and the user challenges I identified.
What does our user flow look like?
I employed a user flow chart to categorise and demonstrate how Mateo might use the app. Once I was able to determine the flow of the happy path, I should be able to get some drawings together.
Let's get some drawings together
Saving the user as much time as possible was front and centre when designing the experience. The user should be able to see at a high level where everything is without excessive navigation. I did not want the app to have the look and feel of the big national chain stores, to drive home that this is a small, locally owned family business.
​
This approach also lends itself to being tested against later on during the usability study to determine whether its simplicity enhances the user experience.
It's time for our users to get testing
I took my low-fidelity wireframes up a notch to get them ready for my usability study. I undertook an unmoderated usability study within the following framework.
Location: France, remote (each participant will complete the study from home)
Length: Each session will last approximately 5 - 10 minutes with a list of tasks and a short questionnaire.
Demographic: Two females, two males and one non-binary individual ranging from 18 - 60 years of age of which at least one is a non-native English speaker
Requirements: Participants should be active in outdoor activities such as camping, hiking, canoeing etc. at least once every three months.
Summary of my findings
Participants were able to complete the task prompt list with minor hindrances. There were minimal challenges or obstacles noted by participants in completing the core user flow of the app. Some participants suggested minor cosmetic or placement changes. The challenges that stood out:
-
Language: Users wanted different language options in the app
-
Product reviews: Participants wanted product reviews visible in every instance where a product is shown and not just on the main product pages
-
Profile options: Users wanted a profile page with an overview of all their details and account information
-
Quantities: Users were not able to select different quantities of the same item to add to cart
-
Payment: Users could not find the option to pay with PayPal or another online payment provider
Let's improve our user's experience
​​
Product reviews: reviews of products added to the homepage and product listings page
​​
Language: Option to select language added to the hamburger menu
​​
Profile: I have added an account section to the
bottom navigation menu
​​
Quantity: Users would now be able to select and add multiple quantities of the same item
​​
Payment: The option to select bank card type and online payment systems is now available to users
Getting our low-fidelity prototype ready
After my initial round of usability testing, I was able to incorporate the fixes for the challenges that our users experienced during the study. I was left with the final low-fidelity prototype which can be viewed below. (*Of course, the design thinking process is constantly iterative, so who's to say this will be the final?)
Our user flow
Navigating from the homepage
User browses product categories
The user selects product category
Views the range of products
Choose and view a specific product and checkout
Log in to account
Preview order and continue checkout process
Enter payment details and confirm order
Receive order confirmation
We'll go back to our users for a second round of testing
Once the design changes had been implemented, there were no hindrances in users completing the main user flow. Users noted they found the interface intuitive and uncomplicated to use. It was noted that the app was user-friendly and information was easy to find.
They did however raise some issues, but as those instances did not form part of the user flow I was testing, I did not originally incorporate them into the prototype. I therefore decided to include and showcase them in the high-fidelity prototype, even if it doesn't form part of the main user flow. They are as follows:
-
Search feature: Users wanted to experience the search functionality and what it looks like
-
Language options: Participants wanted to see what options were available to them
-
Profile page: This feature was incorporated after the first usability study, but users wanted to view or interact with it
It's time to go high-fidelity
After the conclusion of the second round of usability study and the incorporation of the design changes, I felt I had enough to start with a high-fidelity prototype for our friends over at Outdoor Xpress. But before I get to it, let's build out our design system first.
Let's see our final product
I went with a neutral white background for simplicity as my primary colour. Since e-commerce retail apps are generally image-heavy, using a coloured background would've been too busy. In keeping with the 60-30-10 rule, I used a soft grey as my secondary colour, and pastel green as a complimentary colour.
With accessibility in mind, I decided on a sans-serif type which would improve the readability of the text, especially on a mobile device. Have a look below to experience the high-fidelity prototype.
Our user flow
Navigating from the homepage
User browses product categories
The user selects product category
Views the range of products
Choose and view a specific product and checkout
Log in to account
Preview order and continue checkout process
Enter payment details and confirm order
Receive order confirmation
Some accessibility considerations I made
-
Icons were paired with labels to advance accessibility further aiding screen reader technologies using alt text to read icons.
-
I am utilizing the brand colour to contrast against negative space and a neutral palette for the background.
-
Forward and backwards motions were included to help guide users in the flow of the main user journey.
Some key takeaways from the completion of this project
-
Impact: The target demographic indicated that the app's flow was intuitive and easy to follow.
-
What I learned: Even the smallest design change can result in a much-improved user experience. My takeaway from this project is understanding how these changes impact the user experience and always focus on addressing user pain points when crafting a design solution.
What are the next steps?
​
-
Initiate and conduct another round of usability studies on the functionality of the new site
-
Identify any new features or functionality that could be included in future releases
Thank you for joining me on this journey!
© 2024 by Marcel Arrison