Transforming a ‘Sad N’ Boring’ template to a Happy N’ Beyond unique brand

Our team of five, each held roles as UX Researcher and UI/UX Designer, conducted usability testing and iterative design to evaluate and optimize the conversion process on Happy N’ Beyond website.

My Role

UX Research, UI/UX Design


Kefan Ma, Allison Long, Emily Gu, Lena Nazaryan, Lori Chiang


Happy N’ Beyond


6 weeks, Mar 20 – Apr 26 2024


Figma, Google Form, Google Doc, Zoom

Final Prototype

Prototype 1

Prototype 2

Prototype 3

Final Presentation


About the Client

Founded in Ontario, Canada by Meaghan Turner and her partner Tyler Miller, Happy N’ Beyond is a Woman & Indigenous owned e-commerce business that crafts joyful hand-drawn stickers, trendy tumbler cups, and unique accessories. Started from 2021, the business has grown from a small Etsy shop to its own Shopify website. Their products emphasize artistic expression & eco-conscious choices, catering primarily to millennial women, parents, and students.

How might we improve the UI Design and Content Organization to increase conversion rates for Happy N’ Beyond Shopify website?

Taking a Peek at Before vs After

We made a complete revamp to the key interfaces to improve the user experience, with the focus on # UI Design # Brand Identity # Content Organization # Copywriting.

Our Process

Getting to know the Client

We initiated the project through a 45-min kick-off meeting with our client Meaghan, focusing on aligning the project scope & goals, as well as setting expectations for the following research process & final deliverables. We learned that Meaghan is a full-time Web Developer, while she works part-time as the Shop Owner & Graphic Designer for this side hustle.

Main takeaways from this kick-off meeting are:

Client’s Goal

  • Transition from Etsy shop to an independent Shopify site to save on commission fees & express branding
  • Increase website visitors and promote conversion rates
  • Increase sign-ups for newsletters

Target Audience

  • Primary demographic: Women in 20-30s, along with indigenous people buying for themselves or their children
  • Location Focus: North America
  • Locals in London, Ontario area supporting in-person market sales

Existing Marketing Practices

  • Social Media Channels: Facebook, Instagram, TikTok
  • Google paid Ads
  • Traffic from Etsy

After discussing within the team, we decided to build our prototype for testing rather than using the actual website of Happy N’ Beyond, primarily because the limited number of products currently available fail to provide the variety and complexity necessary for conducting usability tests. Additionally, we chose to apply an iterative design strategy that allows us to rapidly collect feedback and iterate on our prototype during each testing phase.

Understanding the Market

To gain more in-depth insights into the e-commerce industry standards for our first prototype, we conducted competitive analysis on 13 sticker businesses (direct competitors) and comparative analysis on 11 e-commerce businesses in diverse domains (indirect competitors).

View detailed Analysis

In developing the first prototype, we grounded our redesign in these insights from the industry practices:

Product Diversity

Gumroad shows a wide variety of products that appeal to a broader range of customers.

Content Organization

Redbubble has intuitive filters that makes navigation easier for users.

Brand Identity

PIPSTICKS uses vibrant color schemes and has memorable branding story that emotionally resonates with customers.

Building the 1st Prototype

We wanted to narrow down our scope to the key venues that are really impacting conversion rates, so we decided our final deliverables would be the following 8 screens: Homepage, Shop All, Sticker, Tumbler, Apparel, Our Story, Event, and Product Detail.

Based on our initial research insights, each of us brainstormed what the wireframe may look like. We then locked on a unified UI scheme to prototype the 1st draft, and get ready for testing!

Interact with the 1st Prototype

Moderated User Testing

Recruiting Participants

Based on the desired demographics, we built a screening questionnaire to recruit interviewees from Happy N’ Beyond‘s target audience groups. We sent out the survey both within our school and to external audiences to gather a broad range of perspectives.

Our target User Profile:

  • Age 18-30
  • Preferably female
  • Students/Working professionals
  • Living in Canada/the US
  • Have frequent online shopping experiences

