SaaS UX

September 26 2018

Custom How-to-ride Tutorial

A feature in Lime’s internal tool that allows different markets to customize their own onboarding experience.

Project Scope

A project for Lime’s internal tool

My work: Designed the whole feature for the internal tool.

Team: Core Product Team.

Problem

How can we accommodate user compliances for different markets?

Our how-to-ride tutorial currently cannot be customized per region, and the content is hardcoded.

Several cities have specific road rules, such as certain required parking areas where scooters should be dropped off, or specific road types that users can ride on (e.g. most cities prohibits riding on sidewalks while Denver requires riding on sidewalks).

Understand the Problem

What problem does the current tutorial have?

Currently, we only have a version of the how-to-ride tutorial that is designed for the scooter market and only accommodates the most general traffic rules.
As Lime is expanding to new markets, there is more fleet combination(scooter focused, mixed fleet, bikes only etc) and more traffic rules to comply.
The tutorial part is a big talking point when Lime is dealing with local officials. Our product team has received a lot of requests to have a dedicated tutorial based on the region.

*The new onboarding experience has been designed to have a standard pattern, which is scalable for all kinds of requirements.

How-to-ride Tutorial

What content needs to be included in the market?

Based on the market requirements and fleet types. We figured that there are:

scooter-only,
bike-only,
scooter and bike,
ride-on-sidewalk versions

for now and potentially some other content in the future.

Target Users

Who is going to use the customized tutorial?

Local Ops

Lime has local teams based in different markets who are in charge of local settings. Thus it would be reasonable to have this feature in the internal tool.

Central Ops

Operation team at HQ. All the available content should be configured by the central ops team. Thus there should be a separate feature in the internal tool for central ops to configure content.

Design Goal

What do we want to achieve?

Central ops: configure and control all content.

Local ops: can set up their own content and local rules based on their market requirements.

Proposed Solution

What will the feature be able to do?

There will be two features in the Internal tool:

For central ops:

Configure content(Including text and animation)

Configure Tutorial Pages

Comments from Engineer

Attach more properties to one animation group will help get more flexibility.
Reuse some UI from other features in the admin tool.

Comments from central ops:

Easy to use, probably need more instructional text.

Refined Design for configuring animation groups

Local ops:

Support multiple versions of tutorial contents and allow setting of a tutorial version to show per region/sub-region.

Local Rules page: each region/subregion can have one custom “Local Rules” page that will be displayed as the last screen in the tutorial.

Select tutorial based on the market

Comments from Engineer

Attach more properties to one animation group will help get more flexibility.
Make region information more obvious.

Comments from local ops:

Needs some explanation for how the result will be regarding the setting up the customized rule.

Refined Design for customizing how-to-ride tutorial

In Mobile App:

The combined content of the tutorial + local rules should be displayed 1) during the trip start flow on the first ride and 2) can be accessed via the banner as the “How to ride” in-app deep link.

May 4 2018

Fohlio Client Approval

user SaaS UX

Homepage

Custom Tutorial

Client Approval

Asset Library

Client Approval Workflow

A workflow that helps interior designers get all product specifications approved by clients.

Project Scope

A project at Fohlio Inc.

Background

What’s Fohlio?

When interior designers are creating a new designer, he needs to create product specifications to communicate all design details with clients.

Fohlio is a web app that helps streamline designer’s day-to-day processes and helps to make them more efficient. It’s the fastest way to create the product specification.

Interior Designer

Design scheme

Client

Problem

Product approval process is not clear

A designer puts product spec sheet together with other materials such as renderings, technical drawings in a slide deck and gets feedback from clients through a presentation.

However, both designers and clients are having a hard time keeping track of products in the product spec sheet.

Opportunity

Improve the efficiency of the approval

Improve the efficiency of their current workflow by creating a new feature in Fohlio that helps designers and clients with product approval workflow,

Target Audience

Who uses this feature

Primary User: Clients

Range from homeowners to large corporations.
Instruct interior designer on the design scheme to fit their needs.

Secondary User: Interior designers

Projects range from simple indoor and outdoor home environments to hotel lobbies and lavish mansions.
Create indoor spaces that satisfy the client’s needs for aesthetics, safety, and function.

Context and Needs

What information users need

Context

When designers have specified products with a spec sheet, he needs to get feedback and approval from clients.

Client Needs(Primary user)

Project info: project project name, document version name, issue dates, table of content, general notes.
Designers’ info: designer’s company logo, name, contact info.
Actions: View all item information. Approve and comment all items

Clients’ info: contact info.
Project Info: visibility of items for the client, approval status of items.
Actions: Alter the visibility of content. Get notification about the approval status.

Designer Needs(Secondary user)

Clients’ info: contact info.
Project Info: visibility of items for the client, approval status of items.
Actions: Alter the visibility of content. Get notification about the approval status.

Design Goal

A feature facilitating approval process

To design a feature that designers can use to have clients review all the contents they need and go through the approval process as easy as possible.

Design proposals

Workflow around product specification

