Blink UX

This is custom heading element

Blink is a leading UX research and design firm headquartered in Seattle with additional studios in Boston, San Diego, Austin, and San Francisco. Among Blink’s offerings are product design, design research, design strategy, service design, and evaluative research. Championing evidence-driven design since 2000, Blink has completed projects for clients such as Microsoft, Amazon, Starbucks, and NASA.

This is custom heading element

I was selected as Blink’s sole UX Research Intern for Summer 2018. During my 11 weeks there, I worked with several well-known clients on different projects and took on much of the same work as full-time researchers, sometimes as lead and sometimes in more supportive roles.

Some of my work included:

  • Planning and conducting studies
  • Collaborating with cross-functional teams
  • Writing final reports
  • Editing video clips for presentations
  • Auditing and modifying participant screeners
  • Conducting heuristic analysis
  • Cleaning up spreadsheet data
  • Facilitating generative workshops

The highlight of my internship was the work I did as the lead researcher for a round of testing end-to-end on a high-profile project in close collaboration with a large team (including project managers, product managers, a finance manager, a marketing manager, a software development manager, UX strategists, visual designers, and several UX designers).

The major goals of the project were to:

  1. Clear up confusion that users had about the role of each company in a co-branded experience
  2. Learn what features and information should be accessible through the client company based on users’ needs and expectations

I planned the study and worked with the designers to adapt the session guide to the prototypes and other testing materials they prepared—sometimes working to incorporate last-minute changes from the team—while still maintaining the research focus. After an internal pilot, I ran ten one-hour sessions with participants over two days. Each session consisted of a combination of interviews, usability testing, and variants of A/B testing and card sorting. Without a separate note-taker, I simultaneously took notes and moderated each session. Afterwards, I compiled findings in a final report for the client.

Due to tight scheduling, I was given half the time normally allotted to a seasoned researcher to do the work, but with the help of the team, it went well and the client was extremely pleased.

In compliance with my non-disclosure agreement, I have omitted confidential information about my work with Blink.

The Bicycle Repair Shop

This is custom heading element

The Bicycle Repair Shop is a small bicycle rental and repair business in Seattle, Washington. Its website provides information about the shop and enables customers to book bike rentals and repair appointments online.

This is custom heading element

The website at thebicyclerepairshop.com* suffered from several usability issues that often translated into employee time spent fielding inquiries from confused customers. Additionally, the owner was unhappy with the visual design.

I was tasked with:

Identifying the issues that cut into the business’ bottom line

Redesigning the website to fix those issues as well as better reflect the business aesthetically

*Note: The client is still working on transitioning away from the old design on the live site.

This is custom heading element

I was the sole researcher and designer for this project, responsible for the website’s usability, interaction design, UI design, and integration with the business’ existing third-party systems. I was not responsible for generating content, which was simply transferred over from the original website.

This is custom heading element

To start, I drafted a plan with my initial research questions and methodology.

Initial Research Questions

What are the business’ biggest pain points?
What are the customer red routes?
What is the website’s role and what do people expect to be able to do on a bike shop website?
How do they choose which shop to go to for their needs?
How do they find out about The Bicycle Repair Shop and which channels are likely to bring in potential new customers?

The answers to these questions and more would inform the eventual design direction.

Methodology

FIELD STUDIES (Direct Observation, Contextual Inquiry):
During visits to the shop, I observed the behavior of both the customers and the employees, occasionally asking the employees about particular interactions. At other times, I was a fly on the wall. These visits helped me mentally connect the online experience to the in-person one. A slow day also gave me the opportunity to have an impromptu stakeholder interview, which allowed me to better understand the business goals and constraints.

COMPETITIVE ANALYSIS:
I evaluated features of similar shops in the area and their websites to discover the standards and expectations for what a bike shop and its website should provide.

QUALITATIVE DESK RESEARCH:
Looking at online reviews by users, I analyzed for patterns and found some once I had a large enough sample size. For example, I learned what people tend to like about the shop and who the core customer base is. This method has limited use on its own—one glaring problem is the bias baked in from the fact that online reviews are only reflective of the views of people who write online reviews—but combined with other methods, it can lead to valuable insights.

