UX UI freelance designer for menswear sustainable e-commerce fashion brand, Thought Fashion.
My role was to refresh their visual brand identity online across all responsive devices by analysing the usability of the current site and from this, implementing a user-focused design system with a focus on typography and colour to ensure the brand continues to develop to meet the needs of their customer.
Deliverables
UI Design System
Medium & High Fidelity Wireframes
Typographic Definition
Colour Pantone Definition
Sketch File for Developers
THE Discovery & Define PROCESS
So your brand grows quicker, bigger and more so than you hoped to imagine. The stuff dreams are made of right? Well yes, absolutely, but this comes with some serious growth pains too across all areas and departments of the business from hiring the right candidates for jobs you didn’t know would exists, to your brand evolving in various directions over multiple touch points, creating a some what messy, un-cohesive personality portrayed to your customers and staff.
Stakeholder Meetings > Business Goals > Site Content Analysis > Competitor SWOT Analysis
↓
Stakeholder Meetings
Meetings with the CEO, Head of Design, Head of E-Commerce and Head of Marketing to define the scope of the project and required deliverables.
With the brand having changed hands multiple times during its years of growth I was appointed to consolidate the brand touch points and refine visually across all responsive devices to create a more user-focused approach.
To begin with and throughout the process I met with stakeholders to ensure requirements were being met and present findings and design developments.
A design system unites product teams around a centralised visual language, by utilising a collection of repeatable components and a set of standards.
It reduces design faff by accelerating the design & innovation process across all departments.
Research & Analysis
As this was not a UX based role, Thought Fashion wanted to use my prior knowledge in UX and implement this into the design focusing on usability and readability. I therefore picked their brains substantially when it came to defining business goals, how the site currently performs, pain points the staff and customers currently experience, user personas, demographics, future developments and where in the market they sit against their competitors.
Alongside this, I performed research myself to support and further advance my knowledge of the customer and market such as a short competitor analysis and a brief heuristic evaluation with a focus on the category of “Page Layout & Visual Design”.
THE Design PROCESS
Mid-Fidelity Wireframes for mobile & desktop > Stakeholder Feedback > Usability Testing > High-Fidelity Wireframes > Handover to developers
Starting with paper sketches and working the strengths of these into Sketch (programme) to create mid-fidelity prototypes for the teams analysis and usability testing.
↓
Interactions
Defining typography and interactions across mobile, desktop and tablet in a concise, organised and easy-to-use manner. Previously to this design, the site architecture was not dynamic or strategised especially across mobile (a key growth areas for Thought Fashion). The image above, shows how this was unified to create a clearly defined optimised user journey.
Typography
Typography was an integral part of the Thought Fashion brand. The brand combined a script font with a capitalised bold font which were used for headers and sub-titles. The legibility of the script font, especially when placed over imagery caused usability issues and proved to be “style over substance” when performing usability testing. As the script font was a key part of the brands handwriting, I strategically placed it within the sites as a design input rather than to provide key information to the user. This was shown in mid and high fidelity wireframes and signed off by the CEO and Art Director.
Wireframes
Provided for the Thought Fashion were mid-fidelity wireframes including the typography alongside high-fidelity wireframes so the team and I could truly understand how the wireframes work when placed over their image library to confirm that the ‘look & feel’ of the brand is still optimised and the legibility and readability for the user is clear and user-friendly.
For brands without such a image focus such as tech start ups which focus more on the use of bold colour and illustration, high-fidelity wireframes are not so heavily required. However, in this case with imagery being a high focus of the brand, it was pivotal that we could assess this whilst developing the new design system.
Fonts & Icons
Responsive web & print fonts and icons. Unified across all assets & brand touch points
Developer Notes
I work across a number of programmes, suitable to each clients requirements. Generally, nowadays I work on Sketch for file creation as it’s the industry standard and create prototypes in Invision. In this case, the developers required a Sketch file and within this were notes for the developers to identify static components amongst various other usability functions to note.
Colour
Aligning the colour palette, both online and offline was a key part of this project to ensure consistency through every touch point. The colour palette was refined to a selection of 5 complimentary colours, utilising that of existing print material that would be far too costly to change and implementing new tones that visually appealed to the palette. Thought Fashion wished for a subtle palette that tied in with their brand values, aesthetic and acted as a complimentary driver to their visually strong image library.