WEBSITE & UI/UX DESIGN
I oversaw mrswordsmith.com's redesigns, UI/UX designs and development implementations between the beginning of 2020 to May 2022.
ROLES
Problem
During 2021, I focused on implementing correct industry practices and optimising the user experiences throughout this ecommerce site. The website lacked common practices which became evident in the visiting data. Mrs Wordsmith aimed to overhaul the platform after a change in management which had a dedication to establishing better processes in order to achieve the company's larger goals.
WIREFRAMES
User Flows
Solution
Firstly, I began the solution journey by pinpointing the flaws in the internal website project and located a need for UX design practices alongside a major backend development cleanup. Consequently, we acquired a new dev team, I self trained in UX design and created an optimised process to acquire more sufficient end goals.
Secondly, I initiated the grand UI/UX redesign of the entire website, while overseeing frontend implementation, acting as co-project manager and project leader for frontend. Within that, I conducted an extensive competitive analysis, designed UX flows and wireframes based on quantitative and qualitative data and applied a UI design style in line with the company style guide and user friendly practices.
Lastly, we acquired an external UX team to conduct user testings and audit design work against their data base of common practices, all of which I reviewed against stakeholder and brand requirements. With all these improvements in place, we continued working throughout the site, area by area with the largest bounce rates or most offending user experiences.
UI Design
Design System
To maintain consistency and ensure efficient design to dev handover, I developed a modular design system based on reusable components and their states, which has been built into a Shopify CMS to relieve dev involvements. Every component can be rearranged and combined with others while maintaining design consistency and recognisable UI patterns for the user.
Brand Ideation
Other than creating the Mrs Wordsmith ecommerce design style guide, I actioned adding a visual design concept to the company's grand style. The concept brings Mrs Wordsmith's illustrated characters into our world to interact and create a closer relationship with the audience. The concept of merging photography and illustration has been actioned across the brand.
Early steps
The initial steps of the redesign to determine a style guide, focused the product pages and collections.