Baseline Usability Tests

 

After my initial research, I had a pretty good idea of who the customers were and how the website might work in tandem with the in-person experience. To help determine which usability issues should be prioritized, I conducted usability testing with 5 users who had never seen the site before. I used the following prompt:

Imagine you commute to work by bike. One day, a spoke on one of your tires breaks. You want to get it fixed pretty quickly since biking is how you’d normally get to work. A friend of yours recommends a shop to you, giving you a link to The Bicycle Repair Shop’s website. Navigate to the website. Do what you would do on this website to go about getting your spoke problem fixed.

I instructed each participant to use the “think-aloud” method, reminding them of it when necessary but not providing any further guidance. I recorded the sessions for later review.

Although the task completion rate was 100%, actions like extra clicking, scrolling up and down, and looking in the wrong places for the next step revealed areas for improvement.

This is custom heading element

From Preliminary Research

Throughout the year, the shop does more repair for commuters/regular cyclists than they do rentals. In the summer (and on weekends with nice weather), demand for rentals increases. As for merchandise sales, people most often purchase items just from browsing.

Repair jobs are often single-issue. The shop routinely does same-day repairs.

The number one question people ask on the phone is “Do you rent bikes?”

About half the people who book service appointments or rentals use the online portal, but they will also frequently call anyway with questions.

People find the shop via online search and some word of mouth. They choose to come in based on Google and Yelp reviews.

Customer loyalty is related to positive perceptions of customer service, quality work, fast turnaround, and cheap/reasonable prices. People also like the personality of the shop (friendly, down-to-earth, not snobby or salesy) and the convenience (location and hours).

Most bike shop websites include “about” and “services” sections as well as rates, hours, address, map, and phone number. Some also include an email and/or contact form. Including an online booking tool is a differentiator.

 

 

From Usability Testing

Users clicked on the two prominent images on the homepage but they weren’t linked to anything.

In the appointment booking tool, there was an undesirable “frame within a frame” effect because the user has to scroll within the iframe but sometimes accidentally scrolled on the page where the iframe was embedded instead.

In the appointment booking tool, one user got stuck on an irrelevant time zone selection window that came up.

In the appointment booking tool, the date selector didn’t provide the user a reference point for today’s date.

In the appointment booking tool, the saved information appeared as a list of links in a side pane. The links looked as though they would lead to different steps in the booking process, but if any of them were clicked, they all brought the user back to step 1.

The content underneath the appointment booking tool iframe was viewed as excessive and poorly formatted. It also didn’t seem to provide value to the user.

 

This is custom heading element

Before starting on the redesign, I quickly sketched out a basic user flow and site map.

One challenge of designing the new website was that content generation was out of scope, so I was stuck with using old copy that was often verbose and/or outdated. This made it difficult to design for content first. As is often the reality of design, I focused on choosing a few things that would make the greatest impact.

Decisions and Rationale

Normally, if I’m starting from scratch and expecting an eventual developer handoff, I’d sketch out some layout ideas, make a few wireframes, then start low-fidelity prototyping. For this project, however, I did all my designing within a Squarespace template. The reasons for this are that 1) that’s what the client had, 2) there will be no developer, and 3) the website needs to be easy to edit and maintain by people who have limited coding experience.

PROBLEM:
People call and ask whether the bicycle shop does rentals.

SOLUTION:
I removed the phone number from the upper right corner of the homepage (it could still be found in the footer and on the contact page) and instead lead the eye to the two images, which are now clickable and point to their respective pages. “Bicycle Rental” is displayed under the first image along with an obvious “Reserve Today” button to cover different linguistic mental models. Additionally, the first link in the main navigation (which is now more discoverable by convention of its position in the upper right corner) is “Rental.”

PROBLEM:
The flow for using the repair appointment scheduler isn’t smooth.

SOLUTION:
I scoped out a few different tools available and settled on Acuity Scheduling for its intuitive flow on the front end, ease of use on the back end, and straightforward customization options. I didn’t design this part other than some styling tweaks to look on-brand. Using this scheduler resolved some of the issues the old one was having, including the “frame within a frame” thing and the oddity of the sidebar links as a roundabout way to track progress.

