Haligone

Haligone helps local boutiques get better online exposure and helps them give their consumers better delivery experience.

My Role:
Lead UI/UX Designer
Time Line:
This is some text inside of a div block.
Project Type:
Web Application

Context

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Hypothesis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Step 1

Research

User Personas

The hardest part of this project was that it was two-sided market meaning we had two very distinct type of users. The first type of user was a boutique owner and the second type of user was the consumer. Int he end, we interviewed over 30+ boutique owners in Halifax.

Customer Journey

Next, I created the customer journey from the pain points I learned during the user interview stage. I found out that for Haligone to grow quickly we had great opportunities especially during the "delivery" and "adding inventory" stages.

Step 2

Process

  • The Problem
  • User Personas
  • Key Behaviours
  • Initial Functionality

Workflow Interactions

Through various usability interviews during the research process, I optimized this work flow so that the users could add
their friends and their gift ideas as fast as possible.

Step 3

Visual Design

  • The Problem
  • User Personas
  • Key Behaviours
  • Initial Functionality
Step 4

Impact and Reflection

  • Testimonials
  • What I would do differently

The Role

My role at Haligone Technologies was being a UX designer and front-end developer.  

For my UX designer role I did:

  • conducted over a dozen contextual interviews
  • Did 5 usability testings with the wireframe solution Haligone
  • Created work flows for the main features of the application
  • Created a high fidelity design in Adobe XD

For my front-end role I did:

  • Used HTML/CSS to style the web pages
  • Relied on React to create the routing and component functionality for the back-end developer

Users

The hardest part of this project was that it was two-sided market meaning we had two very distinct type of users. The first type of user was a boutique owner and the second type of user was the consumer.

Boutique Owners

Primary User Persona for Haligone

Secondary User Persona for Haligone

Consumers

Consumers Primary Persona

User Workflow

After  finding out the  persona type for boutique owners and consumers, the next step was to come up with user workflows.

New Product Task Flow
Check Order Task Flow

Paper Prototyping

After coming up with the personas, we needed different solutions for the delivery problem boutiques and consumers have faced. Thus, I led a fast sprint design session where we implemented Day 2 from Jack Knapp's Sprint book where each one of us produced as many paper prototype solutions as we could.

Below are some of the paper prototypes we came up with:

Store View Paper Prototype

Home Page For Consumer Paper Protoype
Address Picking for Checkout Paper Prototype
Order Confirmation and Signed Out Page for Paper Prototype

Once each one of us came up with potential solutions. We got together and voted screen by screen which ones we liked the best. At the end of the day, we had a mix of paper prototypes that I could later turn into wireframes.

Wireframing

To do usability testing and creating the initial user interaction, we began wireframing with Figma. We chose Figma because of the ease of use for its collaboration functionality compared to other alternatives such as Balsamiq.

Orders Screen

Checkout Screen
Product Details

High Fidelity Prototype

After more than a dozen usability interviews with the wireframe with both boutique owners and consumers, it was time to create a high fidelity design in Adobe XD. Below are some sample screens:

Product Details Screen
Boutique Products
Add New Items