Roshi

UI and UX Design for a B2B App

Full-Time Employment

Skip to section

Overview

Roles

UI and UX designer
Marketing designer

Tools

Sketch
Illustrator
Zeplin
WordPress (Divi)
Mailchimp

Deliverables

User flows
High-Fidelity Mockups
Style Guide Specs
Icons and Illustrations
Graphics for Social Posts
Web Pages

Timeframe

Jan 2020 - present

App Navigation and Screen Flows

Roshi is built on a complex framework of calculations and dependencies based on user-entered data. I work with the Product Manager, Chief Technology Officer, Software Architect, and CEO to develop user flows for new features and modules, with a focus on simplifying tasks for our customers. I create and present draft designs to the team and help define technical requirements.

Mobile Navigation

Design Problem

The app navigation menu was initially designed for desktop, and users noticed that it did not translate well to mobile.

Solution

I redesigned the mobile navigation structure, introducing a bottom nav bar and reorganizing features into a flat navigation structure. Now the navigation behaves more like a mobile-first app.

Before

After

User Workflows

Design Problem

Users found one module to be too long, with too much data entry and unclear terminology.

Solution

I did a full sweep of the user flow and consolidated the number of screens by 30%. I set fields to auto-populate where possible to reduce the need for manually entering data, and aligned all terminology across the module. Now, customers that previously avoided using the module due to its complexity have begun to use it in its streamlined form.

Example Screen: Before

Arrows point out some of the issues I found throughout the original screens.

Example Screen: After

In addition to some style updates, all issues above are addressed.

User-Driven Onboarding

Design Problem

Roshi began with a small number of customers, and was therefore able to provide “white glove” onboarding, where Roshi Customer Success configures customers' system and imports their data. As we take on more customers, we will need a streamlined onboarding process that customers can complete themselves.

Solution

I worked with the CTO to develop screens and step-by-step graphics for a new, user-driven onboarding sequence. This feature greatly reduces the burden on Customer Success and enables Roshi to take on an increasing volume of customers.

Primary Screens in a Happy Path Onboarding Flow

While the details are pretty technical, the main point is that users can now configure their Roshi system and set up data integrations themselves thanks to a customer-facing onboarding flow.

Style Guide and Component Library

When I joined Roshi, the company had a small design library containing a logo, color palette, brief style guide, and MVP screen designs. There was no central repository of reusable app components. I took the opportunity to build a comopnent library and create a more detailed style guide. I also redesigned several components for improved usability, including fields, filters, and the calendar date picker.

Component Library

Design Problem

The MVP screens and UI components were developed on an ad hoc basis, with no source of truth for the specifics of reusable components. This led to inconsistencies across the app and time wasted tracking down or re-creating designs.

Solution

I made a library of reusable Sketch components, including buttons, icons, mobile navigation, context menus, dropdowns, and all states of the updated field designs. Now, I can provide Development with consistent designs and save time building screens.

Snapshot of Components in Sketch

Fields

Design Problem

The app contains many fields where users enter or select responses. However, the original field design looked outdated and took up too much horizontal space. Customers were frustrated with truncated or overflowing text, which occurred mostly on mobile. (And I was frustrated with how wonky and inconsistent everything looked!)

Solution

I saw an opportunity to use floating labels - which are both more modern and eliminate the horizontal spacing issue. Using Material Design’s floating labels as a reference, I applied Roshi’s style and created detailed specs for each field type and state.

Before

Arrows point out UI issues.

After

All UI issues are addressed.

Style Specifications

I detailed the designs for each field type and state to guide our developers.

Filters

Design Problem

Customers were frustrated with the original filter component, which was clunky, non-intuitive, and took too many clicks to navigate.

Solution

I redesigned our filter component from the ground up, opting for a more expected pattern using categories and checkboxes. The new design requires 3 clicks to complete, whereas the original took 7.

Before

After

Icons

Design Problem

The original icons were created or download on an ad hoc basis, and as a result they were inconsistent in size, stroke width, and style. This required the dev team to maintain page-level CSS for each one, which was time-consuming and only partly solved the style inconsistencies.

Solution

I redesigned all icons from scratch, resulting in a library of more than 70. Now, all icons are uniform in size, line width, and style, resulting in a more polished, on-brand experience.

Before

After

All Redesigned Icons

Marketing Assets

Part of my role is to support marketing and customer success by creating images for social media posts, marketing email layouts, new web page layouts, product shots, and schematic diagrams.