Mar 2016

Interning at Roposo

Over the course of my last semester in college I worked for a startup which is leading the bandwagon of coolest startups in India. Roposo, which started as a fashion discovery platform has now transformed itself into a full fledged social network.

I worked on the redesign of several screens of the app. The Notification and Search screen i redesigned got pushed to production. I also worked on the brand new Video Capture feature and worked on optimizing the flow through which users publish content on the platform.

The notification screen

The redesign of the Notification screen was my very first project at Roposo. I was asked to identify the problems with the current design and come up with well crafted alternatives which were visually appealing and also served the purposes of a notification system.

The problem

For a social network, a notification systems is crucial. They help the users have a real time experience of the app and in the process, build a sense of community on the platform. A feeling that “I” as an individual is connected to other people who want to gain insights to my life ,appreciate it and express their own thoughts on it.

The Information Architecture for the notification screen
The Information Architecture for the notification screen

The process

I enquired about the different types of notifications which the platform publishes and built the information architecture for it. I realised how the current design did not differentiate between all the various types of notification, which was a problem.

I wanted the users to suffice the jist of all the interactions they have on the platform, just by glancing the notification screen. Therefore, divided the whole notification panel into 5 categories: Likes, comments, mentions, follows and product discounts.

I also observed that the notifications could be variable depending on the time the user checks them. This led to the idea of aggregating similar types of notifications. So, six likes on the same image should be presented as one notification instead of six different ones. This would help reduce the cognitive load. Incorporating all the learning and research I came up with a couple of redesigns which led to more iterations and refining of the screen.

The notification screen
The notification screen

The icons and profile images are at the heart of the experience of this new design. The icons act both as a signifier and an affordance. The icons differentiate between the various types of notifications and are inspired by the Roposo Hoop to maintain consistency for the brand.

image

The design also differentiates between single and aggregated notifications.

single notification element
single notification element

aggregated notification element
aggregated notification element

The information architecture for single and aggregated notifications was an interesting problem to solve. Mostly because the two had to be differentiated but also not to a point that the users start perceiving them as two different components. At a very basic level, Roposo is a social network. Pertaining to this ideology I swapped the notification icon with the profile image for the aggregated style. This would let the user know exactly which category does this notification belongs to and what level of traction has their post garnered. The profile images of the commentators/likers has been added to give the user a feeling, that they are a part of a larger community which thrives on interaction and appreciation of fellow members.

Optimising the 'publishing content' flow

Every social network is only as active as the people on it. People are active when they are incentivised to share their lives with other people. That is why content creation is an important aspect for the platform. My most challenging and interesting project at Roposo was to come up with alternative designs which optimised the content creation flow of the app. I explored ways in which publishing posts could be optimised and made so hassle free, that it actually turns into a habit.

The process

I set the wheels in motions. From the very first glance at the problem, I understood that this design would have to be made to scale, keeping in mind the number of new features Roposo plans to launch in the near future.

Basic flow for the new flow
Basic flow for the new flow

In a very thought provoking brainstorming session with the co-founders and product managers we realized that instead of competing with other similar apps such as Facebook and Snapchat, why do we not build an alternative to a native camera within the app.

Basic flow for the new flow
Basic flow for the new flow

A design which could be an alternative to the the native camera on the user's phone would incentivise them to use the inbuilt Roposo custom camera, over the native one. This would in turn lead to more quality content being generated on the platform.

Initial wireframes for the publish a post flow
Initial wireframes for the publish a post flow

There were a lot of features which needed to be added but the real estate was limited. After several iterations with the wireframes and some mild user testing with each paper prototype, the custom camera started to take shape.

Old flow for accessing camera
Old flow for accessing camera

New flow for accessing Roposo camera
New flow for accessing Roposo camera

After another round of iterations and testing, a high level diagram of the whole flow was finalised. The user testing with the paper prototypes followed the Wizard Of Oz Technique, wherein I would simulate the actions of the app by placing the various prototypes screens as the users interact with them. Throughout the tests I checked how well my designs put up with the principle of Direct Manipulation. Here are the points which I kept in mind while observing the users interact with the interface:

  1. How well were the users able to determine the functions of the interface
  2. Determine mapping from intention to physical movement. How did they do what they wanted to do with the UI.How easily can they go from planning to do an action to actually doing it.
  3. How easily can they execute their plan.
  4. Once the plan is executed, how well can they tell which state are they currently in.

Keeping these key points in mind and the fact that to easily learn and interact with the app, the user must be able to understand the progression of each step they take, I built a high fidelity mock-up in PIXATE.

Image and video preview screen
Image and video preview screen

The location of each element is in sync with the mental model, the users are predicted to have. The Add location button remain stationary in the status bar as it is not variable depending on the image/video in the post I am editing. However, the add caption button is so placed to let the users know, that individual images/videos can have different captions within the same post. Taking advantage of transitions, as the users swipe between the different images, the add caption moves in respect to their images.

The new flow lets the user publish their posts in 3 taps as compared to the 7 taps previously. I decided to rely on transitions to indicate state changes. Transitions were a good way for the interface to give consistent feedback to the users. Due to the impressive prototype and positive feedback from the initial user tests, this project is being considered as a pilot and would be entering a phase of more varied user tests and iterations.

I also worked on other projects which included the redesign of the search screen, the interface of the brand new video capture feature and adding subtle micro-interactions to make the app stand out.

The visually revamped search screen
The visually revamped search screen

Video capture screens
Video capture screens

Micro-interaction to introduce the "Add Effects" feature
Micro-interaction to introduce the "Add Effects" feature

Oh! also ended up adding the roposo hoop in our slack. The team seemed to have enjoyed it , but didn’t really have an idea what do with it.

image

Apart from the really interesting work, Roposo has a cool and chilled out culture. The people are amazing, at the top of their game in their respective fields but humble and ready to assist you in every manner possible. Working at Roposo never felt like “WORKING”, mostly because the whole atmosphere was so light and full of energy. I had the time of my life at Roposo, from those Table Tennis matches with the iOS team to the crazy parties.

Have an awesome experience in the last semester of college. CHECK. 🙂