Portfolio of Steph Laba — Experience Designer

Pela — Community-Driven Commerce

Hi — I’m Steph, a Toronto based multidisciplinary designer currently at the intersection of Experience Design and eCommerce.

Pela

Community-Driven Commerce

parallax header

Overview

Pela is a Canadian phone case company whose unique flax based plastic aka bioplastic is 100% biodegradable. In just under a year the company went from doing $1000/month to $1000/day. This was in no small part due to the dedicated online zero waste (or waste-free) community that surrounds Pela - folks who are dedicated to limiting the amount of waste they produce in an effort to reduce their impact on our enviroment.

The team at Pela were very much aware that social media, especially Instagram, was a key channel both for customer acquisition and retention when they sat down with us to talk about their vision for the new site. They wanted to transfer the spark they had organically lit on social media to their eCommerce experience.

Date

2018

Role

Lead UX Designer

How might we create a commerce experience that authentically connects with the zero waste community?

Chapter 1

Research

Though time and resources were limited I knew that research was vital to ensure the experience felt authentic to the brand and cause. The brunt of my research spanned a single sprint. The research phase consisted of 3 initiatives to learn more about the zero waste community, it’s audience and key competitors.

Stakeholder Interviews

Since I couldn’t meet with customers directly, due to lack of time and resources, speaking to the Pela team was essential in gaining insights into their core customer segments. Based on our conversations with the client the Demac Team elected to focus on the customer segment Pela nicknamed “the Outdoor Adventurer” for phase 1 of the build.

Outdoor Adventurer: Someone who is new to the zero waste community and therefore would likely have yet to discover Pela and would also be the most likely to purchase a new phone case.

Through talking to Pela we discovered the main navigation's UX and Information architecture was a big pain point for both their customers and Pela - which I’ll talk about in detail a bit later in this case study.

parallax divider

Audience

Using the insights from the stakeholder interviews I conducted additional research to flesh out the “Outdoor Adventurer” their goals, needs and key behaviours.

First Part Analytics

When researching audiences my work always begins with analytics for 2 key reasons:

  1. First party data has a wealth of insights to tap

    • Shopify Dashboard
    • Social Media Analytics (Instagram and Facebook)
    • Google Analytics
  2. It's Free

    I like to joke that while Demac is an agency the UX department is still a startup. What I mean by this is that often UX has to be done on a shoestring budget so I have to look to creative, cost-efficient solutions to inform my work. When it comes to analytics - the price is right.

Shopify Logo Google Analytics Logo

1981-

1996

Cohort Analysis

Through my analytics research I uncovered that the majority of Pela users fall into the millennial cohort . Using this insight I consulted market research that captured the purchasing habits of millennials, their values and how they relate to brands and causes.

Online Ethnographic Research

I spent time immersing myself in the online zero waste community. I watched youtube videos, visited influencers’ blogs and social accounts and took note of trends I observed.

Types of Observations:

  • Topics and products influencers posted about
  • Overall tone and vibe
  • Imagery and language used
  • Community engagement in the comment section

Going Zero Waste Logo Wasteland Rebel Logo Trash is For Logo
parallax divider

Competitive Analysis

While conducting the competitor analysis I was especially mindful of the kinds of imagery and copy each brand employed to speak to their customer base.

4 Main Areas:

  • UI/UX design & branding
  • Look, feel and flow
  • Content strategy
  • Community engagement

Swell Logo Swell Logo

Chapter 2

Synthesis

Putting Your Money Where Your Flax Is

I synthesized my insights into six core UX strategies to be leveraged during the design phase to ensure the experience felt immersive, meaningful and, most importantly, authentic to Pela’s customers. My process consisted of creating a large spreadsheet where I chunked like information together to identify trends and then reformatted them into recommendations.

1. Use Beautiful & Evocative Imagery to Drive Emotion

Insight:

The community uses powerful images of the environment to engage users in both positive and negative contexts to inspire activism.

