about
This project centred on the comprehensive redesign of the Elements e-commerce website, with a primary focus on improving user flow and enhancing the overall user experience. The aim was to create a more intuitive, efficient, and engaging journey for customers, from browsing products to completing a purchase.
Client
University Project
Role
UX / UI Designer and Researcher
duration
3 weeks
The first step involved mapping out the website. This process quickly revealed several critical issues that would not only complicate the user journey, but in some cases make it entirely unviable
Key Identified Issues
No filter function
Not working search function
Inconsistent icon styles
Inconsistent product images
Each product's variation, such as size and colour, were listed as separate listings
Key information such as return policy was hiden
Overlapping texts and images
Elements website mapped out
Notes from the site map
The evaluation shows that while the website has a clear layout and modern look, it lacks key features expected in today’s e-commerce platforms. Positives include organized product displays and accessible information. However, issues like missing item filters, low-quality images, small clickable icons, and a login option without registration hurt usability and user experience.
To confirm existing issues, user testing was conducted. While users were generally able to complete tasks with relative efficiency, a recurring theme across all sessions was frustration — not due to technical faults, but rather usability challenges, which frequently led participants to abandon tasks.
Key Takeaways
All users experienced frustration during user testing
Some users said they wouldn't shop in current state of the website, as navigating through it was ''too much hassle''
Most users noted that the website feels unfinished
Some users noted that product listing image sizes could be larger
Interestingly, most users did not remark on the low image quality, likely because their attention was directed more towards completing tasks rather than evaluating visual elements.
User testing questions and results
User flow diagrams highlighting red route
Although the current Elements website had lots of issues regarding usability, their user flow was set-up in a common e-commerce way, which was simple and working thus no drastic change was needed.
Changes made to user flow
Users would be able to browse product variations both before and after selecting a listing
Users would be able to use 'search' and 'filter' functions
Key changes
Enhancing the User Journey - the primary user flow selected for improvement was the process of purchasing an item. By streamlining this journey, the goal was to reduce friction points and enable users to move more intuitively and efficiently from product discovery to checkout.
Key changes
Introducing Essential Features - A key issue identified was the lack of a filtering system. Adding filters for size, color, and category would streamline browsing. Introducing personalized recommendations—like outfits based on what models wear—would also enhance engagement and help users quickly recreate looks without extra effort.
Key changes
Improving the User Interface (UI) - the visual and interactive elements of the website required refinement to enhance clarity, usability, and aesthetic appeal. This included the use of higher-quality images, consistent typography, clearer navigation structures, and appropriately sized interactive elements to improve accessibility. A more polished and cohesive UI would not only elevate the site’s visual identity but also contribute to a smoother and more satisfying user experience overall.
Changes made to home page
Contact Us was moved to the header to improve visibility and ensure quicker access for users
The 'Features' section was moved to the footer, which freed up space to consolidate all header elements into a single line. This also allowed for the expansion of the search functionality from a small icon to a full search bar, improving visibility and usability
The Instagram feed, which previously occupied a substantial portion of the homepage, was relocated to the contact section in the footer. This made room for a dedicated area to highlight and promote new clothing drops
The clothing categories section was moved from the middle of the homepage to the bottom, allowing users who scroll down to easily select their desired category without needing to navigate back to the top
The mailing list sign-up layout was refined and relocated to the footer, ensuring it remained accessible across all pages while also freeing up space on the homepage
Visual consistency of product images
Changes made to user flow
The addition of a filtering system, which responded directly to one of the key frustrations revealed through user testing, significantly enhancing the browsing experience
Visual consistency of product images
Changes made to user flow
Essential information was included within the dropdown menus on the left-hand side of the interface, minimising the visual load on users.
One of the dedicated menu items includes the returns policy, which was previously buried within the terms and conditions, requiring users to locate it manually
Product recommendations would display items worn by the model in the selected product listing, potentially increasing conversions and reducing the effort required by users to locate complementary items
Changes made to checkout page
Simplification of the user checkout journey
Fixing the basket icon functionality, an issue where the number of items added displayed in the basket would be extremely hard to see due to its size being small
50%
increased item search rate from conducted user testings