LIVIARA

Fashion lookbook & e-commerce store

challenges

  • No current eCommerce solution
  • Little current customer quantitative data available
  • Design needs to change with cyclical product lines

Goals

  • Low abandonment rate
  • Effective navigation scheme and content organization
  • Clear brand and product line communication

UX Metrics

  • Task completion high in user tests
  • Users utilizing functionality for their intended purposes
  • Full UX benchmark based on Baymard Institute data shown below
THE BRIEF

Liviara was inspired by the American woman, who knows what she wants and how to get it.

— Liviara founders

Liviara is a boutique, brick and mortar retailer, serving St. Louis, and mail/phone orders. The founders came to MXM to create a product line lookbook and create their e-commerce store.

MY ROLE
THE TEAM
User research, requirements gathering, visual design, wireframes, functional prototypes, high-fidelity mockups, ui design, branding guidelines, usability research & testing, wrote functional annotations for development
  • UX / UI designer
  • Project manager
  • Creative director
  • Graphic designer
APPROACH

Who is Liviara and how can we help?

Liviara was a existing company with a working business model, so we needed to understand it to see how the website can be an efficient channel to increase their existing revenue and be an additional revenue stream.

While the products themselves were not going to change, we do have control over the presentation of the products that can add to the offline business and create a great online experience.


My approach is to create a highly efficient eCommerce store, utilizing industry researched best usability practices, create customer profiles, identify pains, gain to create features and functionality that alleviate pains, and create value gains to the customers.

EXECUTION

The client gave us an inventory list, which I categorized and confirmed and built a basic e-commerce store sitemap. From the type of products, the number of attributes, how they're categorized, and the number of products, I understood a number of things:

Because e-commerce stores (and specifically this kind of e-commerce store) have been extensively researched, I utilized quantitative and qualitative data to support my design decisions which would be a great starting point.

  • To use a horizontal sorting navigation, and filtering toolbar.
  • How the filtering tools will function and how to display it to the user.
  • How products details pages will be shown, and how to present the related items.
  • And a number of other things...

Mental models— How do customers shop for lingerie?

I facilitated a customer profile canvas exercise with the team to create many customer segments so we could get everyone thinking about all the customer jobs (what the customer wants to get done).

We then focused on their existing customers data to help inform our initial customer personas. I created segments by the customer jobs, which would cross demographics. This helped avoid basing our personas on stereotype narratives.

We ended up with many different hypothetical segments which we could validate against the individual in-depth interviews.

We identified two distinct mental models when a customer shopped for lingerie. One wanted to examine items in a set together. The other wanted to see an item individually and choose a set.

"I don't know what it is, but I'm just one of these girls that can't wear underwear that doesn't match. So I need to see it as a set together first."
"Once I find the right top I can find something that matches, or looks like it matches and totally get away with it."
"I' have a image and scenario in my head, I'll know it when I see it."

Product categorization and organization

Our biggest opportunities to serve user needs:

  • Optimize the findability of individual items and then show related items.
  • Show the product in both a catalog, and a lookbook context.
  • Show the clothing on models that weren't limited to fashion model body types.

This last item was a big concern because in our talks, a high percentage mentioned this and client had conducted the photoshoot prior to the start of our project, which included all the catalog photos. This required re-shoots and casting a model that could represent more body types. Fortunately we caught this early on and could give the photographer enough notice to re-shoot all the catalog shots.

I facilitated a persona canvas exercise with the team to create customer segments which were then combined into 3 key personas. This was determined by where the majority of the customer jobs, pains and gains overlapped. We ended up with 2 female personas, and one gender neutral (to represent a possible partner purchaser).

The lookbook was to tell a story, each different to the 3 product lines.

Along with the creative director, and a graphic designer we all pitched individual designs to the client for review. Each taking a different approach to telling the Liviara story.

Wireframes were created to give early direction for design. Such as for product detail layouts, responsive guidelines, synchronizing mobile with desktop designs.

We gave the client estimates on the possible revenue implications. This was difficult to calculate because we didn't have historical data as the site was new, and prices had not been determined for the new product line. This was the general formula with an example of 100 customers:

With seasonal product lines, this a lot more complicated. But it helped give them an idea of the benefits of the research.

  • If an average item cost W, and there is a X% purchase conversion rate, each percentage point is $Y in sales. So, W * Y = $Z. A% of every 100 paying customer make 1 additional purchase. A * W = $B.
CONCLUSION

The project had 3 phases, after our initial product preview site, the 2nd was geared toward wholesalers who needed an access code. Third phase was the fall launch. I would have loved to add additional site features and functionality to create a better product-market fit.

Another big relief was that development went incredibly smoothly. The team was offshore, and there were only a few small questions on functionality. I feel it was because of the detailed functional specifications that were provided.

  • A companion app where users could take a photo of themselves that aligned with clothing so customers could test out looks at home, as the research showed was a concern.
  • Because of the nature of intimate wear, there are no refunds after you've worn it. So perhaps some sample swatches included so you know what the fabric is like before you open the item's bag.

Lessons learned

This was my first e-commerce apparel & accessories store I helped build from scratch. I never considered how each kind of store differed. Mass merchant, Apparel & Accessories, Office & Electronics each need different navigation, filter, and sorting schemes. Not to mention niche stores like intimate wear.

The initial launch was well received, We handed off the site to the client and I injured my foot and worked from home and was put on another project. I did check out the site live a year later, and it looked good to me. I didn't keep up on it as I had left MXM by that time.