Conducting the Usability Testing

We conducted in total 15 moderated usability tests in-person or via Zoom, 3 are living Canada, 12 in the US. Each participant was rewarded with a $10 Amazon gift card after successfully finishing the interviews.

Interview Scenario: You are interested in fun stickers and would like to find out what’s new on sale online. You find the brand Happy n Beyond on instagram and want to check out what they are selling right now.

Part 1

Overview of the website

  • Browse the page without clicking, what is your first impression about this website? Please speak your thoughts out loud as you read the site.
  • Is there any specific thing that caught your attention?

Part 3

Visual Branding and Senses

  • How would you describe the overall vibe or atmosphere of the site?
  • Is there anything in particular that you think contributes most to the vibe of this website?
  • How do the colors and visuals on this website influence your impression?
  • What emotions or feelings does this website evoke in you?
  • Is there anything unique about this website that feels different from other websites you usually do online shopping on?
  • One the scale of 1-5, how much do you enjoy the website’s visual design?

Part 2

Content Organization

  • Please interact with the site freely. Before every time you click on something, please speak about what you expect to happen when you click on it and why you choose to click on it.
  1. Navigation bar
  2. About Us + Community page
  3. You’re buying a gift on this website, try to find an item you like related to the occasion and add it to the cart.

Part 4

Brand Identity

  • What is your perception of the person who designed the stickers?
  • This brand has close connections with indigenous communities in Canada. Is that information apparent to you from the website?
  • Would you be willing to make a purchase from this site/brand? Why or why not?

Iterating the Prototype – 2nd

At the midpoint, based on feedback from the 7 interviews conducted during testing phase 1, we made the first iteration on our prototype that changed the entire color scheme, typeface, and refined the product pictures.

Interact with the 2nd prototype

Finding & Recommendations

Interact with the final prototype

Finding 1

Generic Template Appearance

Users noted that the website lacks a personalized touch, it appears more like a basic template rather than a unique brand site.

“The site looks clean and the information seems clear, it’s just a bit generic.”

Finding 2

Lack of Content Strategy

The content across the site was not engaging enough, and many users did not understand the significance of certain sections.

Finding 3

Unclear Brand Story

Users were confused about how exactly the brand is supporting indigenous communities. They were unclear about how their purchases can contribute to this cause.

“How exactly does the brand support indigenous communities? You can’t just say that and not explain how.”

Recommendation 1

UI Revamp for

Apply a more customized, visually exciting design, choose the visual elements that best fit the brand storytelling.

Recommendation 2

Develop Robust Content Strategy

Craft more engaging copy and use clearer hierarchies to prioritize important information, make it easily accessible and understandable to users.

Recommendation 3

Infuse Personalities into Brand Narrative

Weave the clients’ personal stories into the brand narrative, reflect their personalities to make the brand mission more compelling.

Final Client Presentation

We presented our findings and actionable recommendations to both Meaghan & Tyler via Zoom, and they were extremely impressed by our solutions. It was BEYOND their expectations! They showed us the upcoming batch of stickers that incorporate more indigenous elements, and they looked forward to implementing our design!

View our slides

Reflection & Next Step

Setting expectations is important since the beginning

It has been a challenging project from the very start since it is not a “typical” usability problem to solve. We’ve had multiple discussions within the group, with the client & with our teacher to clearly define the project scope. At some point, we reached the agreement that we would deliver a template design focusing on the visuals and branding for our client, considering Meaghan is a Web Developer herself! Since then, we have been more and more confident and enjoyable during the process. The client may have their own expectations when taking this project to us, however, it is our job to set the boundaries and inform them of what’s in scope and what’s out of scope beforehand.

Next Steps

If the project were to continue, the next steps would involve

  • an overall implementation of the proposed solutions across the website
  • paired with data analytic tools to monitor the site views, conversion rates, etc.
  • expand on the range of product offerings