A redesign of the JD website and mobile app.
INTRODUCTION
What
To identify five problem areas within the JD website journey experience across mobile and desktop screen size of the JD app/website an eCommerce clothing platform.
Who
For all user demographics who wear sneakers.
Deliverables:
3 pages: home page and two other pages of choice
Mobile and Desktop compatible screens (Responsive).
Timeline
2 weeks
My role
This was an individual project where I was responsible for the end to end design process. This includes research, ideation, lo-fi & hi-fi wireframes & prototyped solutions. As a UX/UI designer, I was able to use my design thinking to solve the identified problems and demonstrate my proposed solutions in a prototype using a responsive design.
Hypothesis
At first glance, there’s a lot of activity on both the JD webiste and app. It can be simplified to aid better user experience and perhaps improve customer purchase
I am going to:
To redesign the JD website and mobile app, I am going to use the design thinking approach to guide me through the process. Empathise - Define - Ideate - Prototype - Test.
By following these steps, I’ll be able to understand the user’s pain-points and a product solution.
Problem Statement
According to a quote from a user, “the website is organised, but too many blocks (squares) for my liking, which makes the page feel slightly cluttered.”
Thus, some customers find the JD online retail journey slightly convoluted, they want a more seamless experience and an enhanced look and feel to encoruage them to select and pay for a product without loosing momentum.
EMPATHISE
Deep dive / context
Before conducting user Interviews or competitor analysis I looked into the present state of the eCommerce industry, how it has changed for the past ten years and the impact of COVID-19 on online retail spaces. In addition to this, I also looked into UX best practices for eCommerce sites to better understand the eCommerce usability guidelines and UX design principles
Findings from my research indicate that some of the biggest changes in e-commerce over the last decade include: the rise of online marketplaces, the shift from desktops to mobile, the tremendous growth of digital marketing and advertising, augmented reality and virtual reality. A report comissioned by open banking platform TrueLayer in 2006, internet sales as a share of total UK retail sales stood at 2.8%, rising to 36.5% at the height of the pandemic. With these innovations and spike in retail spend came improved design thinking to accomodate these changes and answer questions like how to design and build effective retail payment systems, design for gen-z or most importantly, use design to effective create cross-platfrom shpping expreiences.
According to the ONS, due to COVID-19, overall, online sales rose to a record high of 33.9% as a share of all retail spending. In addition to this, card transaction data also suggests that during the second and third lockdowns, English online spending increased more in response to the fall in in-store spending than during the first lockdown due to Black Friday (27 November 2020) and Cyber Monday (30 November 2020) spending.
Survey and Interview
In this step of the process, I decided to gather insights to test my hypotheis by conducting surverys and interviews to better understand the plight of users.
Survey
To gain robust data and better quantitive data, I also decided to use a survey to complement my interviews.
Participants
12 participants in total: 7 males, 5 females
Age range: 18 - 35
A summary of my survey and findings (including: needs, pain points and motivations) can be accessed here
Interview
I interviewed three individuals who participated in my surveys (M:24, F:23, M:27) to show and talk me through me how they’d find their ideal sneaker from the JD homepage and pay for the product. I also asked them to show me on how they’d creatively order and pay for a sneaker without doing it from the homepage.
The interview guide that was prepared for the interview can be accessed here
Research Goal
To identify problem areas within the JD website journey experience across mobile and desktop screen size of the JD app/website
Participants
3 participants in total: 2 males, 1 female
Age range: 23-27 years old
Occupations: Engineer, student, Basketball player
A summary of my interview questions and findings (including: needs, pain points and motivations) can be accessed here
Competitor analysis
To better understand the JD customer journey experience and identify potential areas for redesign and redevelopment, I carried out competitor analysis on two direct competitors; Foot Locker, and Nike SNKRS. I chose competitors with similar offerings, similar app look & feel and target markets.
With payments sysyems being the bedrock of a successful e-commerce platfrom, I foucsed on customer retail journeys for JD and it’s competitors listed above. My focus were on the following pages and processes; homepage, signing in as a previous customer, creating an account as a new customer, selecting a desired sneaker, adding to cart and proceeding to payments. This helped understand the strength and weaknesses of each brand and how my design thinking can help improve the retail journey for customers using the JD app.
Key takeaways from my competitor analysis
Similar user flows
All websites have a similar user flow from the homepage, to selecting a product, and then landing on the payment page.
Brand storytelling
1. All websites have a good knowledge of their target audience and have crafted appealing tone of voice and mood to aid persuasion
2. Appealing and relatable content has been created to retain customers
3. Hero storytelling via the use of famous sports people in the case of Nike.
Aesthetic usability effect
1. Besides the JD website, Nike and Foot Locker websites have good aesthetics that could encourage sales
2. The JD homepage is crowded with blog, instagram and product content which makes it more convoluted and less persuasive for the customer to make purchase.
A tabular visualisation of my competitor analysis of JD, Footlocker and Nike SNKRS
Access the high resolution image here
DEFINE
The next step in the design process is to define the ask. In this phase, I made use of a user persona, an empathy map and project goals to have an idea of what the solution could look like.
With the research conducted so far and the findings from the survey and user interviews, I was able to figure out what will be created, for whom, and how.
Based on the insight provided the participants during the user interviews, I created a persona that reflects various needs and pain points.
Access the high resolution image here
In order to delve further into behaviors, attitudes, and thoughts of the persona, I created an empathy map. This helped me bring the persona to life and examine the problems more carefully from the user’s perspective.
Access the high resolution image here
Once I had my user persona and empathy map ready, I took a step back to get a clear overview of both the business goals and the user goals. In addition to those goals, I wrote down the technical considerations too
Access the high resolution image here
IDEATE
This stage of the design thinking process focuses on taking a creative approach and generating ideas. With the findings that I synthesised from the previous steps and the problem statement that I made earlier.
By drawing out a sitemap, user journey (for adding a product to cart) lo-fi and hi-fi wireframes, I was able to create a number of deliverables that could help me identify and visualise a solution.
Sitemap for the JD website and app
Access the high resolution image here
Expected user journery for adding a product to cart and purchasing the product.
Access the high resolution image here
Sketches
Once the sitemap and user flow for purchasing a product was ready, I made some sketches of JD’s Homepage to get an idea of what it will look like. As instructed by the brief, I decided to focus on developing responsive screens for both desktop version and mobile versions.
Crazy eights Sketch (1), idea two was selected as the preferred idea to develop the wireframe from
Access the high resolution image here
Crazy eights Sketch (2)
Access the high resolution image here
PROPOSED MOBILE & DESKTOP PROTOTYPE
The next step in the process is to make a clickable prototype so that users can test it . Following this step allowed me to gather feedback regarding the product and try to figure out the best possible solution for the problem.
As well as the screens below, a live workable prototype can be accessed here: Mobile, Desktop
UI Kit and style guide developed in alignment with JD's brand guidelines and look & feel
Access the high resolution image here
Look and feel of the current JD website and mobile app
Access the high resolution image here
USABILITY TESTING
Considered the final step in the design thinking process, this step focuses on testing out the prototype. It is also an iterative process that gives me the opportunity the evaluate whether my design solves the problem and redesign any parts of the product if needed. Althought the brief did not specify that I conduct a usabiity test, however, I outline below how I would have conducted a usabiility test on both the mobile app and the website.
Usability Testing
I would have conducted a remote usability testing using a high-fidelity desktop and mobile prototype. I would have tested the flow of design, ease of navigation, and tested to see if my proposed the design solves the user’s pain point of a messy and chaotic homepage
The test would have been conducted with a total of five - ten participants between the ages of 18 and 35. Each of the participants were asked to complete the following tasks:
1. From the homepage, show me how you would find an orange trainer
2. Purchase the orange trainer
FINAL PRODUCT
After going through all the steps of design thinking, I now have a suitable mobile app and website for JD
As above, you can view the of the high-fidelity screens here: Mobile, Desktop
Revisiting the Problem Statement
Some customers find the JD online retail journey slightly convoluted, they want a more seamless experience and an enhanced look and feel to encoruage them to select and pay for a product without loosing momentum.
The problem was solved by:
1. Including numerous images of the product that allows the user to closely examine the quality of the product.
2. Appropriate categorisation and organisation of information by using carousels and the Law of common Region.
More visibility on sales and discount buttons by suing Fitt’s Law.
3. Application of Jacob’s Law to help users retain the familiarity from navigating websites and app similar to that of JD’s
4. Using the 60-30-10 rule of colour synchronicity to create appealing aesthetic usability effect for the user
Next Steps
The next step will be to conduct another usability test to examine if the revisions have solved the issues that were previously brought up by the users.
Learnings
1. By incorporating the design thinking approach, I was able to empathise, define, ideate, prototype, and test. Through this particular process, I was able to understand the ways in which each of the steps could be used to help develop the final product.
2. During this project, I found the user interviews to be quite helpful as they provided insight that I originally did not think of. Doing so taught me the importance of removing bias as I conduct research.
3. In addition, I learned the importance of empathising with the user. Not only does it allow me to better understand the needs and pain points of the user, it also enables me to throughly think through the problem develop provide human-centered solutions.
4. Most importantly, I learned that design is an iterative process that requires much time and effort. Despite the fact that I came up with a product solution, there might be ways in which I can improve user experience with technological advancement over time.
CONCLUSION
I absolutely enjoyed the end-end process. Not only was I able to apply UX thinking, I was also able to showcase my UI capabilities which I think is essential for every product designer to have as they both dovetail each other. As a result, feel more confident in my ability to tackle new projects.