Designers specify with real products and get client feedback and approval on real products. Then designers make changes per client feedback and note the change orders.

User Workflow

Designer User Flow

Client User Flow

Design Proposal 1

A separate page for approval workflow where clients can make comments and approve items.

Pros: All information and functions are clearly presented in different sectors.

Cons: less consistent with other parts of Fohlio. Require much more engineering resources.

Design Proposal 2

An add-on feature that helps clients approve items and notify designers.

Pros: require a few engineering resources. More consistent with Fohlio itself.

Cons: the list is overwhelming and less scannable.

Design Decision

After testing with users and communicating with product manager and engineer, we decide to make it an add-on feature that is incorporated into the current web app.

Designer End

How a designer share a project with clients

select which project to share
set up designer’s logo
select clients’ access
sent a text invitation through email to the client

Client End

How a client approves items in different views

select items
click ‘Approve’
status of items get changed
click ‘Notify designer’ to send an email to the designer

Grid View

Table View

Final Design

After some iteration on the prototype, I created the final design to cover every detail of the client approval process on both sides of designers and clients.

Designer share the project with client

The designer goes to the sharing page and set up the logo, access and send a text invitation to the client’s email. When the client clicks the link, it will automatically generate a private account on the server without client registering manually.

Client approves items

The link in the email takes the user directly to the grid view. By selecting items and click approve button, it will change the status of item, and the data will be changed on both sides of the designer and the client.

Client Approve Items in Grid View

Client Approve Items in Table View

First-time user notification

When the client uses the approve feature for the first time, it will pop up a notification telling the user to click ‘Notify designer’ button on the navigation bar to send an email to the designer.

First-time User Notification

Client send a notification email to designer

When the client is done with the approval process, he/she click ‘notify designer’ button and confirm to send an email to the designer. The email includes information about the number of approved and disapproved items and the link to the project on the designer’s account.

April 27 2018

Autodesk Asset Library

user SaaS UX

Homepage

Custom Tutorial

Client Approval

Asset Library

Asset Library for AutoCAD

Design A feature in AutoCAD that leverages machine learning to help users find existing content more effectively.

Background

What’s AutoCAD?

AutoCAD is the most ubiquitous Computer-Aided design(CAD) software. It is basically a drawing tool that helps people create 2D and 3D graphics.

Project Scope

Internship project at Autodesk

My work: Design and prototype the solutions, test them with AutoCAD customers.

Team member

Problem

How can we reuse content in AutoCAD more effectively?

When users reuse content from previous files, they always have a hard time finding the content they need.

Target Users

Who has the problem of content reuse?

We combined survey results and AutoCAD customer data to understand who the largest addressable market is and to identify a person to conduct our design and testing around.

Design Goal & Ideation

How can we help users reuse previous content more effectively?

After clearly defining our target users, our design goal is to aid AutoCAD users – like Stewart – to reuse they know they’ve made before but cannot find.

1. Understand the problem

We have two types of users, the CAD manager, and drafters. CAD managers are people who create standard contents and maintain those contents. And drafters who use those contents, and edit contents from the shared library.

400+ repondents

In order to understand the pervasiveness of each problem and gather some more information about the facets of each problem, we sent out the survey to AutoCAD customers and get more than 400+ respondents.

We prioritized the problems we wanted to solve and narrow down our focus on pulling content from shared library.

2. Sketch ideas

Tuesday is about solutions to those HMW problems. This is where we came up with the ideas that will become building blocks of the prototype that we’re going to test later. LUMA Idea harvest, Mockuptionary, sketch are the methods we use to come up with ideas.

3. Make decision

on Wednesday, we used structured processes to move through, make quick good decisions, with lots of input. After reviewing the ideas in a structured evaluation process, we made the call and decide to move forward with a mix of ideas of allowing users to migrate users’ existing content to the library, automatically classify content, and search content by text.

Migrate

Reorganize users library

Classification

Automatically label items when adding content

Search

Enable users to search for content

4. Prototype

On Thursday, we build a prototype that simulate the real experience of Autocad users regarding searching. Here, users are working on a layout drawing, and he wants to find a desk to put in his drawing.

5. User Testing

On the last day of our design sprint, we went out of the office to visit our customers on-site. We interviewed 6 users at 3 companies, tested them with the prototype we built for their feedback.

All 3 have maintained libraries.
Different field has different naming specification regarding search by text.
The content users want displayed with their search results varies greatly

Tested a prototype with 6 subjects at 3 companies(Architecture, Civil Engineering, AV systems )

All 3 have maintained libraries.
Different field has different naming specification regarding search by text.
The content users want displayed with their search results varies greatly

Product Development Cycle

How can we further develop our idea?

In order to leverage the user feedback we got to further develop our idea, we planned 3 cycles of Scrum cycle and refined our prototype by more user testing and interview.

Final Results

The final demo allows users to easily migrate their existing content to the library, and categorize them through machine learning algorithm and search content by text easily.

Integrated final Demo

*Due to confidentiality reasons, only thumbnails of those prototypes can be presented.