Jonathan Tsay

blue bottle coffee (NDA)

 

 

 

 

 

 

problem

Designing and integrating a new feature launch — 3 weeks.

I was a UX Designer working under a design lead & with another UX Designer.

UX Methods: Competitive Audit, Heuristic Evaluation, User Interviews, Personas, Journey Maps, Usability Testing

Tools: Sketch, Photoshop, InVision, Principle

process

The crux of this project was balancing stakeholder concerns & manufacturing constraints with user needs. We did the following to determine our base of research and question our assumptions.

  • Identified client-side concerns by generating ideas and design directions through a comparative/competitive audit
  • Understood the implications of our choices through user interviews & stakeholder interviews
  • And how they fit into the current site architecture through a heuristic evaluation

Our next phase was to determine the most helpful and relatable paradigm for existing and prospective users. We sketched ideas which we then revised through stakeholder feedback to create two testable prototypes on InVision. We then ran usability tests with 7 users.

  • Used the RITE method to test more iterations on a shorter time scale
  • Brought client-side Customer Service in as observers for usability testing to get greater insight and buy-in

 

Desktop.png

BoostInsider UX Consultancy

BoostInsider is a startup that provides Influencer Marketing. Their model helps marketers skip the time investment of personally seeking out and establishing relationships with influencers.

BoostInsider acts as the liaison between brands (who create campaigns) and influencers (who choose from a selection of campaigns) to promote to their followers

BoostInsider acts as the liaison between brands (who create campaigns) and influencers (who choose from a selection of campaigns) to promote to their followers

Problem

Boostinsider had a goal of increasing growth in order to pursue round A funding. They were seeing steady growth but a troubling drop off in the brand-side campaign creation flow prior to payment.

Solution

Our three person team strategized that BoostInsider would be best served if we provided them with a base of research and a redesigned brand-side campaign flow.

We delivered wireframes of the new campaign creation flow, feature prioritization for future development, and business analysis via an annotated concept map.

UX Methods: Interviews, Journey Maps, Wireframing, Design Studio, Usability Testing

Tools Used: Sketch, Adobe Photoshop

Process & Insights

Different user types interface with different touch points — by researching and understanding the varying needs and expectations of these user groups, we were able to rethink the short term focus of the business

Different user types interface with different touch points — by researching and understanding the varying needs and expectations of these user groups, we were able to rethink the short term focus of the business

Brands drive engagement — Create a Brand Acquisition Strategy

When we entered and spoke to the CEO, she framed the problem as a "chicken and egg" problem. Brand engagement drives Influencer engagement which drives Brand engagement which...

However, after collaborating with the Account manager and Influencer relations team, we found that the concerns that these parties voiced were distinctly different.

Brands needed help strategizing their campaigns and understanding BoostInsider's product, whereas Influencers expressed interest in seeing a larger selection brands or more relevant brands.

With nearing 100,000 influencers signed up within their first year of business, it became apparent that more focus was needed on the brand side. By focusing on their ideal brands (small to mid size startups with a digital product), BoostInsider can:

  • Create a track record of success across industries, showing that the product can work for those businesses
  • Compile common concerns and feedback, improving the quality of their support
  • Establish expectations among Influencers for what types of products they will be seeing

We also recommended also pursuing the most common types of brands that their influencers were expressing interest in.

research showed the brand side needed more help

We decided to focus on improving the Brand Campaign Creation Flow.

In summary:  BoostInsider's create a campaign flow needs to establish more trust in their product.

In summary: BoostInsider's create a campaign flow needs to establish more trust in their product.

The key focus in our revision was to improve ease of use. We did this by creating more logical task groupings and by providing different levels of help throughout the campaign and the site.

We ran card-sorting sessions to find out the logical order, hierarchy and grouping of the existing form fields and usability tests to determine the type of questions that marketers would have at each step.

Groupings remained identical among marketers with a trend towards inputting product info first, and audience/budget information last

Groupings remained identical among marketers with a trend towards inputting product info first, and audience/budget information last

While conducting usability tests of our newfound groupings, marketers expressed interest in targeting the audience instead of the influencers.

"I'm not used to targeting influencers, but I know my product audience. Plus, I know that my influencer's demographic doesn't necessarily equal my audience's demographic"

For future development, we suggested that BoostInsider allow both parties (Brands & Influencers) to select the audiences and match those parameters instead.

We found out that because the experience levels of marketers varied, brands needed to see case studies beforehand (1), and be provided with a sample campaign to model their strategy (2). They expected to receive minimal, specific and relevant help (3) while completing the campaign while expecting to find more detailed explanations elsewhere (such as in a F.A.Q) (4). Brands also needed to be able visualize their accomplishments and preview what the the influencer will see (5).

(1, 2) Case Studies & Sample Campaigns must exist earlier on in the site to set expectations. (3) Grey text, and inline explanations offer appropriate level of help as needed without cluttering the display. (4) F.A.Q should be compiled by the brand accounts manager and follow in the footer of the campaign. (5) Seeing inputs affect visuals in real time help brands feel more assured of their work.

(1, 2) Case Studies & Sample Campaigns must exist earlier on in the site to set expectations. (3) Grey text, and inline explanations offer appropriate level of help as needed without cluttering the display. (4) F.A.Q should be compiled by the brand accounts manager and follow in the footer of the campaign. (5) Seeing inputs affect visuals in real time help brands feel more assured of their work.

To summarize, the redesign focused on revised groupings, relevant help provided when necessary, and more established expectations.

