BACK

Stride

We are overloded with information from all around who deprive us of attention and leave us with little focus. Yet, we would like to catchup with the important news about our favorite icon from business, sports or movies.

I was part of this exciting project to build a simplistic app which delivers the updates with no distractions, accessible in real time and all in one place.


My role

I took 3 responsibilities for this project. It was challenging yet fun playing the key roles for this internal project.



Product Owner

I had to define the problem, fix the scope of the project, set timelines and give the direction for the solution.

Interaction Designer

I had to explore the persona, work on the user journey and flow, design wireframes for the solution.

Visual Designer

I had to design the mockups, detailed design of the solution and present style guides to the developer.

Spandana my colleague, was the iOS developer. Thanks to her efficient programming, we could achieve to plugin twitter and facebook apps and create a stream within 24 hours. Abin was our test engineer.


THE CHALLENGE

Information overload

We resort to social media platforms like twitter, facebook, instagram to get our daily dose of news, updates from our favorite brands or celebrities apart from our friends. However, we get distracted by news about lot more other topics which wastes a lot of our time browsing. It will leave us consume a lot of unwanted information as a side effect. Also, we might have to check multiple apps to grasp complete information about the topic of our interest.

This is a big challenge of regaining our time and attention swimming through the information clutter.

PERSONA

Millenial

Our ideal user is a milennial and who is working. She likes to know about her favorite founder Elon Musk. And tries to know the updates about him every morning before going to work.
She currently juggles between a bunch of apps like news, twitter, facebook, instagram to read what all the sources are reporting about Elon Musk.
She unknowingly ends up spending too much time and misses the early morning train to work. While having discussions with her colleagues yet she feels missed out on one particular update. She ends up digging more from all the unwanted news and wastes more time.

CONSTRAINTS

Applying limits

We wanted to restrict the number of brands/celebrities our user can follow, as following too many people will defeat the whole purpose. Also we wanted to restrict on the number of streams from which we source the news to avoid engineering overhead.


VISION

Simplify

We wanted to make application very simple and usable. The user should be able to find the brands or celebrities original profile easily and not get drowned with all the duplicate ones.
Also, I wanted the interface to be simple with minimal design because I wanted the user focus to be on the information and not have distractive fancy design.

THE PRODUCT

Stride

A simple unified stream of information of your favorite brand or celebrity from multiple sources.

FRAMEWORK

Design sprint

As it was an internal project, we wanted to approach with a very lean method. We followed a design sprint way of solving this problem.
We grouped ourselves into a room (pod) and set up a board to think about the problem, define the user goals, ask lot of questions to each other and be able to come to the solution quickly.
The engineers broke the problem into modules and came up with a working prototype, an MVP. Meanwhile I could work on the user flow, draw sketches and design an interface.

WHAT IS NEW?

Conversational Interface

I was clear in my mind that this application is going to be simple and as minimal as possible. I wanted to maintained a vanilla design language for the app without using many colors.
I wanted the interface to be humane. Like almost chatting with a real person, while signing up and searching for celebrities and following them.

MODULES

User scenarios

After brainstorming and discussions with engineers, I came up with a basic workflow consisting of 6 steps

Login and plugging in social media apps


User flow while login in or plugging social media apps




plugging facebook app




pluggin twitter app


User needs to give access from respective facebook and twitter accounts.
However they have a choice to choose both or only one source.


Searching for brand or celebrities


Searching for celebrity or brand on first launch



Following


Searching for another celebrity and following



Reached limit and unfollowing


User flow when a limit of following is reached




Searching for another celebrity and following




Limit is reached and hence cannot follow more




Option to unfollow existing celebrity when limit is reached



Accessing feed


Viewing feed with video




Viewing feed with an image



Unplugging


Unplugging the app

FINALIZING

Style guides

Being an interaction designer, I rarely got a chance to work on the visual design and provide developers the assets at multiple resolutions. It was very exciting and I learned a lot during this exercise.

Finally, we could complete the app with full functionality, test it with mutliple users and launched on the app store.

It was an enriching experience to work closely with the developers and playing the role of a product owner. I could make many decisions which I didn’t feel not only right but could justify in discussions with the team. It was great to think from the user perspective and no app is good till users love it and own it. We did test it with few users and collected feedback and incorporated into the app.

Specifications for developers



Screenshots from realtime

LEARNING

Dealing with multimedia

When dealing with media, we need to consider the download sizes, internet speeds for streaming etc. In the first iteration, we didn’t optimize for the speed. This was causing an unusual delay in loading the media as most of the users complained. We could rectify it by compressing the images and videos using other formats suitable for web.
Also from the design perspective, I had to create placeholders and micro-interactions till the images or video is loaded.