Uber for Business Dashboard

Role: UX Design and Research

Uber for Business is a travel management platform that enables companies easy ground transportation for employees. As one of the fastest growing verticals within Uber, the team was constantly iterating on our primary touchpoint, the admin web dashboard. Working with the support team and interviewing customers, we learned of opportunities to optimize the interface to better align with admin’s workflow. I redesigned the ‘Trips Page’ to enable new functionality and more useful travel details.

As the platform becomes more robust, we hypothesized an overview page would be a beneficial addition for customers to easily manage their account. I designed three versions of the ‘Overview Page’ that explored different ways to visually display information. In collaboration with a visual designer, we brought two of these into high-fidelity mocks then InVision prototypes. I planned and conducted a study to test validation and concept comprehension, which provided actionable insights for us to integrate into our next design iteration. The introduction of customer research early and throughout the design process has been a valued addition and practice that’s been utilized in subsequent team projects

U4B Web Platform IA

Conducting an audit on the existing features across the Uber for Business platform revealed inconsistencies that frequently accompany a minimum viable product with aggressive timelines. I proposed an information architecture that organized content to align with admin’s frequent task flows and mental model.

Overview Page Concepts

I presented three concepts for the new ‘Overview Page’ exploring best means to visually communicate account information and comparative data. These wireframes were brought into visual design for testing.

Overview Tab Screens

The concept wireframes were brought into visual design for testing.

Overview Page Research

Following the customer research I presented the high-level findings and advised next steps in a deck that integrated clips from the studies to be shared throughout the team.

Trips Page Wireframes

Customer research around our existing ‘Trips Page’ provided actionable recommendations. These were captured in an annotated design document and implemented by the engineering team.

Monthly Billing on Uber for Business

Role: Design Lead

The payment process was a significant pain point for account admins using Uber’s business offering. On top of the usual expensing responsibilities, admins would have to log on to reconcile each trip with their credit card at the end of the month. Recognizing the need for a better customer experience and scalable solution, the team made it a priority to introduce monthly billing. This endeavor required design changes throughout the existing platform as well as new touchpoints and functionality.

While the technical constraints were outlined, the customer experience needed to be worked through and visually documented to communicate across teams and stakeholders. Working alongside a product manager, I created flowchart, system diagram and phase sequencing visual that outlined the mechanics of monthly billing. These were mapped to the customer journey to ensure the development provided a cohesive end experience. I delivered annotated wireframes and oversaw visual design for each phase as the feature progressed.

Ultimately these documents helped explain our vision to stakeholders and set the example for a smooth workflow between design and engineering that was modeled to other groups within Uber. The monthly billing project is projected to have a significant impact on the team’s annual revenue, with a 25% increase of new companies enrolling and 10% uplift in activity from existing accounts.

Monthly Billing Customer Journey

A simple customer journey did wonders when communicating with stakeholders across the organization. It was critical that we distill the underlying complexity into a seamless monthly billing experience and build towards that vision.

Monthly Billing Process Overview

The introduction of monthly billing involved a great deal of back and front-end complexity. By outlining the processes that take place throughout the different stages of a billing cycle, we set a solid foundation for collaboration and across teams within Uber from finance to engineering.

Monthly Billing Flow Chart

The visual flow chart accompanied the process overivew to illustrate the possible paths and edge cases. In many of the technical discussions my role was to ensure the voice of the user be heard and stress the importance of building out a scalable solution and not rely on shortcuts.

Project Phasing Visual

With a better understanding of the pieces required to make monthly billing a success, we could accurately scope the project and prioritize certain phases for release. Breaking down the larger phases into manageable sprints enabled a more efficient working cadence for design and engineering.

Monthly Statement for Uber for Business

Role: UX Design and Research

