PORTLAND LEATHER GOODS - PRODUCT DESIGNER 2020

As the first product designer at PLG, I owned the creative process and partnered with key stakeholders to execute core visions.

While at PLG I created the first iteration of the design system to be used on mobile and desktop to help define guidelines for engineers and focused on creating a more accessible color palette.

 

No previous user research had been conducted at PLG as they previously came from Etsy; the stakeholders wished to focus on more quantitative rather than qualitative research so I utilized the tools at hand like heatmapping, analytics, and AB testing.

 

Some key functions of my role included improving the user flow, designing new screens for mobile first, conducting research (user and competitive analysis), and ideating ways to merge business needs and goals with those of users.

THE HIGHLIGHTS

  • Redesigned homepage and collections page which saw increased conversion of 2%, increased AOV $1.62 and newsletter sign up by 1.3%

  • Bounce rate lowered

  • Defined the Information Architecture

  • Designed and implemented advanced design system

  • Heuristic evaluation to identify core issues

  • Conducted qualitative and quantitative research to identify problems, learn more about people and validate solutions 

  • Copywriting/UX writing improved throughout site

HIGH LEVEL TIMELINE

2 months to design and implement new collections page

MAKE OF THE TEAM

I worked closely with the CEO/VP of Marketing and creative team which included the creative director, graphic designer, photographer and social media marketing

KEY GOAL

Make finding products easier, increase conversion rate, improve storytelling & brand awareness

THE PROCESS

Empathy

Define/Ideate

Iterate

Qualitative research 

Define research methods

Competitive Analysis

Problem

Customer flow

IA/Site Map

Design system

Sketching 

Hi-Fi mocks

Customer flow

Prototype

Hi-Fi Prototype

Qual research-live prototyping 

Test

A|B testing

Usability

Interviews

Heatmaps

Implement

Collaborate with engineering to launch

Monitoring and reiterating as needed

THE

CHALLENGE

How might we create a shopping experience that is engaging, on brand, intuitive, accessible and low-friction?

 

THE 

SOLUTION

Redesign the collections page using mobile-first approach that would allow customers to see all categories in 3 screen folds versus 12, increase product knowledge by displaying all color-ways for quick identification to reduce friction

DESIGN PROCESS

DEFINING

THE PROBLEM

Portland Leather Goods moved from Etsy to their own e-commerce website just one month before I was brought on as Lead Product Designer. I started with a heuristic evaluation, quantitative and qualitative research which helped me to answer questions about what problem is highest priority that would have the greatest impact on both users and business.

Who is our customer?  Largely womxn primarly in the South, New York and California

What does it need to do? The website needs to be on brand, be intuitive, interactive, engaging and low friction

How are people interacting with it?  86% of users are on their mobile phone, but we did see a large number of those users starting to shop on their phone but purchasing on a tablet or computer. This was an indication mobile experience was not optimal. 

How do people feel about it? Portland Leather Goods has a large fan base that is growing, fans have created their own Facebook group where they trade bags, create accessories and talk about new releases. PLG has a very strong identity.

What is their goal? Of the participants interviewed, 38% said they first visited the website to purchase something as a gift and 62% were looking to purchase for themselves.

Usability and user flow of the website was poor; It was difficult to navigate with a lot of 'clutter' on the pages and an overload of text. I conducted a heuristic evaluation and conducted preliminary qualitative and quantitative research to identify core problems with usability, experience and accessibility of the website.

Customers were dropping off on the collections page and were getting tired of scrolling to find the product they were looking for. The collections page was the largest issue as it was not optimized or even designed with mobile users in mind even though 86% of customers were on mobile phones. 

Reducing friction at key points was the main priority.

THE RESEARCH

IT'S ALL ABOUT

THE PEOPLE

Research methods used: Qualitative-Ethnographic interviews, heatmaps, concept testing, A|B testing 

 

I started with conducting 1:1 interviews with employees of PLG in various departments (customer service, creative, warehouse) to learn more about the problems they have identified after shifting from Etsy to the website, the friction that they hear about from customers and what they have identified when using our website. I prefer qualitative over quantitative to get a real sense of the people using the product, how they perceive it and what they need from it. Talking with people individually can give so much more insight than a focus group or quantitative research methods. 

I interviewed customers to gain insights on what they say, think and do related to our product. My qualitative methods helped me to answer the why and how of fixing our problem. 

Some questions asked during the interview process:

1. How did you come to find the PLG website?

2. How do you interact with the website, mobile, tablet, web?

