Juhi Chitra
Product Designer
t.png

Task Spotting

How I redesigned this Dubai-based mystery-shopping app for iOS and Android. 

 

Client

TaskSpotting is a Dubai-based app that pays consumers for completing tasks (like surveys, mystery shopping, retail audit) created by brands.


Role

I was the only Designer on this project. I worked with Karim Ali, the CEO, and his product team.


Brief

Make the app easier to use, the experience less cumbersome, make the app feel lighter (look-and-feel), add new features based on demand.

 
 
ts-mock1.jpg
 
 

Process

The existing version had numerous usability issues, plus, since we needed to update the design language as well as change the structure, we decided to redesign the whole app. Since most of their user-base is on iPhones, we took an iOS-first approach and later adapted the designs for Android L.

  1. Re-evaluate the information architecture and navigation, especially in light of new feature-additions.
  2. For each section of the app, start with rough-sketching ideas, then redraw wireframes on paper, get them reviewed.
  3. Start exploring in Photoshop, get a few options reviewed, finalise one and iterate.
  4. Polish the screens and build interactions, prototypes where needed.
 

 

Existing Product

The first version of the app (before the redesign) was the MVP version. It had many major issues—the navigation was very confusing, the interface looked quite dark and heavy in places, the experience of completing a task involved unnecessary steps and was far from seamless, popups were used liberally.

 

Some screens from the old version


 

Information Architecture

This was the first step of the process. The existing  app used a hamburger menu for main navigation, which resulted in significantly low visibility for the various sections. Moreover, with the addition of several new features, the hamburger menu would have become too crowded.

Initially, I divided the app into five sections—missions, mission groups, completed missions, profile, and menu. 

 
 

Initial sketches for the structure of the app. Click to enlarge.

 

____

Mapping the flow

But after deliberating more on what features should form the core of the product and which would be used most frequently, we combined missions & mission groups, and profile & menu, and settled on these four sections—Missions, My Missions, Rewards and Me. 

 
 
flow.png
 

Final architecture

 
 

____

Navigation

On iOS this conveniently translated into four tabs at the bottom. But for Android I decided to keep the tabs for quickly swiping between list-view and map-view. Instead, main navigation was placed on the Action Bar. 


Tabs on iOS


Navigation for Android

 

 

Paper Wireframing

For each section of the app, I would first sketch my ideas roughly, then redraw the flow and each screen clearly, these would then be reviewed with the Product team. After this I moved on to high-fidelity mockups and incorporated the feedback from the wireframes directly at the mockup stage.

 
 
ts-notes3
 
 
ts-notes1
ts-notes2
 

Wireframes and notes

Wireframes for review for the five sections within ‘Me’ tab


 

Mockups

Once at the mockup stage, I tried out different ideas quickly for each screen, got it reviewed, iterated, reviewed again and so on until the screen is polished.

 
 
 

Some pages from various designs sent for review

 
 

____

High-fidelity Mocks

 

Some of the final mockups


 

Interactions


Marvel Prototype

Towards the end, I made a Marvel prototype to better see how all the flows came together.

This is a live embedded prototype. Try it out, click anywhere on the mockup to see what sections are linked.

Some screens used in this prototype went through further iteration.

taskspotting-ios-splash-login-ui-animation.gif

Login animation

Made a quick gif to show the transition between the splash screen and the login/signup screens

 

 

Material Design

Adapting the iOS designs to Android wasn't very difficult once the navigation was finalised. I wish I could have some more time on this and come up with some delightful interactions, but the deadlines did not permit. Here's some of the final polished screens for Android:

 
taskspotting-material-ui

 

Challenges & Learnings

Short timeframe

Since the whole project was finished in six weeks, I really had to push myself at times. From the beginning, I had to create and follow a strict timeline where pecific number of days were allocated for each section. While we covered almost everything we wanted to, we sometimes had to compromise.

Eg., even though we went through several iterations for the mission card, I  still feel it could have a better format with lesser cognitive load.

 
 

Some iterations of the mission card

 
 

____

Working remotely

I worked from Delhi and the client was based in Dubai. We relied completely on email, chat and Skype.

Because I couldn't explain my designs in person or sit with the developer, I learned to communicate very clearly through presentations, specs etc.

____

Process

I wish I could have come in earlier in the process and stayed till launch. As such, I was not involved in the user-research and development stages.

 

 

Final product

If you're in the UAE, you can check out the iOS app on the AppStore. The Android app has not been updated with the redesign yet.