A key touchpoint in transitioning customers to monthly billing (a project described in the former example of my portfolio), was the monthly statement. To ensure utility for our range of customers, the statement had to balance a spectrum of content requirements from financial controllers to office admins. To gain insight into the billing process, I conducted nimble research with our existing business customers, internal Uber admins, and users that requested this feature through support. Following research analysis I created high-fidelity wireframes that defined the accurate content and information architecture. These concepts were validated with customers to ensure we were providing a solution that fit their business’ processes. I provided art direction as a visual designer created the finished product. The pilot statement has been released with a small group of beta customers and feedback has been extremely positive. Later this year it will be released to business users across the 56 different countries where Uber operates.

Monthly Statement Wireframe

After collecting the critical information needs for admins, finance and legal in a monthly statement, I defined a hierarchy and detailed capture of the edge cases in an annotated wireframe. Engineering was able to build out the logic against this document while visual design ran in parallel.

Monthly Statement Final Design

As the wireframes progressed into final PDF design, it was critical that the statement be boldly Uber yet easily parsed. We worked with a talented engineering team that went above and beyond to accommodate our design requests and they built out a new PDF generation system.

Monthly Statement User Study

The final designs were put in front of users to ensure it addressed the distinct needs of company’s billing processes.

Personas for Uber for Business

Role: Workshop Contributor and Design Lead

Realizing the team’s need to better identify with those using our business platforms, I collaborated with Uber’s head of research in a persona generation off-site. Bringing together the diverse stakeholders provided a variety of customer lenses and created alignment towards who we are designing for. Following the workshop, I lead the convergence and synthesis efforts to translate the vast information captured into a usable tool.

The outcome was a set of 7 distinct personas that supported the Uber for Business team (30 people) as they continued to design and iterate on various products. They served as communication pieces for planning and decision-making, and an instilled a sense of empathy for our end-users.

Persona Workshop

Collaborating with Uber’s head of research, we extracted customer insights from designers, product managers, business development and customer support roles.

Persona Synthesis

I drove the post-workshop synthesis efforts to cull the broad learnings by systematically grouping according to activities, goals and product needs. This resulted in 7 distinct clusters that make up our user types.

U4B Persona Placemat

I translated the data groupings into persona placemats to consistently channel the voice of our users while maintaining speed and quality throughout product development.

U4B Persona Placemat

A total of 7 personas were created to support the U4B team.

Water Watcher

Concerns over the severe drought inspired an internal project to design a product that effectively influences residential conservation, reduces water consumption, and adds meaningful value to people’s daily conservation efforts.

The Water Watcher solution, has three components: a monitor, an indicator, and an app. This cohesive solution pairs product and service to facilitate both immediate and long term behavior change.

Scope & Role

As Lead Designer and Project Manager my role spanned disciplines including research, synthesis, concept generation, wireframing, brand identity, product strategy, interaction and visual design. Subsequently supported BD outreach by participating in clients presentations and creating targeted documentation.

Water Watcher indicator near sink

The indicator is the visible part of Water Watcher, which gives in-moment feedback. Gentle, ambient LEDs illuminate in a sequence to indicate how much water is actually being used. Once the water stops running, the indicator briefly shows where the house is in its daily usage. The indicator is designed to be attractive and visible, while not intrusive.

Water Watcher Overview Video

It’s surprising how much water we use without thinking. With a seemingly endless supply at a low-cost, we don’t usually pay attention to the amount going down the drain. From sink to shower, our water use accumulates, resulting in a significant drain to a limited resource. Even people who want to conserve water have no idea how much idea how much water they’re using.

2015 Interaction award shortlist for ‘Disrupting’ & ‘Engaging’ categories

Versitle indicator provides point of use feedback at any sink

Water Watcher Ecosystem

Water Watcher LED feedback

The indicator is the visible part of Water Watcher, which gives in-moment feedback. Gentle, ambient LEDs illuminate in a sequence to indicate how much water is actually being used. For instance at the kitchen sink where session length varies 4 rings equate to a gallon, providing quantifiable information about the immediate usage. Once the water stops running, the indicator briefly shows where the house is in its daily usage. The indicator is designed to be attractive and visible, while not intrusive.

