Twism Case Updated

Attracting & Rewarding Loyal Customers

Design system

Web3

B2B

B2C

Redesign

Usability test

Context

Twism is a marketing tool for local and online businesses with a loyalty program that uses Branded Coins instead of points or coupons.

Client:

Twism

•

USA

Industry:

Finances

Timeline:

Apr 2022 - Jan 2024

•

1 yr 10 mos

Platform:

B2B Web App, B2C Mobile App, Landing pages

Problem

Designing for small business owners with varying tech-savviness, while managing complex workflows across multiple platforms including the web app, mobile app, emails and landing pages.
The product faced inconsistent interface patterns, complicating designer onboarding, file organization, and product scaling.

Solution

Improving Twism workflow by developing design libraries and design system.
Redesigning the onboarding process and webapp, enhancing features based on data from analytics, usability tests, user feedback, and design documentation.

My role

I developed and enhanced features using Hotjar analytics, user feedback, and design documentation for data-driven decisions.
Created the Web App and Mobile App Design Library from scratch
Redesigned the B2B Web App Dashboard and Onboarding
Contributed to the B2C Mobile App, landing pages and emails.

1. Onboarding Redesign

A 624% increase in the Web App Users

In the previous onboarding, merchants had to activate the Loyalty Program feature before even accessing the platform. After restructuring the product, I removed this requirement, giving merchants the option to activate it along with five other features.

with a shorter, more intuitive onboarding

Reduced the onboarding process from 11 steps to 5, cutting unnecessary steps/fields, following the Norman Nielsen Group forms best practices.

Remove fields which collect information that can be (a) derived in some other way, (b) collected more conveniently at a later date, or (c) simply omitted.

Norman Nielsen Group

Website Forms Usability Article

After solving a challenging problem

It was complex change because the Loyalty Program was linked to other features, but it all paid off, as a few months later, Twism acquired Axxess and we were able to easily absorb Axxess’s client base, which was only interested in Twism’s Offers feature, not the Loyalty Program.

Onboarding before and after

Removed screens:

3. Web App Redesign

A simplified design to guide the user:

After signing up, most users clicked randomly through the previous Dashboard, unsure of the next steps.

Testing the new Dashboard interfaces on Useberry and Maze, users responded positively to the simpler design, expressing approval for the Start Guide and Video Tutorial buttons.

The more options a user has, the longer it takes them to make a decision. If there are too many options, then the user may abandon the task altogether.

Hick's Law

The principle of cognitive load

Web App Dashboard Before Redesign

Multiple primary buttons

Too much clutter on the homepage

Users couldn't find how to change their business image. It was not here.

Many skeletons with no relevant information for new merchants

Web App Dashboard After Redesign

A Start Guide featuring the name of each feature, its benefits and a CTA.

The video tutorial was very popular during our usability testing.

Clear shortcut to customize their Business Coin image.

Shortcuts to common merchant questions on Twism.

Results Web & Mobile App

Turning challenges into impact: measurable improvements

Removing the mandatory Rewards Program activation allowed Twism to quickly adapt the platform for Axxess clients, driving significant growth in its user base.

🚀

624%

increase in Web App Users

🔥

502%

increase in Mobile App users

🌟

53,182

Offers redemption in the App

🪙

44018

Coins claimed in the App

5. Design Library and System

Scalable products and efficient workflows

After some Figma wizardry using variants, booleans, autolayout, styles, and everything in between, I set up the design library, allowing the designers to save time on features by avoiding:

Recreating elements from scratch
Searching old design files for assets
Making random micro-decisions on text style, placement, color etc

Also, according to this Figma study: Measuring the value of design systems,

Designers using a design system are

34%

faster in completing tasks

That’s equivalent to adding

3.5

designers to the team

These tests were conducted on Figma's team of seven product designers, similar to Twism's own team of seven product designers. As a result, Twism now has a visually and functionally consistent product.

6. Learnings

Takeaways that shaped my growth

Creating and managing multiple design libraries

Building multiple libraries taught me how to collaborate with a large team of product designers and guide them in adopting the design libraries.

Impact of good work enviroment

I learned that a positive work culture can make a fast-paced, high-pressure startup environment feel lighter, driven by a team spirit to deliver our best.

Receiving feedback overall

Twism’s use of continuous feedback via Slack and bi-weekly retrospectives helped us address technical issues and interpersonal challenges, improving team dynamics.