The brief
Produce an eCommerce clothing platform redesign and identify problem areas within the website journey experience across mobile and desktop screen sizes. As a UX/UI designer use your design thinking to solve these problems and demonstrate your ability in responsive design.
For this John Lewis & Partners project I was a UX/UI designer responsible for the redesign. All research, ideation, wireframing & UI phases were user centred whilst focusing on complying with UX laws and considering Web Content Accessibility Guidelines (WCAG).
Discovery
Competitive analysis:
I carried out a competitive analysis with John Lewis & Partners direct competitors; Very & House of Fraser. With both the desktop and app I explored 3 key pages, the landing pages, the blog and wishlist. I familiarised myself with the features to understand the users journey.
Summary: All direct competitors offer the same features. The features in question, Blog, Wish list and landing pages were not clear and the blog wasn’t visible or promoted as a feature.
Crazy 8's:
To me this was all about quick ideas and putting pencil to iPad and seeing what I could come up with in a short period of time. I did this for both my desktop and mobile with three pages in mind. The landing page, the wishlist and the edit.
Taking the time to explore the ideation techniques allowed me to emphasise with the user whilst also forming a baseline for my wireframes.
Card sorting:
Users supported me and they completed a solo activity where I asked them to place cards into 3 categories. The purpose was to aid me into their thinking process and where they naturally expected things to go. From this I could then review the information architecture to ensure it suited them.
User interviews:
My questions were based around the findings from my red route analysis and trying to understand user pain points without directing them but giving them the opportunity to share whatever they thought was relevant.
Quotes from users:
Validation testing
Following the high fidelity wireframes I asked for feedback from my users and shared both prototypes to validate the designs. The users had the opportunity to interact with the product to understand the concept. I’ve included a snapshot of their responses below.
User feedback
From this, I took their feedback on board and implemented it within the design. The main pages I changed were the desktop and app for Wishlist. I also refined the other designs to make it cohesive.
Updated High Fidelity Wireframes
Landing pages:
Desktop:
Mobile:
Design fundamentals
A breakdown of all the UX laws followed in my re design
Jakob’s Law
With my redesign I kept this law in mind as users transfer expectations. I reviewed competitors (Very & HOF) & kept it familiar to ensure smooth user experience.
Miller’s Law
This law explores the span of immediate memory for users, as a result I grouped content in a manageable format (brand, description & price) to help users memorise, process and understand information easily.
Aesthetic-Usability Effect
Users often perceive aestheticist-ness as more usable. I’ve considered this and through the design high quality imagery has been used as well as, creating balance and alignment, this reinforces the brands identity to users.
The Law of Proximity
The principle holds that if you are handling a group of data, all the data that we understand that correspond to the same group should be together. This is made clear by the boundaries within the design.
Hick’s Law
Too much stimuli affects users journey with this in mind simplicity was important. Avoid overwhelming users by highlighting recommended options. I embodied this within the re design.
Web Content Accessibility Guidelines (WCAG)
Within my design process accessibility was my top priority to ensure all users felt included. I used a Figma contrast plug in to ensure users with visual impairments could engage as shown below.
Navigation Bar:
The bar is clear and has text underneath to support users.
Images & Texts:
All images and text are separated which supports screen readers to read text for visually impaired users.
Final thoughts
With this being my first design project, it was really special to focus on all the different UX/UI elements. Keeping users at the forefront of my design was my favourite part of the redesign.
The last thing to say is, I’ve learnt a lot through this process and feel I’ve made the website and app enjoyable for users.