Monitor and Indicator

A monitor that easily hooks up to the incoming water line goes under the sink (or behind the shower head or toilet). It measures the amount of water being used and sends that data to the indicator and the app. Currently, the monitor needs to be plugged in, but future iterations could see it powered hydroelectrically by the water flowing through it.

App: Splash, Daily Reserve, Daily Usage

The final part is the Water Watcher app that lets users see overall usage, long-term trends, and set water conservation goals. The app lets you coordinate multiple Water Watchers for a coherent picture of a house’s water use.

App: Trends, Goal Setting and Community

Research Summary

We started with desk research and interviews, talking to people about how they think about water. We found that most people simply have no idea how much water they use in a day, so what does a 20% reduction even look like? While millions of gallons of water are wasted, we simply don’t realize it because it’s hard to register and measure. It all vanishes – literally – down a drain. A water bill isn’t sufficient for any kind of meaningful behavior change.

Research Insights

We synthesized our research to generate 5 high-level take aways. These transpired into design principles that helped guide the concept generation and subsequent design phases.

Proof of Concept Prototype

Experimenting and prototyping with different solutions at our kitchen sink helped validate our concept and understand the needs of individuals at that touchpoint. We integrated the learnings to improve the device feedback and ongoing benefits that are percieved as helpful.

Brand Identity and Attributes

Brainstorms and numerous iterations to the logo resulted in a strong brand identity to further define the Water Watcher offering.

Determining LED Feedback

The distinct placement and color of LEDs enables a full spectrum of feedback. Our research found that communicating information at the point of usage had more impact to reduction than a cumulative capture of usage, such as a report at the end of the month. Feedback that not only shows data but also advises with prescriptive benchmarks is more likely to affect behavior.

Universal, 'tools-free' installation

Service Design Blueprint

The service is designed to evolve as residents use it and extend conservation throughout the household at varied touchpoints including sinks and showers.

Featured in FastCompany and Smart Design website

http://www.fastcoexist.com/3035859/the-water-watcher-lights-up-as-youre-wasting-precious-water-ahem-california#1

Emotiv

Emotiv is one of the leading makers of mental activity trackers and wearable EEG devices. Recently they conducted a successful Kickstarter campaign to develop a consumer device. In a rapid sprint, we partnered to help them understand design for consumers and introduce a complex products in the right way. An lean team worked to define and create their first consumer app, Emotiv Insight, and craft a unique and extendable visual style.

Emotiv Insight App

Insight headband and previous app design

Establishing Design Principles

Early on we proposed set of comprehensive design principles to guide the strategic design efforts that would follow.

Information Architecture

Emotiv's first wearable appealed to the scientific, early-adopter demographic but the Insight aspires to connect with the everyday consumer. We organized the extensive offering and feature possibilities in a way that makes sense for their target market.

Interaction Models

As the interactive extension of the wearable, it's critical that the mobile touchpoint feel approachable and intuitive. We proposed three overarching interaction models and quickly created prototypes for each to assist in the decision making process. Being able to interact with the varied navigations enabled the client to make an informed decision on-the-spot.

Annotated Wireframes: BAS

The brain activity score is a summarized metric of progress across categories that people can quickly reference and interpret that data from the EEG scan.

Wireframes & logic for 'Challenges'

Emotiv was unsure how to incorporate gamification and we took on this topic in many of our design sessions. We determined individual, managable Challenges to be the best way to incentivize consumers and encourage routine usage without feeling burdensome.

We teamed with the communication designer to create a visual design direction, which was applied to the wireframes to provide a sample of high-fidelity screens.

Client Feedback

Emotiv had nothing but positive feedback and gratitude following our engagement.

Screen Shot 2014-10-26 at 11.31.07 AM.png

