Problem Statement
To create a framework that allows for beautiful UI to breathe.
Role: User Experience Lead
Team: Creative Director, Art Director, User Experience Designer, Designer
Our Approach
E-commerce sites such as Lafayette 148 are not very complex, so it's really the brand and tone that sets them apart. My role within this project was to create a system that would be discernable and easy to navigate while allowing the photography to shine within innovative UI. In this case study we will explore the personas, site architecture, and process for creating a framework for the home page and enhanced product listing page that’s easy yet beautiful.
Our Personas
To start, we conducted 14 user interviews with 7 existing users and 7 aspirational users. From there we derived personas for the existing customer and the aspiration customer and defined what the site should accomplish for each.
Meet Connie
Connie is a 72-year-old retiree living in Arlington, Virginia, with a decades-long career in Washington D.C. as a securities lawyer and three grown children to her name. Her wardrobe reflects the assuredness she feels: she’s had years to determine what she likes and what works for her. She wears similar styles and makes minor changes to her look depending on her day, whether that’s lunch with her daughters or a philanthropic event
Meet Alex
Alex was recently promoted to Senior Vice President of Strategic Initiatives at NBCUniversal. She spends her commute from Princeton, New Jersey to New York reading news publications and listening to podcasts. Alex’s weekends are just as busy—leading her neighborhood council, directing her town’s art museum and cheering on her sons at soccer games. At just 48 years old, Alex feels proud of her accomplishments.
We found that while these two audiences have their differences, they share the same core values. This helped ground the site architecture, content, and aesthetic
Site Architecture
Based on our personas and the existing site analytics we were able to come up with a clear site map that would address Connie and Alex's needs.
We found that most existing users browsed by 'New' first, then 'Sale', and then 'Outfits'. Based on this data, we decided on four top-level categories: Shop, Lookbook, Our Process, and Concierge. We grouped all shop-able categories under 'Shop' to enable users to quickly and unmistakably purchase products. Within 'Shop' we grouped items by category: 'Fit' (for the plus size users) and 'Our Shops' (for the occasion/need based shopper). A larger margin of the existing users still shopped through catalogs and enjoyed seeing the inspiration for each look and collection. We decided to translate each catalog experience into a shoppable 'Lookbooks'. The newest pieces were 'Our Process' a purely content play that went in depth on the company's relationship with their manufacturers and their excellent quality materials. Finally, 'Concierge' brings Lafayette 148’s personalized service experiences into focus. It is an existing service they offer but is often overlooked by their users. It includes airport pickup, a personal stylist, lunch etc. The final navigation was a strategic decision to push the user to understand what differentiates Lafayette 148.
The Home Page
We started designing the home page with two things in mind. We wanted the user to efficiently browse products without the site feeling bare, and we wanted the site to feel premium and highlight the brand and high quality products. This home page allows L148 to feature their product photography (Images are FPO) while driving the user to their best-selling categories.
Enhanced Product Listing Page
This was the initial design prototype
To feature products, we created an "enhanced" product listing page. This template only exists for product listing pages linked to the home page and collection pages. When the user lands on the page they are able to see products with more description, marketing content, and larger images. As they scroll or filter the products, the page returns to a traditional product grid.
In Conclusion
Our team is still working on creating and updating the Lafayette 148 site. The site is set to launch summer of 2018. Feel free to browse the current site here: https://www.lafayette148ny.com/.