We worked with a consumer robot company to design a version 2.0 app for their robotic vacuum.

THE PROBLEM
The company was expanding their product roadmap to encompass a new suite of robots that work both inside and outside of the home. The interaction model of their app at the time was designed to control only a single robot, so they asked us to help them design a new approach that would allow users to control a fleet of robots that teamed to work together. 

Additionally, the company’s internal design team did not have a defined visual system for their digital products or a dedicated visual designer. They needed a new system that aligned with the look and feel of the marketing brand guidelines and would be easy for their interaction design team to implement and expand upon.

THE TEAM
Creative Director
Senior Interaction Designer
Senior Visual Designer (myself)
Interaction Design Intern
Motion Designer
Project Manager
Designed at Smart Design.

The Outcome

We delivered a final design system that scales to allow users to easily manage and maintain multiple devices with a modern UI that embodies the company's brand. Their internal team was excited about the detailed style guide and felt confident that they could build and extend the system that we delivered.

In our final round of research we found that the interface aesthetic was perceived as simple, modern and clean by majority of participants. 9 out of 9 were able to navigate the app easily and perform all task flows that we tested. 
 

My responsibilities

My responsibilities included: designing the app’s visual system for both iOS and Android, delivering final assets, annotated files, sketch library and style guide, leading visual design presentations to the client and design exercises during the client workshop, creating moodboards and key screens for 3 visual directions to test in research, creating prototypes in invision, working with the motion designer to visualize micro-interactions, working alongside the interaction designer to do secondary research and participating in user research sessions.

Client workshop to align on the vision

To kick off the project, we conducted a workshop at the client’s office with their core team members and key stakeholders to gain a deeper understanding of the product KPIs, user archetypes and behaviors and UI objectives.

I planned and lead the brand alignment exercises to gain an understanding of the client's expectations and vision for the UI. 

Research & Prototyping

We conducted two rounds of research. The first round focused on qualitative research, gathering impressions on overall UX structure, features, content, hierarchy, wayfinding, nomenclature, interaction models and initial UI concepts. The second round focused on quantitative research, validating the refined app functionality and task flows. 

ABOUT THE PARTICIPANTS
We conducted 60-minute sessions with eight participants in Round 1 and nine participants in Round 2. Participants ranged in ages from 30 to 50 and lived in NYC, Los Angeles and Chicago metro markets. We required that they either owned a robotic vacuum or were currently in the market to purchase one. 

TESTING 3 UI DIRECTIONS
Building on the company's brand palette and my learnings from the client brainstorm, I created three distinct visual design directions for the new app to review with consumers in the first round of research. In each variation, I explored different approaches to UI elements such as button styles and sizes, color systems, type styles and hierarchy, motifs, icons, and card styling. Each direction comprised of 3 key screens and were based on preliminary wireframes created by the interaction designer. 

VISUAL DESIGN FINDINGS FROM RESEARCH
After synthesizing our research we determined that the 2nd direction was preferred by the largest number of participants. I used this direction as the basis for exploration and refinement moving forward. We learned that participants liked the larger clean buttons, thought the dot pattern was a helpful status indicator, and overall felt the direction looked simple, clean and premium.

Refinement

After research I iteratively refined the visual design system, exploring various color, navigation and layout treatments based on user feedback and client directives.

The interaction designer and I were refining the UX and UI simultaneously, which made the process very collaborative as any updates that either of us made affected the other’s track of work. 
 

An extensive and flexible UI system

Once the system was finalized, I created a detailed style guide that documented all elements and states to help the company's internal team build and extend the system to new features. The guide included details and specifications for both iOS and Android. We also delivered a clean sketch file with the final interface designs and an organized symbols library. As an added bonus I also created a component sticker sheet for the designers to be able to easily grab UI elements.

Key Learnings

LEVERAGE SKETCH LIBRARIES
For majority of the project I was working in tandem with the interaction designers on portions of the same app. Utilizing sketch libraries and symbols largely helped keep our efforts consistent as changes occured.

ONE OPERATING SYSTEM AT A TIME 
 I learned that it was helpful to focus my design efforts on one system first - this case being iOS. Certain functionality such as a time picker may leverage the native OS, but majority of the branded experience were custom builds that could apply to both. 

THINK MODULARLY
We used a componentized approach which allowed for scalability and eliminated the need to deliver a design for every screen. This way the developers and interaction designers had a library and styles to pull from and build onto when creating new screens.