Recommendation:

Always tie back to the cause using engaging imagery to evoke emotion.

2. Vote with Your Wallet

Insight:

Millenials support brands that stand behind causes they believe in.

Recommendation:

Ensure the customer feels like they’re making a difference and that, by supporting Pela, they’re supporting causes that are important to them.

3. Humanize the Experience

Insight:

Pela’s handwritten “Thank You” notes are a huge part of Pela’s community culture. Customers connect with them because they feel human and personal.

Recommendation:

Make the user feel connected to the Pela through a humanized and warm experience.

4. Socially Validate

Insight:

Millenials are tribal and more likely to trust brands if validated by members of their community.

Recommendation:

Use the community’s voice to prove the quality of the product, rather than the brand’s voice alone.

5. Source of Truth

Insight:

Similar brands in this space lead with educational content rather than commerce.

Recommendation:

Ensure there is a balance between content and commerce throughout the experience.

6. Trusted Transparency

Insight:

Zero waste consumers are savvy and have high BS meters. They will support brands that they feel are authentic.

Recommendation:

Gain customes’ trust through being tranparent and real. Impart the sentiment: “Pela isn’t perfect but we’re trying" and be sure to show how.

parallax divider

UX Persona & Journey

Meet Olive, the Outdoor Adventurer

Once my research was complete I created the UX persona and journey. The persona built on the “Outdoor Adventurer”. I then crafted a corresponding user journey which would act as the design team’s north star for my UX recommendations.

I also included the current pain points in the user journey - this would ensure these were front of mind for the design team while we designed the new experience.

Image: Pela’s UX Persona, Olive Walden “The Outdoor Adventurer"

 

Image: Pela’s UX Journey, for Olive Walden

Chapter 3

UX Design

Main Navigation

Taxonomy & Information Architecture

During the stakeholder interviews we discovered that the IA and UX for the main navigation was a big pain point for both Pela and their customers.

Image: Pela’s main navigation before the redesign. The dropdowns where quite bloated and the formatting of the links were difficult to read.

Pain Points

It's not scalable

The category taxonomy was brittle which made scaling the navigation next to impossible for Pela.

It's not shoppable

The nav's UI was clunky and frustrating to use, especially on mobile, resulting in a high amount of user errors.

It's not scannable

The link formatting was not optimized for scannability, especially in the second tier.

It's not intuitive

The way links were grouped wasn't intuitive which made products and content difficult to discover.

parallax divider

Main Navigation

Scannable, Scalable & Communal

Based on the client’s feedback I redesigned the navigation’s experience with the aforementioned pain points in mind. I was also mindful of Pela’s business goals and their branding initiatives.

Featured Community Prominently

As community was a focal point for the build it was essential the main navigation echoed this. Working with the client we incorporated Pela’s community into the nav in two organic ways:

1

Previously community content was difficult to discover as it was scattered under a number of nav items. I created a main “Community” nav item which consolidated all related content, like their blog, to easily connect customers to Pela’s community.

2

Pela often teams up with influencers, charities and brands. The current navigation didn’t make this clear. As these collabs are typically limited edition we opted to create a “Limited Edition” nav item which would house their collabs making them easy to discover and underscore their exclusivity.

pela-wire-nav-3-4.jpg
Improved Scannability & Scalability
3

I consolidated all product links under the main nav item “Products” which would open into a mega menu format. This created a cleaner and scannable nav layout.

4

I also added two additional product categories within the dropdown to demonstrate how Pela could easily scale into verticals outside of phone cases.

pela-wire-nav-5.jpg
Improved Link Legibility
5

I referenced how vendors like Apple and Peel merchandised their phone cases. I emulated their approach to formatting the phone names, which improved the scannability.

pela-wire-nav-6-7.jpg
Added Support Links

