The Best&Less website was launched in 2014. I am responsible for improving the site user engagement by implementing UX and UI best practises, which includes wireframing, prototyping, storyboards & user testing. My responsibilities extend to Front-end development including HTML, CSS & Javascript for all new features/improvements and all site content. My role also includes designing all digital assets and content in conjunction with marketing to ensure brand consistency. This website is currently work in progress and many more improvements are to come.
The Problem
- The general appearance of the site was unappealing and difficult to navigate
- The user interface lacked
- Typography was too large and strong, hindering legibility
- Dark colours in certain elements was distracting and took away from primary actions
- The E-commerce conversion rates can be improved
- Clashing elements on the homepage make it difficult to make shopping decisions
- Content pages on the mobile experience direct users to the desktop version.
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.
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.
Different devices and browser sizes is some of the data collected from Google Analytics. The data shows that 50% of our users are using their mobile device to browse and shop, therefore the design changes were to bring the desktop functionality to mobile.
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.
Solution
Overall the new design has toned down the heavy dark colours and used soft tones to put focus on primary actions. The typography was changed to Open Sans at a smaller font size, which worked better in legibility and also granted extra room for breathing space. The header was revised because the bag/cart button was difficult to find, therefore the bag icon is now on the top right with a clearer item counter. The login/account button was moved to the menu, we also added a logout button because users weren’t able to log out. The quick links such as store finder and catalogue were added to the footer as we found them to be some of the user goals, hence making them easy to find.
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.
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.
A responsive website is planned on the roadmap and is currently work in progress. The responsive redesign will include many fixes to usability issues and experiences, while this project is underway; we are making small design changes in the meantime.
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.
