cubo banner final-01.jpg

Cubo

Cubo - One-stop destination for all your mobile notifications

Cubo

One-stop destination for all your mobile notifications

Overview

Cubo (means hub in Spanish) is an app that saves time and frustration for Android mobile users. It removes the pain of dealing with and sorting through an overload of notifications with an intuitive user interface. My role was to find an unmet need, design a solution and test it.

NOTE - This prototype was made considering Android 6.0 (Marshmallow) in mind

 Overview
 

Process

 Design process

1. Needfinding

User Interview

I interviewed three people over the phone. I did this to learn about their habits around dealing with notifications in an entire day. Also, to learn how the time of the day during which they check their notifications influences that. I used the insights from the interview to identify breakdowns (shown below) i.e. design issues with the way notifications are rolled out right now.

  Breakdowns

Breakdowns

2. Ideating

2.1 Brainstorm 

I brainstormed specific opportunities for design innovation by considering the breakdowns from earlier interviews. I articulated them as user needs. These opportunities went on to serve as potential seeds for designs.

  Design opportunities articulated as user needs

Design opportunities articulated as user needs

2.2 Point of View  

I spent some time writing a point of view. I ensured that the problem/opportunity is a deep user need rather than a surface need.

The way notifications are dealt with today can be changed. Make the most out of notifications by ensuring we never miss out on one.

2.3 Inspiration Board

I worked on making an inspiration board. It included verbal and design inspiration. I did this to learn from what’s out there and understand the existing landscape.

  Inspiration board

Inspiration board

2.4 Storyboard

I had now understood the existing landscape. I leveraged it to come up with two design ideas that addressed the Point of View I had written before. To illustrate the design ideas I used a storyboard for each one.

Storyboard 1

Storyboard 2

3. Prototyping

Paper Prototype

I figured out my information architecture and functionality by sketching two paper prototypes. Each one instantiated a different storyboard. 

Prototype 1 - It worked on the design idea behind Storyboard 1. A user could access all notifications irrespective of when they're received or dismissed. This app ensured that user didn’t miss out on any notification and access them as per their convenience. How did it integrate with the traditional way of checking notifications? First, you would select your favorite/important apps. Now, let's say you dismissed notification(s) from such apps when you first received them. Cubo would then send you a reminder to check those notification(s). One could also open Cubo themselves to check any notifications.

Prototype 2 - It was based on the design idea behind storyboard 2. In the app, the user could select categories and apps from which they want to receive notifications. This gave them a better control over their notifications and their incoming flow. This also ensured they never “accidentally” missed out on their favorite notifications. That's because the “overload” of notifications would be prevented, thanks to the app.

4. Testing

Heuristic Evaluation

I identified potential issues with the prototypes. I performed a Heuristic evaluation of my prototypes by using Nielsen’s Heuristics. I then distilled the evaluation into a list of concrete changes I wanted to make (not shown). Furthermore, I decided to work further on prototype 1 as I found it more useful than prototype 2. That's because it truly solved the problem of "notifications overload". It provided more control for a user over their notifications via filters. It also ensured that user could still access notifications later if they chose to do so. Prototype 2 provided no way to do this. 

Aggregate evaluation

5. Prototyping

High-fidelity interactive prototype

I added more details to the prototype by designing the high-fidelity version of it using Adobe Illustrator. I needed to set up a navigational skeleton for usability testing. So, I made the prototype interactive using InVision.

Check out the first interactive prototype by clicking the button below!

  A quick look into the first interactive prototype

A quick look into the first interactive prototype

6. Testing

Usability Test

I tested the usability of the prototype (especially its core functionality) to identify points for improvement. I developed a testing protocol. I then asked a couple of potential users of the app to test my prototype and observed them while using it. Later, I reflected on my findings from the usability study to come up with a list of potential changes.

A snapshot of the usability test

List of possible changes to be made

7. Prototyping

Redesigning the prototype

I redesigned the prototype to resolve a couple of breakdowns I identified in the usability test. (Due to the inherent limitations of an interactive prototype, I could only incorporate these changes)

  Changes made in the redesign

Changes made in the redesign

8. Testing

A/B Test

I subjected the original prototype and the redesigned prototype to a comparison test. I did this to check the effect of the manipulation made in the redesigned prototype. Also, to identify general potential revisions. I conducted an online A/B test with 4 participants over UserTesting.com.

A/B screens of the 4 participants

Results related to the A/B screens

  Overall results

Overall results

Check out the final prototype by clicking the button below!

 

Outcome

 Outcome, learnings, next steps