Sep 18, 2022
Experience Revamp of the Justag App
Giving Justag a new look and a new future
Overview
Justag is a social commerce startup that has its own App, Commerce Website, Admin Backend & Seller Centre. It focuses on word of mouth marketing to help acquire new users. With their proprietary referral system that rewards users with commission from every of their referral purchases.
Role
Role: Product Manager & UI/UX Designer
Timeline: Oct 2020 — Present
Platform: iOS & Android App
Team: Howie, Jaskeerat & Vincent
Challenge
There were many aspects where the app of Justag was lacking, there was a need to overhaul the entire app design, rebrand and coming up with new features to keep users interested.
- Lacking in features to convince shoppers to checkout
- Shoppers were not feeling a sense of urgency
- Unattractive user interface
- Difficult to discover new products
- No defined journey
- Inconsistent experience across the app
Goal
Heavily improve on convincing shoppers to purchase
To work on displaying more existing data to convince users why the product shown and clicked on is the one they should buy.
Giving shoppers a sense of urgency
Friendly reminders, limited time deals & pop ups to let shoppers know that it would be a good idea to checkout now before the price increases or the product runs out of stock.
Designing a more visually attractive interface
Giving shoppers a more soothing and comfortable emotion, through an aesthetic update, this will help shoppers feel like Justag is a product made for people by people.
Coming up with more ways to discover new products
Search, discovery, browsing, all these to be improved by showing more deals and products, as a reminder, that you should not miss out on these.
Impact
As this is a huge project, we released the new designs in phases. For confidentiality reasons I have omitted the actual values for these metrics.
Our users
Before we started designing, we dived deep into existing behavioral and purchase data of our users to understand them better. We also conducted a series of customer interviews.
We focused on identifying what is the reason why our customers use Justag.
We defined 3 user archetypes, and mapped them to their respective “Wants”.
My Approach
Design Sprints
We conducted design sprints to facilitate collaboration cross-departments. Product Designers, Product Managers and Creatives contributed their fresh ideas in this sprint. The purpose of these sprints is to align everyone on the same goal — To improve our consumer experience by solving our user’s problems today.
User flows
We mapped out a user flow with a success metric where a user wants to successfully purchase a phone case.
On the top, we have the current user flow. On the bottom, a newly improved user flow.
Sketches
I sketched multiple user flows to visualize ideas quickly. My focus at this stage is to diverge first, converge later. Here are some early sketches of the Home page.
Early designs
A sneak peek into my early wireframes, mid-fidelity designs and drafts. The designs have went through at least 10 iterations per screen. It is due to several reasons: Change in business direction, shift in product roadmap or simply to improve the user experience.
Home Page
We want our home page to showcase to the user that there are plenty of products within the app. These are the various designs I’ve tried and did not make the cut. It could be due a number of reasons like unclear value proposition, cluttered designs, and lack of scalability.
Cart Page
Where shoppers can place orders and discover more products as well. Although we would like to have more entry points for our users in more pages, we still do not want to clutter our cart page, as we want to maintain its value proposition and have a clear direction for users.
Product Details Page
We show shoppers convincing data in order for them to easily make decisions on whether they would like to purchase this or not. Having leaderboards, price discounts, quality services not only helps the shopper, but helps the seller increase their reputation.
We went through 100+ iterations
The initial designs went through several user tests, discussions with the C-suite team, operations, marketing and business teams to ensure we have a friendly and scalable user experience.
I wish I could show you every single part of the process!
Usability Testing & Customer Interviews
To validate our designs or test prototypes, we did customer interviews through Google Meet. And by using Maze.co we managed to validate our app usability.
Final Designs
Here’s a detailed walkthrough of the revamped app.
Fresh looks, fresher rewards
Before the redesign, the app was cluttered, it had a lack of featured & suggested products. Now, Justag has a fresh new modern look and a better experience. To improve our brand and product perception, we introduced new, scalable components and repositioned the product.
New home page to welcome you
The home page is now heavily customized with landing pages to display campaigns, product recommendations, popular products & categories. New users are also rewarded and given a clear direction of how and when they could use their vouchers.
Act faster with an improved cart page
The old cart page is now long gone, replaced with a much more functional page. The variation selector is a quick and easy way shoppers can change the selected variations without needing to go back to the details page. Also added are low stock reminders, free shipping spending minimum reminders and voucher applications.
The More For You Section saw an increase of 85% in conversion rate.
Much more convincing to shop
Shoppers can now discover products that are in leaderboards, compare merchant types, view the JustMall services such as 15 day returns, free shipping & authenticity. Vouchers are also displayed with a preview of the criteria's.
Total conversions has increased 40%, and 29% increase in product likes.
Up-to-date social commerce
The previous image carousel social media content page has been replaced with a short form video. Where users of all kinds can share videos of themselves and tag products to share, earn commission and promote.
The feed page has an increase of 43% in usage time, and 257% increase in new contents.
Convenience right within the ‘Me’ page
The all new ‘Me’ page give users functionality with a great user experience and improved user interface. Long gone are the boxed rectangular buttons that look alike, and replaced with engaging buttons that helps users find the features much quicker.
The more for you section in the ‘Me’ page brings an additional 123% of product clicks.
What we learned
Adapt to the changing consumer behavior
We needed to stay grounded and focused on the goal, but also account for changes to the product to match the changed behavior of customers during the pandemic.
The team do not determine how a product looks and works
Our users have gave us massive and useful feedbacks, that would help shape Justag. Without the community, we would not have done a better job.
The entire team matters
It’s not just about the tech, product and design team, it’s everything in between, from the operations, business development, marketing and many more. All stakeholders are affected, and we will need to make sure that everyone is aware of the changes, such as differences in the way operations team manage featured products and campaigns.
Take it one phase at a time
We learned to break down complicated designs into small, manageable chunks. This eases development and handles bugs as we go along.
Future
Bug fixes
For a project of this scale, even though we have already fixed plenty of bugs before public release, there are bound to be minor bugs.
Post-launch optimization
This is a crucial next step for every UX improvement or product launch. With informed, actionable insights, we are able to design a better experience for our consumers.
Continue to design better experiences
To follow through our product roadmap and continue to stick to our design principles.
This has been my proudest contribution at Justag. Couldn’t have done so without the amazing team at Justag! Props to our engineering team, marketing team, operations team & business development team that helped made this possible.
Thanks for going through the entire case study! Hope you have enjoyed learning about my design thought process.
