
Next: Case Study
Case Study:
Choose an eCommerce clothing platform - identify 5 problem areas within the website journey experience across mobile and desktop screen sizes. As a UX/UI designer it is my job to use design thinking to solve these problems and demonstrate my ability into responsive design.
My Role: UX/UI Designer
Help Next create user-friendly interfaces that enable users to access their products and services to suit their needs and demands. Work on the problem statement and create different solutions to each problem.
Hypothesis
To increase the number of customers using Next app and website by being more active with them, increasing usability experience on website and App (As confirmed by user research, reviews found online and survey).
Outcome of Case Study:
-
A functional eCommerce platform that complies with UX methodologies such a Aesthetic-Usability Effect and Jacob's Law
-
Fixing customer service - not able to reach chat section easily (e.g)
-
Creating a simpler website layout
-
Better overall navigation
To view the full Case Study please click here
eCommerce

eCommerce - Electronic Commerce
The term electronic commerce (eCommerce) refers to a business model that allows companies and individuals to buy and sell goods and services over the Internet. Ecommerce operates in four major market segments and can be conducted over computers, tablets, smartphones, and other smart devices. Nearly every imaginable product and service is available through ecommerce transactions, including books, music, plane tickets, and financial services such as stock investing and online banking. As such, it is considered a very disruptive technology.
How has it changed?
The years between 2010 and 2020 were marked by remarkable change, not the least of which was astonishing eCommerce growth. In that span of time, the industry has developed from early stages into an essential part of worldwide retail. ECommerce connects people across borders and opens the world up to sellers. eCommerce growth isn’t over - in fact, due to the pandemic, it has entered an accelerated phase. There was not much option to shop other than through eCommerce. This created new shopping habits for people and the new norm of shopping.
Every year, new technologies made online shopping more accessible and more widely accepted.
-
Over the course of this decade of eCommerce growth, Amazon made two-day shipping the industry standard.
-
Now, Amazon is pushing the speed of eCommerce shipping even faster, with one-day and even same-day delivery.
-
The eCommerce share of retail sales grew, including a significant leap in 2020.
-
ECommerce became vital during the COVID-19 pandemic that started in 2020.
-
COVID showed the fragility of global supply chains and where eCommerce fulfilment needed to change.
Office for National Statistics

Chosen company - Next
Why did I choose Next?
Next plc is a British multinational clothing, footwear and home products retailer, which has its headquarters in Enderby, England. It has around 700 stores, of which circa 500 are in the United Kingdom, and circa 200 across Europe, Asia and the Middle East.
Next is a very well known worldwide company but is failing when it comes to delivering a good eCommerce experience. The reviews are not great online and show they are in deep need of improvements on their UI and User experience.
Customer reviews, problem areas
-
Difficult access to Account page
“Had a credit account, never missed a payment, always cleared quickly and then suddenly 'temporarily' restricted for no apparent reason (it's been a few months now and still in place). I'd paid for a years worth of unlimited delivery on the basis that the service would continue to be frictionless, won't be doing that again. Good job I'd cleared my entire balance ahead of this mystery restriction.
On top of that, the website now seems to be falling apart at the seams, errors when trying to access the account area, search not returning results despite accurate keywords, poor interface, especially on mobile. Weeks long delays on 'in stock' items I'd shut down my account if I didn't have to call them.
I'd rate them as 0 out of 5 if it were possible.”
-
Writing is blurry and not optimised on Accounts page:
"The writing and actual UI on the page doesn’t look well presented or optimised. This can put off a lot of users from the website as it isn’t astichaelly pleasing to the eye, as a lot of users want this when shopping online. This reduces accessibility and won’t be fit for use for all types of users.
-
Poor UI designing on Mobile App



Research
Business Research
Competitor Analysis
A competitive analysis is a strategy that involves researching major competitors to gain insight into their products, sales, and marketing tactics. Implementing stronger business strategies, warding off competitors, and capturing market share are just a few benefits of conducting a competitive market analysis.
A competitive analysis can help you learn the ins and outs of how your competition works, and identify potential opportunities where you can out-perform them. It also enables you to stay atop of industry trends and ensure your product is consistently meeting and exceeding industry standards.
Direct competitors:
-
Marks and Spencer
-
John Lewis

Indirect competitors:
-
TKMaxx
-
Argos

User Research
Survey
I created a survey to showcase some results into user research around online shopping with Next and it’s direct and indirect competitors. These are the results from the Survey:











Red Route Analysis
The goal of a red route analysis is to allow high traffic volumes to flow freely without obstruction. Typically, red routes are marked with red lines on the sides of the road. When applied to design, these red routes are the critical and frequent paths that users take to complete their tasks. On the above red route analysis diagrams, you can see highlighted the main features used on the Next website and App as stated by users. These will be the features mainly discussed in this case study and focused on. The benefits of using a Red route analysis technique is it helps build and optimise product features that deliver the most value to the target customers and drive the key metrics
Next Website


Next App


Ideation
Crazy 8’s - The purpose of this approach is to drive an effective design sprint, where ideas will be generated quicker since you have the insight to draw upon. The main benefit of this approach is that it does not strictly require designers to run effectively; the whole team gets to be involved.


Wireframes
Low fidelity wireframes

Website
I restructured the layout and UI of the Next website through using a low fidelity wireframe model. This outlines the layout of the final design once completed. After conducting User research from the techniques and methods above, this was the design I felt suited to what the User was asking for. A simple yet effective layout. In the early stages of my case study, I noticed Next’s website did not correlate with the app. The app was much cleaner and sleek to look at and easier to use. However Next have updated the UI on the website, which now matches the app and looks very similar to the wireframe above.
During the design of the Mobile phone App, I wanted to stick within the boundaries of Jakob’s Law. Jakob’s Law is where users spend most of their time on other sites. This means that users prefer the site to work the same way as all the other sites they already know. I noticed most User's prefer to use a similar layout as other mobile app’s, hence I chose to follow Jakob’s Law for the design of the UI.
A few problem areas of the Next app I realised was, parts of the UI looked nice and had the right layout. However with the use of Card sorting, I could wire down some of the clutter of the homepage and put it into a simplified category such as this.

App
Secondly, I restructured the layout and UI of the Next App through using a low fidelity wireframe model. This outlines the layout of the final design once completed. After conducting User research from the techniques and methods above, this was the design I felt suited what the User was asking for. A simple yet effective layout.
High fidelity Wireframes


.png)