Swaggable

swaggable-header-image

Problem:

There was a need to redesign the Swaggable web application in order to boost engagement, increase conversions, and improve the clarity of the value that Swaggble provided.

Product Overview:

Swaggable is a web platform that helps consumers discover and try new products.

Goals:

1) Design an onboarding experience that improves engagement.
2) Improve transparency in the sampling process.
3) Help the user curate relevant products.
4) Create a better purchasing experience.

My Role:

I worked with a UX Lead to perform the user research, brainstorming, and requirement gathering. On my own, I performed the interaction design and prototyping for the wireframes while working closely with the team lead to gather feedback and present work to the client. The visual design (not shown here) was done by another designer.

User Research

As a two person team, we conducted multiple interviews over the phone with both new and current Swaggable users. Additionally, for the current Swaggable users, we had them share their screen and perform a few tasks – like viewing reviews and browsing products. For new users sharing their screens, they were asked to sign up and give their first impressions of Swaggable.

After conducting the research, we compiled and synthesized our findings using a Google Spreadsheet (this was how we replicated a whiteboard and sticky notes since we were working remotely).

Swaggable User Research Stickies Board.png

One of the main things we learned from the research was that users were having an issue understanding how Swaggable worked. They only understood the aspect of Swaggable that was about trying free samples. Even though they were interested in discovering new products, few actually used Swaggable to do so.

Our main goal of the project became reframing the copy, features, and onboarding process to focus on the value Swaggable could bring to users.

Context Scenarios

Next, I created context scenarios that encompassed all of the requirements for the project while telling a story about three different users using Swaggable. By creating this table of context scenarios, it was a more story driven (and therefore user driven) way of figuring out the requirements for the project than just using a tool like user stories.

swaggable-context-scenarios

Wireframes

After finalizing the requirements and necessary design elements in the context scenarios, I created the wireframes for both the web and mobile versions of the platform. These wireframes incorporated new aspects of Swaggable that attempted to create clarity into how Swaggable works by putting greater emphasis on product discovery. I also incorporated business goals through features such as affiliate links to buy products.

Product Page.png

Screen States

Advertisements