(The first screen above may present too much information up front. For a future iteration, I think it can be further simplified visually by hiding the details behind a “More Info” link or similar concept.)

PROBLEM:
The content under the appointment scheduler looks long and convoluted.

SOLUTION:
I trimmed some of the fat here for better legibility and message focus (this was a rare exception with regard to content; the client had given me information that made a large amount of the original copy no longer true, so removing it was no trouble). In addition, I threw in some custom CSS on the table of package deals to clean it up while using brand colors for a more balanced and cohesive feel to the page.

OTHER DESIGN CONSIDERATIONS:
Redesign the “self-guided tours” section and the contact page.
The decisions I made for these were based on usability heuristics, particularly consistency and standards, efficiency of use, and aesthetic and minimalist design.

Before

After

This is custom heading element

Reception has been positive, though we’ve only done informal preliminary testing with a handful of stakeholders and users. Proper usability testing will be crucial to improving the design for future iterations. I’m confident the new design will have no negative effects on business, but whether it will have tangible positive effects remains yet to be seen. The client is still working on transitioning to the new design.

Potential impacts include:

Reduced calls from customers requesting information that can be found on the website
More automated appointment-booking
Higher customer satisfaction from being able to move smoothly between the online and in-person experience
Improvement in the overall online impression of the business (though the shop’s reputation is already stellar)

Some areas to explore further design work include:

Content (removing outdated copy, clarifying messaging, enhancing readability, replacing low-quality images)
Inclusion of social media

My hope is that future integrations (e.g. an online store synced with the shop’s inventory database), additions (e.g. blog posts), and other changes (e.g. adding new self-guided tour routes) will be easier going forward. I hope the redesign enables the employees of The Bicycle Repair Shop to spend less time on administration and support and more time focusing on running and growing the business.

Instashop

This is custom heading element

Instashop is a grocery franchise aiming to enter the online grocery shopping market. The purpose of the project was to serve as an exercise that touched all parts of the design process. This assignment was created by Designlab as part of its online UX design boot camp program, UX Academy. I was the sole researcher and designer, working under the guidance of a mentor and participating in critique sessions with peers over Google Hangouts.

After putting together a research plan, I followed a model of Empathize, Define, Ideate, Prototype, Test. This allowed me to gain a good understanding of the problem context, make decisions, and get something in front of users to test assumptions and validate ideas.

If you want the TL;DR version of the research, you can download a PDF of my user research report, which summarizes what I did in each stage, the purpose and rationale for using each method, and key insights learned.

If you want a more in-depth look, read on.

This is custom heading element

GOALS: Learn who the users are and their behaviors, motivations, thoughts, and feelings, identify user needs

Survey

Instashop survey screenshot

As part of my initial discovery process, I launched a survey to find out who the users were and get a general sense of how grocery shopping fit into their lives. The survey doubled as a screener for potential interview candidates later. As this was an educational exercise with a $0 budget, my primary method of disseminating the survey was through social media channels. Obviously, this skewed the results quite a bit (for example, 74.3% of the respondents were residents of California, where I grew up and attended college), so I had to take the results with more than a few grains of salt. With a budget, I would have used Craigslist instead of personal contacts and included incentives such as gift cards.

Based on the survey responses, target users were people ages 18-44 years old living and working in large cities who shop for groceries in person but are open to trying alternatives.

User Interviews

“I was using Google Shopping when they were in the beta phase so they had free shipping, which was nice, but they don’t have that anymore so I use Instacart now, which is still expensive but I just use it because it’s convenient.”

I interviewed 6 people who matched the target user to gain an in-depth understanding of their behaviors, motivations, thought processes, and emotions surrounding grocery shopping. One of the most common frustrations of traditional grocery shopping is its inconvenience. This comes in many forms: how much time it takes, waiting in line, limited operating hours, locations far from home. Convenience and saving time are the driving forces to compel people to switch to online shopping; however, the higher cost is a major factor, and delivery errors (which are even more inconvenient than in-person shopping) are a turn-off as well.

