Lyst Fashion UI
Freelance UI digital interface designer for Lyst - the largest global fashion search platform. After an initial meeting in the Lyst offices, I was briefed to work in Sketch to create interactive mid and high fidelity wireframes to hand over to the in-house developers for a set of responsive pages within the Lyst site.
Full case study: laurengracedesign.com/lyst
Deliverables
Mid-Fidelity Wireframes
High-Fidelity Wireframes
Sketch Files
Handover to Developers
Mid-Fidelity WIREFRAMES
The Lyst Index is a quarterly ranking of fashion’s hottest brands and products. To compile the results, global fashion search platform Lyst analyses the online shopping behaviour of more than 5 million shoppers a month searching, browsing and buying fashion across 12,000 designers and stores online. The formula behind the Index takes into account global Lyst and Google search data, conversion rates and sales, as well as brand and product social media mentions and engagement statistics worldwide over a 3 month period.
↓
High-Fidelity WIREFRAMES
With the mid-fidelity wireframes and prototypes approved by the Lyst team and usability testing I carried out I then moved on to fidelity wireframes to ensure a clear translate to the developers and understanding how the colour palette, imagery and typography will compliment each other on the page.
↓
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.
Typography & Colour
Already established with Lyst were the brand guidelines. It was therefore my role to ensure these were followed when implementing the design.
Visibility of System Status
Ensuring the status is clearly visible and the user is informed of where they are within the application flow.
↓
User Control & Freedom
Ensuring that exits are clearly marked with the logo always existing on the page and the lefthand menu implemented to be static for all key information/navigation to be available at all times.
↓
Consistency & Standards
Across all devices that I was briefed to design on, it is vital that in this increasingly device-agnostic world we live in, a consistent user interface throughout all devices is designed and implemented.
↓
Recognition Over Recall
To ensure my designs do not waste users valuable mental real estate my designs clearly display all instructions when relevant to help guide the user. For example using the word scroll along with the icon.
↓
Aesthetic & Minimalist Design
Known for my minimalistic design, the wireframes are informative to the user and use visual cues rather than lengthy instructions.
↓
CONCLUSION
I was tasked with this project to assist the Lyst design, marketing and developer teams at a crucial stage of business development. They found that the quarterly reports of which I was briefed to design a responsive user focused template for was a key business tool for their rapidly growing business - attracting industry, press and customers looking for an interactive educational tool.
The team now have a user focused, on brand responsive template for all quarterly reports moving forward, allowing them to focus on purely producing the quality content.
Full case study: laurengracedesign.com/lyst