3. What are your motivations when you visit the PLG website?

4. What are some problems that you have experienced when using the PLG website?

Screen Shot 2020-10-27 at 8.09 1.png

Get it on paper

Notes taken during the ideation and research phase. 

I’m showing these notes to show my thought process about organizing information.

DESIGN SYSTEM

REFINING BRAND

IDENTITY

Portland Leather Goods did not have a branding kit, guidelines and definitely not a design system. There were some key colors that were previously used in ads on Etsy, so we continued to use those and expand the palette to create more UI friendly system. 

After initial research, I worked with the creative team to refine our look and feel of the website and what would become the overall branding identity of PLG. I created and implemented (with engineering and creative team) an advanced design system. I wanted to define our design system before moving into the ideation and iteration phase of the design to have a clear vision moving forward visually. 

Group 209.png

Atoms

I created and implemented an advanced design system including icons, type ramp, extended palette, buttons and variants, and more. 

KEY FEATURES

STOP THE SCROLL

A large problems for customers was the length of the collections page and how they interacted with it. The negative for the business was the conversion rate and AOV. This was a high priority problem to fix as it was impacting customers and the overall usability and experience with the website as well as business goals and needs.

 

We needed to stop the scroll on the collections page. From 5 initial sketches I brought 3 variants to hi-fidelity which then went forward to prototyping. 

ADDING DELIGHT

Along the way to stop the scroll there were some small problems that moved up in priority as we worked to define the experience from collections page to product page. The top priority on the product page was the sizing. 

Customers were having a lot of confusion about sizes and what could fit inside each bag. I created a mock of each bag and common items that could fit inside, along with dimensions. I prototyped this to be expandable and interactive and make it easier to users to quickly compare. Future iterations would have a slider dividing the two sizes to make the experience even more seamless and interactive.

Adding in a small delightful and interactive moment for customers helped reduce emails to customer service and friction by providing ample product knowledge. 

TESTING THE DESIGNS

Three designs were brought into hi-fidelity and a prototype was created for testing purposes. We also conducted AB testing to get a better sense of why a design is preferred, which design is preferred, and what aspects from each design can we combine to create a better design. 

We tested 4 designs:

1. The Control -current poorly performing design

2. Coupon, discounted pricing shown, and horizontal scroll

3. No coupon, discounted pricing shown and horizontal scroll

4. No coupon, 2 view options-large photo or double photo, color buttons shown

The currently performing collections page was not accessible, clunky and not optimized for mobile. 

 

When clicking on any bag category or main section (like Women's/Men's) customers could not filter by color, each category had every color shown and not just a single image indicating the color ways and they had to scroll over 12 pages to see only 8 bags styles.

In early user research, repeat customers felt that the product became cheaper by the constant sale (PLG always has 25% off, sometimes 30% off for holidays), they weren't sure where the retail price/PLG pricing came from and where the information was to back that, and there was too much friction between navigating to the collections pages and actually finding the item they want without having to sift through lots of unnecessary text, sale banners, and photos of the same bag in multiple color ways. 

THE CONTROL

THE VARIANTS

Three variants were tested to identify the best performing-we monitored conversion rate, average order value (AOV), bounce rate, heatmaps, and email sign up. Testing was conducted over 2 weeks. 

Variant A: This variant kept some aspects from the control like the sale banner, photo, and retail/PLG pricing. The changes include an improved sort by/filter by dropdown, moving the image of the first bag up above the fold, condensing the bag style and colors to only show one main image of the bag and creating a horizontal scroll for users to see all bag colors more accurately than a color dot.

Variant B: Variant B had minimal change from Variant A-the only difference was to test out no sale banner and photo at the top of the page. 

Variant C: The final variant, C, ended up being the best performing variant overall. It had a filter/sort icon to minimize how much of the UI was taken up by sort/filter drop downs, an option for users to see 2 photos per row, or one large product photo which gave users some ability of customization.

 

Adding in a breadcrumb was helpful for users as previously there was none, and it was difficult for people to get back to the previous page. Removing this friction was helpful in improving the overall flow and experience, reducing frustration and increasing usability and intuitiveness. 

We removed the PLG/retail pricing as it was deceiving to users and made users feel that PLG was going out of business. 

Variant C increased conversion, AOV, newsletter sign ups (unexpected benefit), and decreased the bounce rate. 

Variant A

Variant B

Variant C

Like what you see?

Let's chat.

  • White LinkedIn Icon
  • White Twitter Icon

© 2021. All rights reserved. Made with🍫 by Vic de Aranzeta