OVERVIEW

About the company

Onlinelabels.com is an online printing supplements store and printing service, provider.
They help customers to find and order printing supplements and blank labels of various materials and sizes.
Customers can design and print amazing labels on the fly.
The company has a slogan 'Click. Print. Stick.'

Problem Statement

The problem
A lot of unsatisfied customers reviews such as "the product was difficult to use after ordering".
Challenge
To determine the difficulties customers have after purchasing the product in realm.

 

My Role
✓ User research
✓ Storytelling
✓ Competitor Analysis
✓ User Flow
✓ Wireframes
✓ Prototype
✓ Usability Testing

 

Timeline
4 weeks

RESEARCH

Goal: To understand the current project and audience through research
Process: Client Interview | Online Reviews Analysis I Competitive Analysis | Usability Testing

Client Interview Findings

The users are: small and middle business, solo entrepreneurs who want to print out labels by themselves, using their own equipment.
Customers' age is varied. There can be very savvy computer users and “old school” generation of people who are not very familiar with computers.
Storytelling
To fit the user shoes during the process and to understand better-existing scenarios of interaction I created the "happy" storyboard from point A to Z.
Point A – the user identify needs. In my case – the user decided he needs labels.
Point Z – the user is satisfied and happy with the product.

Pain points findings from online user reviews

✓ hard to find a template to work
✓ useless tutorials
✓ difficulty with editing and printing process

Competitive analysis

In order to determine potential advantages and disadvantages of 'www.onlinelabels.com' service, I conducted a competitive analysis by evaluating the strengths and weaknesses of direct and indirect competitors.

 

I was focused to the following processes (parameters):
1. Printing manual – instructions
2. Find a template on a web site
3. Upload an image
4. Edit the template
5. Preview and print the template

Usability Testing

To see by my own how the users interact with the web site and what problems they faced (based on their tasks) I conducted in person and remote usability testing on the existing web site version.

 

My Usability testing strategy:
Observe offline and online interactions.

 

2. Define the testing task.
Scenario: "you ordered online stickers paper to print out the labels for your small company needs. The mailman delivered the package the next morning and you are getting a hurry to your computer to print out personal logo-labels".
(at the beginning, every user got an envelope with sticky paper and factory instruction)

 

3. Tasks order.
• Get an envelope with the sticky paper.
• Print out labels.

DEFINE

Goal: Clearly articulate the problems need to be solved.
Process: User flow | Affinity mapping I Site map

User flow

After watching the records again and again I discovered 3 different routes of users behavior and created 3 user flows.
Next, to each step, I put the emoji to understand user emotional condition.

Affinity Mapping

I use the affinity mapping method to find similar flow issues and combine them into theme groups.

 

I found issues were divided into 3 categories:
1. Instructions – problem definition - Information Design problem – provided information doesn’t help users reach the goal.
2. Getting template experience – poor information architecture – users can not easily find what they want.
3. Creative tool – 'Maestro Label Designer' – poor navigation – users had difficulty to find the right buttons and tool.

 

I also highlighted important findings:
✓  Experienced users didn’t read the instruction at all, they used template number only.
✓  Inexperienced users followed the instructions. The web address in the instruction is too long to type it manually. The web page from instruction itself shows printing tips but NO clue HOW TO GET A TEMPLATE.
✓  For users absolutely unclear what is 'Maestro Label Designer' tool. 'Maestro Label Designer' was guided by trial and error method.
✓  Users faced new challenges after the launch of the 'Maestro Label Designer' tool:
1 – how to upload the image
2 – how to find a full-page design version.

Site Map

Then I created a sitemap, which I was able to see the navigation structure.

IDEATIONS

Goal: To develop information architecture and user flows based on research insights
Process: Task Flow | Sketching

Task Flow

I accompanied the user flow with a task flow, mapping out the path users would take to accomplish additional tasks. This helped to define the key screens and interactions required for users to find information on the site.

Sketching

Based on my research findings I had a brainstorming session and moved to a potential problem-solving-sketching stage.
Sketching helped me visualize the structure of the website problems I'm working on.

VALIDATION

Prototypes and User Testing

After creating low-fidelity wireframes, I converted them into an interactive prototype using Marvel software. This prototype was used to run the user testing and allowed to enhance features and to eliminate critical pressure points.

SOLUTION

Instructions

INSTRUCTIONS is the first touching between the user and the printing process.
In order to minimize the number of actions user has to go through, I created a new instruction based on the new user flow design.

Improve Templates Search Experience

Considering the results of user testing and the analysis of web site architecture, I created a new user flow.
Simultaneously I worked on the 'Product Page' improvement because it's a "keyframe" in the flow.

Reconsider User Flow

This design demands that users perform a series of steps before they can perform a function, and spend some time to study 'Maestro Label Designer' tool.
Insights from user testing: Users are not reluctant to spend additional time learning a new tool.
I rebuilt new user flow in a way  "minimum affords – maximum information".
EXISTING FLOW
NEW FLOW

Rework "Create the label" experience

During a creative process users had 3 main issues:
  1. "How to upload the image?"
  2. "Can I see the whole sheet or it's only one?!"
  3. "Don't know how to print it out?"

WHAT IS NEXT?

Next I would:
✓ Conduct another round of usability testing
✓ Improve navigation design and information design

OUTCOMES & LESSONS

✓ The importance of fundamental stages of design. It's easier to fix something during the prototyping or designing process rather than fix a part of a huge system.
✓ Information Architecture and Information Prioritizing are like a foundation for the web site.

___________
2019