Visual Programming Customer Experience

The leading provider of multi-channel customer experience and contact center solutions, sought the expertise of our team when it came time to redesign their complex programming software. We were tasked to create a simple, cohesive, visual and easy to use flow designer for the clients’ range of customers. The ultimate goal was to make the flow building process simple and streamlined within the context of the SaaS “business casual” look and feel. The solution needed to work for multichannel automation and routing strategies.

Screen Shot 2014-10-26 at 1.56.36 PM.png

Screen Shot 2014-10-26 at 1.57.44 PM.png

Screen Shot 2014-10-26 at 11.42.14 AM.png

Screen Shot 2014-10-26 at 11.42.50 AM.png

Screen Shot 2014-10-26 at 11.38.12 AM.png

Screen Shot 2014-10-26 at 11.39.04 AM.png

Screen Shot 2014-10-26 at 11.40.42 AM.png

Screen Shot 2014-10-26 at 11.37.18 AM.png

Screen Shot 2014-10-26 at 11.37.34 AM.png

Expanding the Core User Base

A well-known camera company enlisted our team help uncover ways to expand their user base. By researching women in everyday life scenarios, we identified new opportunities for the Advanced Mounts Group to design products that resonate with a broader and more mainstream audience.

Company name redacted in images below.

Screen Shot 2014-10-26 at 2.12.58 PM.png

Screen Shot 2014-10-26 at 11.47.11 AM.png

Screen Shot 2014-10-26 at 11.47.26 AM.png

Screen Shot 2014-10-26 at 11.49.53 AM.png

Screen Shot 2014-10-26 at 11.48.58 AM.png

Screen Shot 2014-10-26 at 2.17.02 PM.png

Screen Shot 2014-10-26 at 2.18.50 PM.png

Screen Shot 2014-10-26 at 11.50.57 AM.png

Screen Shot 2014-10-26 at 11.49.23 AM.png

Screen Shot 2014-10-26 at 2.19.17 PM.png

Screen Shot 2014-10-26 at 11.45.23 AM.png

Screen Shot 2014-10-26 at 11.45.40 AM.png

Screen Shot 2014-10-26 at 2.17.14 PM.png

Screen Shot 2014-11-13 at 6.00.38 PM.png

Connected Home

Created a comprehensive presentation to help the internal team at Smart SF break down the complexity and landscape of the connected home. The goal was not only to understand the activity within a rapidly evolving industry, but also provide informed advice around designing for the space. Myself and a colleague specializing in business design presented to the studio, inspiring a fruitful discussion and positive interest from the group that was carried into ongoing and future client work.

Shown are a few exerts from the complete presentations.

Screen Shot 2014-10-30 at 11.31.30 AM.png

Screen Shot 2014-10-30 at 11.31.45 AM.png

Screen Shot 2014-10-30 at 11.32.16 AM.png

Screen Shot 2014-10-30 at 11.32.27 AM.png

Screen Shot 2014-10-30 at 11.32.36 AM.png

Screen Shot 2014-10-30 at 11.32.44 AM.png

Screen Shot 2014-10-30 at 11.32.57 AM.png

Screen Shot 2014-10-30 at 11.33.07 AM.png

Screen Shot 2014-10-30 at 11.33.31 AM.png

Screen Shot 2014-10-30 at 11.33.44 AM.png

Service Vision for the Future of Insurance

In our 6 week engagement, we created a service vision concept for the future digital-enabled and digital-native agents.

Screen Shot 2014-10-26 at 6.27.24 PM.png

Screen Shot 2014-10-26 at 6.27.41 PM.png

Screen Shot 2014-10-26 at 6.27.50 PM.png

Screen Shot 2014-10-26 at 11.19.00 PM.png

Screen Shot 2014-10-26 at 11.18.33 PM.png

Screen Shot 2014-10-26 at 11.07.05 PM.png

Screen Shot 2014-10-26 at 11.10.48 PM.png

