How I redesigned Adrenaline — Terragon Group’s flagship product
About Terragon Group
Terragon Group is a Data and Marketing technology business that unlocks value for businesses using insights to reach the mobile audience in Africa.
At Terragon, we are motivated by the evolution of technology, data and the rising power of the consumer.
What is the Adrenaline Product?
Adrenaline is a mobile Intelligence Platform that delivers targeted messaging via Web & Non-Web channels. The platform has a dashboard where businesses can send targeted campaigns to the right audiences at the right time and place and get reports of campaigns sent. It has been deployed for the top telcos in Africa.
The problem space
The look and feel of the product was dated, and over time, in the absence of designers, it had turned into inconsistency. While there’s no easy way to quantify how the look and feel affects user sentiment or prospective sales deals, it was a concern.
In 2018, I was hired as the first UI/UX Designer at Terragon Group — This resulted in numerous UI and UX improvements of many of our products. My first task was to redesign the Adrenaline product, keeping existing features and adding new ones. We had a short window of engineering time on the schedule, there wasn’t much time. How could we update the UI of the entire app, from design to implementation in two months?
The design took me 1 month to complete. I spent this time tweaking the user experience and interface design so as to make the experience seamless for the users.
How I started the design process
The first thing was to come up with the SRS (Software Requirement Sheet) document for the product; the Product Manager was responsible for this. The purpose of this document is to serve as a guide for Product Designers and Engineers to develop a user interface for deploying the Adrenaline Platform. This document contains the overall description of the project; project functions, scope of the project, detailed user stories, user classes and characteristics. Everything else that was done was centered around the SRS document.
Collaborating with other team members
I had series of meetings with the product managers and engineers, highlighting key features that would be implemented; We also crossed out redundant features. I needed to understand how some of these features would be implemented from the engineering point of view. After the designs were done, I collaborated with the front-end engineer to make sure the designs were implemented correctly.
Goals of the project
The goals of the project are:
- Understand the scope of the business
- Improve the general aesthetics of the platform
- Make the user experience seamless for the users
- Design the platform to accommodate new and existing features
My design process
High-level view of the design process
I carried out extensive research and determined what the platform would eventually look like. I did some personal brainstorming by looking through the requirements on our SRS document.
I interviewed 4 users of the platform to find out what they thought about it and get to know their pain points. These users were some staff at Terragon — they act as Admins and manage the platform. While this interview was going on, I knew that we needed to move from decision to design, fast.
Here are some of the questions I asked during the interview:
- How do you find the experience of the platform? a) Excellent b) Good c) Fair d) Not good
- Does the presentation of data on the dashboard appeal to you?
- What are the vital information you want to see at first glance at the dashboard?
- Is the graph explanatory enough?
- Are there redundant information on the dashboard that distracts you from understanding the vital information you need?
- How do you export your reports? a) Excel b) PDF c) CSV d) ALL
- Are old reports important to you? Do you want to only see latest reports and discard old reports?
- Does the presentation of data on the report table appeal to you? Do you wish it could be better?
- What are your other pain points when using the platform that we haven’t discussed here?
- I’ll be documenting the feedback of the interview, can you give me an approval?
- Most of the users find the experience of the platform in between fair and not good.
- The graph on the dashboard isn’t explanatory enough, overview is vague.
- The interface of the platform looks so outdated.
- The report page isn’t displaying the reports until the user clicks a button to preview reports.
- On the Advertiser list page, users can only see a long list of advertisers, there is no search function if they want to quickly search for an advertiser.
I also explored a lot of designs on Pinterest and went on to gather screenshots of products that might serve as inspiration. I was intrigued by the simplicity and cleanliness of Flutterwave’s Rave dashboard and Cowrywise mix of white spaces with sophisticated typography, bright color and illustration.
I analyzed each of the pages and came up with ways to improve their UI. Based on the feedback from some of the users and the sources of inspiration, these are the principles I based my design decisions on:
- Simple, Clear Interface: Maintaining clarity and simplicity in the user interface is key to user success and user satisfaction. Clarity allows users to understand what we are trying to help them achieve. Users should understand the message we are trying to convey and the actions they can take within the first few seconds of going through the app.
- Flexibility: The platform will continue to evolve, more features and functionalities will be added. As a result, we needed a flexible interface. One that supported the existing features and would accommodate new ones. Often, the route to flexibility is through simplicity.
I created a user flow for the platform.
I sketched out wireframes of the interfaces using a pencil and paper.
Due to time constraints, I had to move from sketches to high-fidelity design. Keeping in mind the use of the brand colors, I came up with high-fidelity designs and prototype of the new design I had in mind. Here are the newly improved designs. I designed these using AdobeXD.
Here is a link to the interactive prototype video of the new Adrenaline platform.
Illustration & Iconography
Icons communicate actions and meaning in UI design. For this project, I used some free icons from fontawesome.com. I chose these icons because they are clean, simple and easy to implement by the front-end engineer.
While designing the login page, I used illustrations from https://undraw.co/ to depict the meaning of the adrenaline platform.
I tested the new design with the users and asked them for feedback. The reception was overwhelmingly positive. I asked them how much they liked the new look, and on average they gave it 8 out of 10.
Here’s some user feedback:
- Today, I started using the new UI and so far no troubles at all. Thank you! Great work!
- It looks a lot cleaner. Lots of whitespace.
- OMG! I never knew this platform could be nice like this o
- I like the way the create campaign page was designed, I can see all the campaign types at a glance.
- Doesn’t look like it’s is outdated anymore.
- I love the illustration you used to depict the meaning of Adrenaline.
- Finally! The loader looks so much better.
- Looks clean, but I am always a little nervous about change and not being able to find something.
After deployment of the platform, there was a 80% increase in usability and accessibility compared to the previous design.
There is no mobile version of this platform for now as the Admins that use the platform use the web to access it only in the office environment.
The next steps would be to design an Adrenaline mobile app where super admins can approve and decline campaigns and carry out other functionalities as they come.
Design/Prototyping Tools: Adobe XD
Handoff Tool: Adobe XD
We don’t think we’ll be making another major redesign of this magnitude for a while, but we will continue to evolve and polish what we have. We’ll add new features and tweak styles to ensure affordances are clear. Design is never truly done!
What I learnt from the process
This project has given me an opportunity to learn about designing dashboards for quick consumption and deep insights.
The key learning for me was that I should have done the low-fidelity wireframes before moving to high-fidelity designs. I faced so many back and forth and had to make changes directly on the high-fidelity designs. Having a low-fidelity wireframe would have reduced the back and forth and made it easier to make corrections, because more than the look, I would be concentrating on functionality.
This project has shaped my design thinking process and I look forward to writing about other projects in the pipeline.