Wrong case purchases was one of the biggest pain points for Pela and their customers - It was frustrating for customers and resulted in a lot of returns. To alleviate this I added 2 support links at the end of the phone case list and asked users 2 questions:

6

“Don't See Your Model?”


This link previously existed on the site as “Sign up for more Android Cases”. If a case isn’t availabel for a customer’s phone they could sign up to be notified when it was made availabel.

7

“Not Sure What Model You Have?”


This link directs users to a phone size guide.

I felt by including these support links in the main nav, which is always one of the most heavily used elements on any site, it would be the best way to intercept customers who may need an extra hand. In addition offering help in the form of a question was a way to humanize the experience, anticipate their needs and promote an action.

parallax divider

Content Card Sorting Session

From the data I had collected in the research phase I knew that the experience had to be the right blend of emotional storytelling, eCommerce and the community’s voice. To ensure I was striking the right balance I conducted a card sorting session with the help of the creative director to define the skeleton of 3 key pages:

  • Homepage
  • Product Listing Page
  • Product Details Page

Image: Shots of the whiteboard session. First we blocked out the sections of each page using sticky notes to determine the content hierarchy. We then fleshed the pages out into low fidelity wireframes.

Wireframes

Using the sketches we built from the card sorting exercise I created wireframes. Below are a few examples showing how we leveraged the strategic recommendations to guide the site’s skeleton.

Desktop Wireframe for Pela's homepage

Wireframes

Homepage

Beautiful & Evocative Imagery
1

As the hero banner is one of the first elements customers see we wanted to ensure we were using it to immediately connect Pela to the enviroment through powerful imagery to engage users emotions as soon as they landed on the site.

Vote with Your Wallet
2

To make the customer feel like their purchases were making a real difference we designed a live counter that would update in real time as people purchased cases to show the direct correlation between purchasing and positive actions.

3

We included a mission statement right after the hero banner to introduce and educate customers, especially new ones like Olive, to the brand, bioplastic and it's positive impact.

Socially Validate
4

We leveraged the community voice throughout the experience. Reviews and testimonials were included at main points throughout the journey.

Source of Truth
5

We included content at key points of the journey to entice and engage users such as featuring the blog prominently on the homepage.

Prototypes

Once the wires were completed I then linked them together using Invision to create a clickable prototype to demonstrate the layout and flow to Pela, which I then passed off to the lead UI Designer to flesh out into high fidelity mockups. I made two sets of prototypes; one for desktop and one mobile. Here's an example of the mobile prototype which inlcudes the following pages:

  • Homepage
  • Product Listing Page
  • Product Details Page

Please note: for ease of use, I've removed most hot spots from this prototype, clicking anywhere on the current screen will advance you to the next one.

View Prototype

parallax divider

Conclusion

So how might we create a commerce experience that authentically connects with the zero waste community? When it came to designing a meaningful experience for members of the zero waste community I learned a few important things:

  • It’s not about anti-consumption; it’s about mindful consumption.
  • It’s about holding brands accountable to ensure the goods we purchase don’t negatively impact our planet - and proving it through transparency.
  • And most importantly, it’s not about the case, it’s about what the case represents which is giving a sh*t about our planet, the enviroment and it's future.

Final Designs

Below is a selection of some of my favourite screens from the final designs. The UI designs for this project were created by Julio Wong:

Image: Product Detail Page designs. Design and asset creation by Julio Wong, Lead UI Designer.

Image: About Page Design. Design and asset creation by Julio Wong, Lead UI Designer.

Image: Mobile Homepage designs. Design and asset creation by Julio Wong, Lead UI Designer

Project Takeaways

Never Skip Research

Limited time and resources isn’t an excuse to skip UX research. Sometimes you have to get creative and look to quick, cheap or free options. Some research is still better than no research.

But First: Mobile-First

Reflecting on my approach I missed an opportunity to design for the primary audience which is predominantly mobile. This is something I will keep in mind for the future especially since mobile use continues to be on the rise across the board.