Creating a Seamless Digital Grocery Experience

A leading grocery chain had the insight to know customer's needs were changing and saw opportunity in a 'pick-up' grocery offering. Unsure how to introduce their new digital service while maintaining their personalized reputation, they looked to design for answers. Using service design methodologies, we created a digital app for shoppers that provided a seamless, convenient and approachable experience.

Following an immersive foundations stage and in-home research we generated 4 concept themes. Each concept addressed an uncovered need with a cohesive navigation model and user flow. The concepts were narrowed to 2 with the client's feedback and further refined as step-by-step wireframes. This enabled the client to see the complete experience and make an informed decision. Visual design was applied to the selected concept and a working app was built to bring the final deliverable to life.

Screen Shot 2014-10-26 at 6.33.22 PM.png

Screen Shot 2014-10-26 at 6.17.16 PM.png

Screen Shot 2014-10-26 at 6.17.29 PM.png

Screen Shot 2014-10-26 at 6.24.30 PM.png

Screen Shot 2014-10-26 at 6.24.49 PM.png

Screen Shot 2014-10-26 at 6.17.55 PM.png

Screen Shot 2014-10-26 at 6.24.59 PM.png

Screen Shot 2014-10-26 at 6.18.45 PM.png

PayPal

As an integral member of the PayPal mobile design team, I was advocate for positive user experience, providing inspiration, industry knowledge and documentation for the update of their apps (which processed over $1billion in 2013).

The refresh leveraged the successful elements of the previous apps, while improving the shopping and in-store payment experience. Across platforms we introduced a simplified visual style, and enhanced technology to support more extensive usage.

For over 6-months I worked hand in hand with a diverse group of designers, helping to shape the future of payments and infuse an organization with a mobile first philosophy.

Screen Shot 2014-10-26 at 11.14.01 PM.png

Screen Shot 2014-10-26 at 6.29.18 PM.png

Screen Shot 2014-10-26 at 6.29.33 PM.png

Department of Veterans Affairs: Mobile Apps for PTSD

Collaborated with psychologists to define and document an intuitive mobile experience for veterans undergoing CPT treatment. Lead UX designer and project manager responsible for content organization, interaction and visual design from inception through final delivery and QA testing.

App Visual Language

Designed 7 on-brand splash screens and corresponding app icons in a series of apps for the US Department of Veterans Affairs. Responsible for asset delivery and supported implementation throughout development.

Mobile application for Cognitive Processing Therapy

Collaborated with psychologists to define and document an intuitive mobile experience for veterans undergoing CPT treatment. Lead UX designer and project manager responsible for content organization, interaction and visual design from inception through final delivery and QA testing.

A cohesive series of mobile applications

Working alongside another designer and subject matter experts, created simple, intuitive user experiences for apps to help veterans and service members suffering from PTSD and depression.

Live work

Contributed to the interaction and visual design of over 8 apps that are available on the App Store and making an impact to improve the lives of Veterans.

Screen Shot 2014-10-27 at 10.25.17 AM.png

Screen Shot 2014-10-27 at 10.00.35 AM.png

Xerox Park: Meshin

Defined an engaging interactive experience with wireframe flows and managed corresponding visual design for mobile apps MeshinNow and MeshinRecall. Complemented this initial engagement with a follow-up redesign to the company’s brand identity.

Screen Shot 2014-10-27 at 10.00.58 AM.png

MeshinNow Wireframes

Communicated high-level navigation model for the Android app 'MeshinNow' through wireframes, this document was given to developers with corresponding graphical assets.

Screen Shot 2014-10-27 at 10.01.25 AM.png

Save the Dates

As a product of the 1980's, friends calling in design favors to assist with wedding invitations, styling and collateral is becoming increasingly popular.

Brand Identity

Independently consulted for a diverse range of businesses and non-profits to provide thoughtful brand direction and complimentary brand collateral.