Mobile App for a Communications Platform

Information Architecture | Product Gap Analysis | Feature Recommendation | Wire-framing | Visual Design | Prototyping

clevertbanner.png

Clevert is a mobile first application developed to be the world’s 1st privacy-centric communication platform. This application allows the end users (consumers) to remain anonymous and access posts, tweets, deals published by brands or influencers directly via the application or via social media.

It has 2 sub applications

  • Publisher App - used by brands or influences to create and publish posts (about brand updates, ongoing deals or offers, tweets, etc.) on their Clevert feed.

  • Subscriber App - used by consumers to access, browse and interact with the posts published by the publisher. The consumer has to follow a certain publisher to receive the publishers post in their feed. A consumer can like, share comment or bookmark on a post.

Problem statement

  1. Users were confused about how to use the product

  2. Lack of on-boarding to guide the users and introduce the users to the application and its benefits

  3. Some of the flows were not complete leading to a confusing user experience

  4. There were some major drop off during the beta testing of the app. The data is as shown below
    Total users targeted in beta testing 1 :  1594

diagram of devices.png
diagram for support split.png

Observation

  • Only 31% (392) users of 1264 users who had devices that the app supported followed brands and influencers

  • Out of those only 3 users allowed the mobile notifications from these publishers

The biggest issue was education of the user and on-boarding along with a lot of gaps in the basic user experience.

Solution

Publisher app:
1) Fix all the gaps in messaging for the first time users

  • Missing Onboarding

  • Missing acknowledgments

  • Confusing first time experience

2) In some cases, the flow seems to be broken
3) Ease on-boarding

Subscriber app
1) Fix the gaps in messaging for the first time users

  • Missing Context after being redirected to the app

  • Missing Onboarding

  • Missing acknowledgments

  • Confusing first time experience

  • Content Design for better understanding the application

2) In some cases, the flow seemed to be broken or missing pages
3) Ease on-boarding by setting appropriate context

Here is the Gap Analysis doc created for the existing flow of the app.

Implementation:

Part 1: Publisher app

Step 1: Wireframes of the publisher application
After exploring the first experience of the app I discussed the shortcoming and broken experience with the CEO of Clevert. Post this discussion I started the wire-framing phase as shown below of the main screens focusing on the user flow and the correct information architecture

Step 2: Visual Design
I went on to create a deep visual design of the flows that included every screen need to provide a seamless experience for the publisher.

Step 3: Clickable Prototype
Created a clickable work flow of the app. This helped the developer of the app to know the desired flow and interactions
Hover on the image below and click anywhere to reveal the hotspots.

 
 

Part 1: Publisher app

Step 1: Wireframes of the subscriber application

Use Case 1
First time user, coming via clicking of channel-subscribe link (or QR code scanned using 3rd party QR scanner)

Goal 1:
We need to communicate that the users has subscribed and they will receive offers instantly. then show them a walkthrough.

Walkthrough

  • Keep visiting clevert.me

  • bookmark Clevert.me

  • Save it to home-screen

  • Turn on the push notifications

Goal 2:
Communicate to the user how to manage their subscription.

Goal 3:
Get the users introduced to the application benefits and to take a walk-through to know where to expect the features

Use Case 2

First time user, coming via shared-message

Goal 1:
Walk the user through the app when user receive message from this channel directly.

Goal 2:  
Get the users to a walk-through to explore Clevert - wireframes were same as use case 1

Use Case 3    

First time user, coming directly to the app url

Goal
Get the users to a walk-through to explore Clevert - wireframes were same as use case 1

Step 2: Visual Design
I went on to create a deep visual design of the subscriber flow and the various use-cases that included every screen need to provide a seamless experience for the subscriber.

Step 3: Clickable Prototype
Similar to the publisher App we created a clickable prototype for user testing and development

 
 

Duration: 10 weeks

My Contribution:

  1. Information Architecture

  2. Product Gap Analysis

  3. Feature Recommendation

  4. Wire-framing

  5. Visual Design

  6. Prototyping

  7. Asset generation and post design engineering support

Outcome:

The tool has just been released. We are still monitoring the usage over the coming months.

Learnings:

Data points gathered during the primary beta test of the application helped find the gaps in the product. Also having hands on experience of using the application also made me aware of the user behaviour and needs. These 2 aspects helped me immensely while designing the application.