Hear a snippet of one user interview here:

TRANSCRIPT:

Q: Is Instacart your preferred one?

A: Yeah.

Q: What do you like about it?

A: I like that I can see what the shoppers are doing. So while they’re shopping, they can say, ‘oh, we had to substitute this for this’ and they– they’ll do it in live time.

Q: Anything else?

A: That’s pretty much it. I like that part. Because if they do that, then I can tell them right away, like, “oh no, I don’t like that substitution” or I can be like, “ok yeah, that’s fine.”

Q: Ok, what don’t you like about it?

A: I don’t like how some shoppers substitute weird things, and then– for the items that I want. Or sometimes the orders get mixed up, or they forget something, or the prices are different than what I was quoted on the internet.

Persona

Using what I learned in user interviews as a foundation, I developed a persona. Meet Josephine, a busy, on-the-go professional who needs hassle-free ways to save time and money. Everything about her is based on the users I talked to.

 

I found the persona creation process immensely helpful for empathizing with users (though to be honest, I could have done without the little bar graphs; they take up space without really saying anything).

Empathy Maps

Creating empathy maps really helped me understand my users on a deeper level. I also took this time to build an empathy map for a secondary persona: someone with expendable income who is already invested in online grocery shopping.

 

The difference in thoughts and emotions between the two was striking, and I realized that whatever solution I was going to come up with would need to meet the needs of both (as well as the business, of course).

Storyboard

Some storyboards start with a scenario where a pain point enters and whatever solution/service/product we’re pushing comes in and takes that pain away, and Joe User is happy. This storyboard does not do that, because I did the assignment wrong (oops).

Instashop Storyboard

It does, however, illustrate a typical grocery shopping situation in a user’s life that could go much better for her if only she used Instashop. So while the storyboard doesn’t explicitly spell it out in the story, it does show opportunities where Instashop can meet users’ needs.

This is custom heading element

GOALS: Look at what currently exists in the problem space and what we can learn and use, determine priorities and primary task(s), identify business goals, identify areas where business goals and user needs can intersect

Competitive Analysis

I began looking at existing solutions/competitors to see what’s being done right and what could be done better. Comparing three major online grocers, I created a matrix that was organized based on value to users and cost of implementation.

 

Anything that was high value/low cost were the easy wins that Instashop should take advantage of. Anything that was low value/high cost probably didn’t belong in the MVP but could be considered for future iterations.

Business Goals

Instashop Business GoalsIn order to easily see what I was trying to accomplish, I created a simple Venn diagram of business goals/pains and user goals/pains. A quick glance at where the circles cross showed areas that Instashop could meet the needs of both.

This is custom heading element

GOALS: Come up with potential solutions, visualize information hierarchies and how users will complete primary task(s), create rough draft(s) with focus on functionality

Card Sort

Instashop Card Sorting Results Snippet

I ran an open card sort on Optimal Workshop so I could see what users’ mental models were of grocery item categorization. This let me know what language and groupings made sense to the users, so naturally I incorporated that information into the categories on the website to minimize cognitive load.

Sitemap

Instashop Sitemap

Drawing out a sitemap helped to visualize the hierarchy of pages on Instashop’s website as well as the connections and relationships between them. My first shot at it was a rather intricate (i.e. convoluted) sitemap:

 

(Oh, boy.) I realized a lot of it was out of scope for a V1 that hadn’t even been tested yet, so I trimmed it down to focus on fewer things that I could show to users. All the other stuff could come in future versions if it turned out there was a need for it.

User Flow

Writing each step of the user flow allowed me to visualize a red route that a user might take to navigate through the site and complete a task. One of the most typical tasks is buying an item, so this user flow included everything beginning from the entry point, then finding the product, adding it to the cart, running through the checkout process, and finally purchasing it and receiving confirmation of the transaction.

Wireframes

The wireframing process was about generating rough drafts of a design. Referring to the sitemap and user flow, it became obvious what key screens I’d need to make. I focused on functionality with an intuitive layout and sensible structure before making any moves toward stylistic choices.

