Intro

User Experience Design (UX design or UXD) or redesign is not merely about designing or changing the visuals of a website or app (though that usually happens, too). It’s about – as the name implies – designing users’ experience throughout the app, optimizing the way they flow through and interact, rendering it smooth, intuitive, and… well, user-friendly. 

Regardless what an app does, if people have trouble using it, they are likely to stop. No one likes a clunky app.

Optio

Optio is a mobile marketing platform that provides users with deals on products and services from international brands across several industries, such as Virgin Megastores, Dairy Queen, Four Seasons Hotels, and also many local businesses in Saudi Arabia, Bahrain, and the UAE, like Souq.com, Alesayi Electronics, and Kordy Pharmacies. Users gain points through various actions, and can use those points to bid on deals, with the deal going to the highest bidder. 

Coupons are another feature that users can buy for discounts on products and services.

Optio monetizes through commissions on each deal won and claimed and each coupon redeemed.

Objectives and Problem Definitions

The Optio team approached us (the people at Pencil Designs, a branding and UX agency operating out of Cairo, Egypt) to improve the UX of their app. Their main objectives were:

1. Increasing the engagement of the app, nudging users to use it more frequently and extensively, and associating an overall positive emotion with using it

2. Facilitating flow, making using the app more intuitive so as to require minimal instruction

3. Increasing revenue

4. Highlighting sponsors and promoters on the app, positioning them in a positive light, and further driving revenue

As UX designers, we don’t just go about making apps look better. Our process spans several stages, starting from the client’s business goals, moving on to creating a strategy and information architecture for the UX, and finally designing the UI based on those guidelines.

We analyzed the app’s user flow and information architecture and found problems with its 

1. Core functions, namely

1. Deals, and

2. Points,

2. Navigation and layout,

3. Revenue generation model, and

4. Poor onboarding. 

We went a step further by spotting areas where we could capitalize on untapped opportunities, adding NEW FEATURES to further improve the functionality and engagement of the app, and improving the overall user experience, most obvious of which is 

• The Optio Assistant

UX Strategy and Gamification Model

The old version of Optio had several aspects of gamification. Our revamping strategy started with creating a more robust gamification model while also leveraging those aspects already present.

We based the new gamified experience on the following pillars:

1. Any task the user completes should be rewarded

2. Any progress made by the user should be acknowledged

3. Virtual currency and its allocation is central to the experience

4. Competition among users begets encouragement

5. Characters add a personal touch and engender engagement

Problems and Solutions

1. Core Functions

1.  Deals

Problem #1: Unclear Status of Deals: 

The whole point of the app was to be able to view deals and bid points on them. In the old design, it was very difficult to discern the status of deals, whether they had started or not, whether the user had registered or not, and whether they had bid or not. These are critical pieces of information that underlie the main interaction on Optio.

Timer for Deal END, even though it hasn’t started yet!

Another confusing issue was the presence of an “Add Points” button in the deal, which – counterintuitively – doesn’t add points to the deal, but obtains more points in general for the user.

• Solution: We inserted a countdown showing the time left until the deal starts, with a call-to-action (CTA) button to register. This changed to an urge to bid once the deal started. If the user has already bid on the deal, then the CTA is to add more points.

We removed the confusing “Add-points-to-your-overall-stash” button, leaving only the button to increase the points bid on the deal.

NEW FEATURE: Other Types of Deals: 

In addition to the two types already in place (Sudden Death and Countdown), we created a “Draw” type of deal (basically a lottery, users only pay registration and a winner is selected at random) and “Sealed” deals (targeting specific users based on demography).

2. Points

Problem #1: Obtaining Points: 

Points are the only currency on the app, and getting them is how the app basically works. There were only two ways to obtain points: the daily points offered and sharing the app. At the same time, the app asked users to perform many unrewarded actions that were necessary for the app to gather required information (such as completing the User Profile). 

• Solution: Tying in with our UX Strategy for Gamification (any task is rewarded), we designed the experience such that any task the app wants the user to complete results in Point rewards. This helps incentivize users to complete the tasks that are important to the app, while at the same time fuels further activity by having them spend the points they’ve earned.

We added more ways to obtain points, such as:

