The Best&Less website was launched in 2014. I was responsible for improving the site user engagement by implementing UX and UI best practises, which includes wireframing, prototyping, storyboards & user testing. My responsibilities extended with Front-end development including HTML, CSS & Javascript for all new features/improvements and all site content including mobile. My role also included designing all digital assets and content in conjunction with the marketing team ensuring brand consistency.
The Problem
- The homepage assets changed often which required regular image changes to copy and key messages, this took extra time and effort.
- The user interface was inconsistent throughout different pages resulting in disjointed experiences
- No visual hierarchy
- Typography was too large and strong, hindering legibility
- Dark colours in certain elements was distracting and took away from primary actions
- Improve E-commerce conversion rates
- Clashing elements on the homepage make it difficult to make shopping decisions
- The checkout funnel can be improved to reduce bounce rates.
My Responsibilities
User Interface, User Experience, Ideation, mockups/wireframes, front-end development, User research & testing
Process
Testing/Research
Testing/Research
By implementing A/B user testing we were able to observe engagement and conversion rate by presenting users with design variations of the same page. A/B testing allowed us to gain insights into user behaviour as they interact with the website. User testing has served as valuable data in our design initiatives, we can test design suggestions to validate improvement in E-commerce conversion rates.
Click testing was also used to map out user clicks on specific elements, with results presented in a hotspot overlay. With this information we found that many where just visiting and looking for the store finder and the catalogue while others were intending to shop. This reinforced the necessity to have quick links in the sub-navigation header to help ease the journey for users looking for the store finder and catalogue.
We created online user personas with the marketing team by mapping out technology, location, age group, number of children, favourite brands and preferred channels. To our surprise the personas we have created had differences between in-store and online prospects. We discovered that the online prospects had a different age group, technology and family dynamics and favourite brands.
Mockups / Prototypes
Each new design initiative was executed as mockups before it goes into production; this collaborative process saves time, resources and avoids design issues. By taking into account the results from user testing & personas, we could ensure the design decisions we made will improve conversion rates and engagement.
The high fidelity prototypes were created using Marvel to present designs to stakeholders, which also gave us an opportunity to observe their expectations and feedback as they interact with the designs. It was another way we could gain further insights and make design amends with qualitative feedback from stakeholders.
Responsibilities also include conversion optimisation across different user goals on the website. This includes careful planning, testing and utilising E-commerce best practices to ensure user motivations are a positive experience
Solution
Many elements on the homepage was redesigned and re-arranged to emphasise hierarchy and ease visual clashing by increasing the spaces between tiles and introducing softer colours. The tiles were refined with ability to place text on the assets without the need to replace the images; this has saved time dramatically and has allowed for reactive changes. The tiles were inspired from the ‘cards’ in Google’s material design principles, so that each card contains contextual information and helps separate content despite the number of elements.
Based on A/B test results and user personas, many UI elements were redesigned with subtle colours to add emphasis on primary call-to-actions.
The Bag and Checkout pages were revised by inverting the colours of the form fields so they no longer appear disabled and greyed out. There were also other various small changes made to reduce distraction in the checkout flow, which will encourage users to complete their journey. Overall the site headings and subheadings changed because some didn’t add any value to the page and others improved user engagement.
Reflection
I enjoyed the effort and time put into this project, it felt almost as though the entire site itself was my work. Despite the limitations to make bigger changes that we see need improvement we are continuously making small changes along the road map. Working on this project has proven my ability to work autonomously and expand my knowledge in front-end development. By utilising user testing and user personas, I was able to gather more information and insights into our website users and focus on improving their experiences.
Since this project is on going work in progress, despite the lack of back-end development resources I do whatever I can to improve front-end experiences.