title
thumbnail.png

Citi Mobile Privacy

Personal Project

Current Landscape

Mobile banking has enabled banking on-the-go. Primary functions revolve around checking both credit card balances and account balances. Recent designs have focused on accessibility, with many banks (Chase, Citi, etc.) allowing TouchID.

These design patterns revolve around mobile concerns of accessibility and efficiency, while relying on back-end security innovations to address privacy and security.

What I'm Trying to do

While the majority of users prioritize convenience, there are subgroups who are more concerned with privacy but still want similar access to mobile banking. How do we create a simple solution for these users?

Inspired by my friends more sensitive to personal space in public places!

Problem

Users are often in public and crowded cases and perform lightweight banking tasks. However, this new use environment can make app users feel at-risk due to private information being exposed, even if this exposure isn't particularly high-risk.

UX Methods: Wireframing, Prototyping

Tools: Sketch, Principle

Solution

I wanted the gestural interaction to reflect the visual change, without over verifying the user — the visuals must also be functional and recognizable.

I chose to parallel the use of TouchID.

bounce

Users can touch and hold the same action button to fade the relevant information in, and the release of the button would begin the fade out. One gesture with two interactions and a mental model that many already understand (gas pedals, studio headphones, etc).

citithumbnailfinal.png

THE ARCHIVE SF EMAIL TEMPLATE REDESIGN

The Archive is a High Fashion Men's Boutique located in downtown San Francisco. They specialize in artisanal imports of designers who eschew the mainstream. The price point is extremely high and the target audience is niche.

Problem

The Archive upgraded from a basic website to a full-fledged e-commerce site running on Shopify. The email template was not updated to match the redesign.

Solution

A self-initiated redesign of the email template focusing on a strong singular hero image and call to action.

My goal was to increase conversion rate and create consistency with the new website.

UX Methods: User Interviews, Wireframing, Rapid Prototyping

Tools: Adobe Photoshop

Results

A click-through rate increase from 30% to 46%. 

This rate has held true for 13 months and counting! I love this project because it shows that even in small companies (four people) with no design culture, a little UX can go a very long way.

Process & Insights

San Francisco is a very difficult market for men's fashion. 

Pursuing our "ideal" customers was more worthwhile than trying to appeal to a broader audience. I contacted our top three customers to see what was important for them to receive in an email.

Unique content drives traffic

Clients expressed a desire to receive more communications and were interested in store-curated and created content focusing on news and information.

They did express different motivations for wanting to visit the website — some only visit when they have the intent to shop, others liked to check up on the news in the store.

By combining interview results and in-store observations, I found that the Archive's business appealed to clients because of the quality of goods and the story behind them. 

This was the first important piece of the puzzle.

A STRONG HERO IMAGE, A SIMPLE CALL TO ACTION

I also looked at Google Analytics.

Around 50% of our current subscribers browsed on mobile and equally many were ages 40+.

The new template needed to be easily clickable, easily scannable, and fit a variety of screen sizes. Coupled with interviews, we decided on big beautiful images, single clear call to action with no unnecessary distractions or ambiguity.

Simple wireframe showing decisions based off research

Simple wireframe showing decisions based off research

Desktop Landscape.png

Rand McNally Geocaching

Personal Project

Rand McNally started as a map & atlas company in 1856 and has since expanded into transportation & logistics, as well as the education industry. However, with Google Maps and other web-based services, their future as a mapmaker is uncertain.

Problem

Two weeks in a 3-person group to create a mobile app that allows Rand McNally to enter the geocaching industry. I primarily focused on Research, Strategy, and higher-level design.

UX Methods: User Interviews, Contextual Inquiry, Usability Testing

Tools: Sketch, Adobe Photoshop, InVision

Solution

A mobile travel-guide app that uses geocaching as a vehicle to enhance the richness and immersive feel of exploring new places.

Travel is our story in which we are actors superimposed on a city's culture and history. 

Insights & Design

We started our design process with surveys, interviews, and contextual inquiry to understand the landscape of Geocaching.

How the high-level interests and activities connect in a Concept Map; created after initial interviews and contextual study

How the high-level interests and activities connect in a Concept Map; created after initial interviews and contextual study

There are already pure Geocaching apps out there — we wanted to create something that truly leveraged Rand McNally's unique position and heritage in the market. This process highlighted the huge overlap between geocaching and traveling.

User Quotes

"I feel like I'm part of some secret club"
"I wouldn't do this alone, I always go with my friends"
"It makes me look at the world differently"

Geocaching is inherently an activity driven by delight. Unlike many traditional activities, delight is a primary usability factor instead of secondary. There is nothing practical about it.

It's not about the destination, it's about the journey

We thought we were making a travel guide app — after some testing and deeper interviews we found that what we were making was a storytelling app.

This insight guided our design to be an immersive experience that focuses on rich content that revealed itself when appropriate to allow a seamless transition between real world (interacting while traveling) and the digital space (our app).

This also meant that the interaction design of the app should mimic patterns found in Augmented Reality.

Users reference between real world and digital world information. We chose to minimize the # of different screens to minimize disorientation and distraction.

Users reference between real world and digital world information. We chose to minimize the # of different screens to minimize disorientation and distraction.

How is this reflected in the app?

  • Full-bleed imagery to guide content
  • Minimal options so the user can focus on story and travel experience
  • Built in interaction tools: Scanning trackables (already existing geocaching infrastructure) leveraged to add extra sense of "discovery" and community
Untitled-1.png