1. Optio Riddles: A seasonal feature (Ramadan, World Cup, Olympics, etc.) that is sponsored by a promoter and presents the user with questions that they answer to receive points.

2. Sponsored Prizes: Promoters can offer users Point incentives and gifts for carrying out specific tasks.

Problem #2: Keeping Track of Points: 

Users were only able to see the number of points they have while bidding on a deal or in the Points screen. Points serve as a main component in motivation due to the gamified nature of the app, and not viewing them throughout the app was a lost opportunity to motivate users to obtain more.

3. Solution: Points were made visible throughout the main screens of the app to motivate users.

2. Navigation and Layout

Problem #1: 

User flow through the app was problematic: it was unclear how to navigate or where the app wants you to go. The layouts of critical screens were a bit cluttered and unintuitive. 

• Solution: We revisited Optio’s information architecture, creating smooth, intuitive flow, from opening the app for the first time to full user engagement and achievement of the app’s objectives.

Examples where navigation and layout were fixed:

1. The Home screen, where there was no clear direction on what to do or where to go.

• We designed clean-cut home screen that contained a tab for deals, another for coupons, the deal categories, and featured deals for the day, enticing the user to explore any of these, which will inevitably bring them to one of Optio’s actionable areas.

2. The Deals screen, where the layout on the deals screen changed according to the type of the deal, which led to users’ confusion, constantly spinning their wheels in order to relearn the app’s layout.

There were ads from the deal provider that were unrelated to and distracting from the deal. Also, the promoter’s information wasn’t very visible, which goes against the basic premise of a marketing platform.

• Ads were removed, and the layout was unified, with any deal screen divided into marketing information at the top, followed by the deal’s information, and at the bottom the participation area. This helps users get used to it. We also made sure to highlight the promoter’s info in the Deals and Coupons

3. Revenue Generation Model

Optio’s monetization model is commission-based; the more users bid on deals, the greater the app’s revenue. In the old version, users would bid by repeatedly pressing a button on the deal’s screen adding a fixed number of points until the deal ended. While this may increase the time spent on the app, it also increased time spent on that specific deal; users were unable to browse for other deals, which would ultimately increase Optio’s revenues.

• Solution: We designed it so that users bid on deals through adding points in bulk. This freed them up to search for other deals on which to bid, increasing Optio’s chances for monetizing on those deals.

4. Poor Onboarding

There was no in-app onboarding. Users had to visit the website to watch minute-long videos. The problem with videos (especially if they’re that long) is that people tend to forget what the specific steps were. Having to navigate away from the app to learn how to use it isn’t ideal.

• Solution: In-app onboarding is the gold standard these days. We designed the onboarding and added an in-app, on-demand assistant (discussed below) to help users who find themselves lost without having to switch to another app.

• NEW FEATURE: The Optio Assistant:

While redesigning the look and feel of Optio, we also redesigned their logo. But far from being a simple aesthetic redesign, the new logo ties in with our UX strategy (Characters engender engagement)

DOWN HERE!

1. It’s memorable: Incorporating the “O” of Optio, it stands out and links to the brand.

2. It’s relatable: While largely abstract, the logo contains human features, which makes it resonate more with the audience (Think: Baymax).

3. It’s familiar: While the logo is unique, it kind of looks like an Emoji (☺), something we all use and to which we relate positive emotions and expressions.

4. It’s functional: We incorporated the logo into the app by having it deliver the messages for winning losing deals. We also used it as the face of the in-app assistant, imparting a little bit of friendliness to the “Help” and onboarding processes (If you’re old enough: remember the Microsoft Office paper clip assistant & co.?). 

Once again, this added a more human touch, invoking a positive emotional response from users.

Conclusion

User Experience Design really can make or break an app. It can help increase users’ engagement, present relevant information to them when it is needed, smoothen their flow throughout it, and make their experience while using it pleasant overall, and devoid of clunkiness and obstacles. An app with poor UX – no matter how novel in theory – will not only eventually discourage people from using it, but may even defeat the purpose of the app altogether and cut into revenues!

Our advice? Always design with user experience in mind to reach your service’s goals.

https://www.pencil-designs.com

https://www.behance.net/pencildesigns