UX Design / Scoop

develop free website
Timeline: May - August, 2016
Role: Design Intern
Function: UX/UI Design, Communication Design
Tools: Pen&paper, Sketch, Illustrator, Invision, Validately

Scoop is a series-B funded company in San Francisco that provides automated, custom carpooling. I spent three months as a design intern here under the mentorship of the company's Head of UX, Cassy Rowe. I got much more familiar with UX design for IOS and Android and the nuances of designing for both platforms, learned and practiced tangible ways to apply user research and metrics to design, and got an inside scoop (pun intended) of how the end-to-end process of UX design plays out in a fast-paced start-up.

Project 1 / Trip Cancellation 

Although cancellation only accounts for 5% of the viable trips, it remains an important aspect that the business should optimize - as it affects the churn rate, our brand, and ultimately, the customer experience with our product. While I was revising the UI copy for the existing cancellation screens, I realized that:
  • The experience was agnostic to the type of commuters (driver or rider) or the type of cancellations (active canceling others or being canceled on), which was cold and did not help to alleviate the unpleasant feelings users experience 
  • The current screens did not take into account the complexity of other product features or the emotional state of our users.

After getting buy-in from UX manager and VP of product, I took on the project to redesign the how our commuters experience cancellation.

Problem Statement / How do we deliver a design solution that makes inherently unpleasant experience suck less?

Contextualize the Problem

My investigation combined both an analytics and a human-centered approach to understanding the constraints and considerations that need to be accounted for. 

People / Stakeholders 
  • Customer Support (what users complain the most about cancellation, fraud prevention)
  • Users (identify the weakness of the current user flow)
  • Engineering (understand how data was processed and tracked)
  • Business (beware of the implication of partnership with employers)

Numbers / Analytics

  • Gather data to understand the behavioral pattern of cancellation from Periscope    
  • When: how long after they get matched, how long before the trip
  • Why: what's the reason for canceling
  • Who: the profile of the users that have been involved in one or more cancellation

With all the information I gathered, came the most exciting part of the process - the synthesis and hands-down design time! First I sketched out decision trees to combine similar situations, then I created a few short-hand user flows (which I found very helpful in mobile design because compared to the web, mobile UI is more action-oriented), parsing out drivers and riders, being cancelled on and cancelling others, different reasons for cancelling, times cancelled within a threshold of time, etc.

Wireframe

I then put together a huge flow in wireframes - parsing out drivers and riders, being canceled on and canceling others, different reasons for canceling, times canceled within a threshold of time, etc. After a brief review of the wireframe flow, I dived into the design of the specific UI and then posited the screens within in a comprehensive flow including the push notifications users get when canceling or being canceled on, and the different kinds of customer support emails they received afterward. 

Mobirise

User Test

In order to sort out a list of users that fit the criteria of the different flows, I juggled between the internal Scoop dashboard, Periscope, Zendesk (alas all the startup's tools), which taught me a lot about the logistical details it took to the prepare for user testing. 

Mobirise

I used InVision and Validately, which allowed me to talk to the user while seeing their interaction with the interface in real-time.  

Some takeaways :

- Text needed to be cut down more although the original intention was to add transparency and clarity;

- Users felt that drivers and riders sometimes received unequal compensation in situation of cancellations;

-Confusions around the cancellation policy still existed.

Changes to the design were therefore made accordingly. Since this was a rather text-reliant experience, meaning the user's action relies on their semantic understanding of the text more than the visual experience, we paid particular attention to the brevity and clarity in the UI writing review to ensure the right emotional voice is used. 

Be Human, and Consistent

At the last stage of the design,  I focused on creating UI visuals that feel human, align with the Scoop brand, and work well with the rest of the product screens.  

Mobirise

Project 2 / Email Design System

Advanced marketing automation and personalization tools also lead to an explosion of marketing templates to fulfill different needs. It's crucial to maintain a consistent brand through consistent visuals and layouts. The Head of Marketing came to me to redesign email template and create a style guide for emails. I set out to achieve two goals:
1) to convey the brand and personality consistently,
2) to streamline the process of creating and updating these emails.

Mobirise
ANALYSIS

The various flows of emails are categorized into four major types of flows: on-boarding, churn/few scheduled trips, weekly digests, Milestones, and one-off launches about product or promotions. Each category requires a distinct structure regarding how the message was conveyed and where the action is presented to achieve the specific communication goal of that category. As the key to modular design is the extract the common elements that are recyclable and modifiable, I looked into the existing emails more and looked for the similar components that are most present in these emails - such as the referral code section, the different types of call-to-action, the bullet point structure, etc. 


WIREFRAME AND FEEDBACK

This was a collaborative process. As I put together the wireframes, Marketing would leave comments and answer my questions related to copy and communication goals on the invision board.

In the design process, I prioritized a few things: 1) clear typographic hierarchy for good scannability (more white space around headlines, monochromatic hyperlinks); 2) hard-to-miss, unambiguous call-to-actions (schedule a trip, refer a friend)
Mobirise
Mobirise
^Making it easy for the Marketing team to look for and adjust assets.

Had I had more time, I would have liked to user test the new designs - not only from a usability point of view, but also the perspective of how effective the overall communication is. After my internship ended, Scoop outsourced the development to an expert in emails to translate all the mockups into code.

One of the most valuable lessons I learned at Scoop is: don’t approach design without at least an idea of the copy, which manifests itself the most in this project.​ It was a joint effort between design and copywriting, which reminded me to always keep the overall experience of people in mind, from visuals to semantics, as they are incredibly interwoven and inseparable.


More / Communication Design 

Working in a fast-moving start-up with only one designer at the time I was interning (but now Scoop has a design team!), I also contributed to various communication design projects for the marketing and business side of the company. Below are the App Store screen shots, and layout design of business reports and promotional flyers.

Thanks for viewing!

© Copyright 2018 Qiqi Xu - All Rights Reserved