V1:

V2:

V3:

This is custom heading element

GOAL: Create a working prototype that could be tested with users

Instashop Paper Prototype

I did a very low-fidelity prototype (paper sketches) in Marvel as a sort of quick practice for myself, then set to throwing my wireframes into InVision for testing and linking the screens together to simulate a real website.

Instashop wireframe prototype on tablet

This is custom heading element

GOALS: Test the prototype with users, compile insights gained from user testing and feedback

Before doing live in-person usability testing, I got quick and dirty feedback on Verify (now Helio) by launching click tests and memory tests on the wireframes.

Thankfully, there were no unwelcome surprises in the results: People knew what to look at and where to click.

 

With this small bit of validation, I let good enough be good enough and began usability testing.

After running through the spiel of procedures, getting permission to record, and explaining the “think-aloud” method, the task prompt I gave to users was simply to

“Buy two boxes of cream cheese and have them delivered by tomorrow.”

Then I sat back and watched.

Instashop Usability Test Photo

The very first user got stuck for several seconds pretty early on because I had made the terribly fatal mistake of designing the flow in a way that I would do it instead of what the users actually do. I had failed to include an accelerator to guide the user to the next step after adding the items to the cart. This was a simple enough fix that I revised the prototype to include it before further testing. As it turned out, every single user after the first one ended up using it, and I learned a valuable lesson that I knew in theory but now knew in practice.

You can play with a tablet version of the InVision wireframe prototype here. I should warn you that it doesn’t have much functionality beyond the task outlined above. Also, the checkout process needs a lot of work to become more intuitive and user-friendly.

This is custom heading element

Instashop Affinity Map

This affinity map shows some of my reflections on the usability tests. Errors directly inform areas for possible improvements. Were I to continue this project beyond the assigned exercise, the next steps after testing would be to 1) determine whether anything in the Define stage needs to pivot and 2) use the insights from testing to iterate on the design by running through ideation and prototyping a V2 to test again. Repeat this process (and/or jump around the process) as necessary.

This is custom heading element

To get things going with branding and style for Instashop, I started ideation with just a brainstorm of adjectives and (crudely) sketching whatever came to mind. Some logo ideas formed from that and I explored them, trying several different directions. I then narrowed it down to a few choices and moved from pen and paper to Sketch to see if I could flesh them out.

 

After consulting with my mentor to help me choose the logo, I created a style tile. I chose the colors– orange and yellow complemented by shades of green– for their associations with energy, vibrance, happiness, health, freshness, and nature (in the United States anyway, where my target users are). Building off this, I made a UI kit and basically filled in my wireframes.

 

Again, if I were to continue the project, I would test the designs and iterate on them based on user feedback. I’d also need to meet with stakeholders to learn what the primary business objectives are. My goal is always to design something (or contribute to the design of something) that solves problems for both the business and the user, and I can only truly understand what those problems are by talking to both.

This is custom heading element

Some other artifacts created during this process are not shown here simply because they’re a bit text-heavy.

These include:

  • Research plan (and related materials arising from research such as survey data and interview notes)
  • Instashop feature matrix/spreadsheet
  • UI requirements document
  • Usability test results document

If you’d like to view copies of any of these documents, please feel free to contact me directly.

Cold Rain Studios

This is custom heading element

Cold Rain Studios is a small creative agency focused on making digital products that make positive impacts. In addition to in-house projects, they also offer a full range of services including strategy, research, design, development, maintenance, and marketing for clients.

This is custom heading element

I conducted usability testing for Pick, an iOS app that “allows you to quickly discover which picture other people prefer.”

Pick was released in iTunes on August 21, 2017.

Details forthcoming.

This is custom heading element

I conducted research and testing to support the design process for Empathize, a mobile app that connects people who need someone to talk to. I worked alongside a UX designer, a visual designer, and an iOS developer in a distributed team.

My work on Empathize included competitive analysis, field studies, contextual inquiry, user interviews, A/B testing, and usability testing. The app is currently in development.

In compliance with my non-disclosure agreement, I have omitted confidential information about this project.