Roomster

UX Internship summer 2019

OVERVIEW

With an initial idea of helping people with mental disorders get better treatment, this project explores all the aspects related to mental disorders. Starting from the very basics of understanding mental disorders, focusing on Anxiety, the research delves into treatment and technology used in the healthcare industry. Apart from the literature survey, input from psychologists is taken multiple times during research and product development stage to strengthen the design direction and output based on the need of the industry.

WORKING

Explain Listing creation, and overall information architecture of the app.

DATE

June 2019 - Aug 2019

MY ROLE

• Defined and validated product features for a new version of Roomster to be launched around Dec 2019 for its 1,000,000+ user base through collaboration with cross-functional product teams including managers and engineers.

• Designed and iterated web and mobile wireframes to prioritize content, simplify user task flows and maintain consistency across platforms.

• Defined and maintained a cohesive design system, visual language and component library to achieve consistency and responsiveness over different devices and platforms for android, iOS and web.

• Designed UI screens, transitions and micro-animations for engaging and seamless user experience for both android and iOS.

DESIGN PROCESS

EMPATHISE + IDEATE

DESIGN

User Testing

WireFraming

Design System

iOS UI

Android UI

Motion Design

Email Strategy

EMPATHISE+IDEATE

USER TESTING

During the  first few days of my internship, we conducted usability tests on existing paper wireframes to better understand the user's thought process while they complete a given set of tasks.

WIREFRAMING

After analyzing the data and feedback we got from user testing, we created a comprehensive list of changes and redesigns/ideations that were required to further refine the wireframes. As 70%+ users were using the product on their mobile phone, we were adopting a mobile-first approach, which we later adapted for web too, once the designs were finalised.

Once the wireframes were internally finalized by the design team, we printed and arranged them on walls to further the discussion with other teams including development, management, and the company's CEO and CTO. This approach allowed for detailed discussions to the smallest details. We used sticky-notes to paste comments and discussion outcomes through the process.

Bottom Navbar

 

Listing creation is an important aspect of the Roomster product. While refining the flow, we had to decide whether to keep the bottom navigation bar on screens to maintain consistency, or to remove it during the process.

Research shows that percentage of user's completing a specific process was higher when the bottom (or top) navigation was hidden. Similar UX pattern is described in the iOS Human Interface Guidelines, which states the navigation may be hidden when: 

• It’s critical to get the user’s attention

• A self-contained task must be completed—or explicitly abandoned—to avoid leaving the user’s data in an ambiguous state.

 

Hence we strategically removed the bottom bar from various process and screens to make the interaction easier for the user.

NEED OF A DESIGN SYSTEM

But design doesn’t scale easily. Efficiency doesn’t emerge from thin air.

ATOMS

But design doesn’t scale easily. Efficiency doesn’t emerge from thin air.

MOLECULES

But design doesn’t scale easily. Efficiency doesn’t emerge from thin air.

USER INTERFACE DESIGN

NEED OF A DESIGN SYSTEM

But design doesn’t scale easily. Efficiency doesn’t emerge from thin air.

MAIN TASK FLOWS

But design doesn’t scale easily. Efficiency doesn’t emerge from thin air.

MAIN TASK FLOW 2

But design doesn’t scale easily. Efficiency doesn’t emerge from thin air.

OTHER SCREENS

But design doesn’t scale easily. Efficiency doesn’t emerge from thin air.

ANIMATIONS

But design doesn’t scale easily. Efficiency doesn’t emerge from thin air.

@2019 Shashank Jain  |   sjain@utexas.edu