uTree

Project Overview

uTree is a Shopify app that functions as a suggestion engine building tool. uTree allows business-side content managers to create interactive suggestion trees for their Shopify web stores.  These suggestion trees allow consumers to find product information or recommendations based on their needs in a fun, easy way.

Problem Definition

Discovering the Problem

The story of uTree really began with a chair. I was shopping online on staples.ca for a chair, but I couldn’t find the information I needed. What I ended up with when I made my purchase was a chair that ultimately doesn’t suit my needs. The whole time I was shopping, I was wishing that I could just talk to an employee like I would in-store to ask their expert opinion.

Research

Project Concept & Scope

Initially, I was focused on solving the problem for staples.ca in particular. To validate the concept, I circulated a survey asking respondents to answer a series of questions about their experience shopping online at Staples. Two thirds of people I surveyed said they have had experience with the staples website and that they felt the current platform did not meet their needs in terms of finding products. People often mentioned that there was too much information, or that the information provided was not helpful to them.

Competitive Research

I decided to expand the scope from here and do some competitive research to see how other companies solved this problem.

I found that many niche retailers, like Michaels and The Home Depot add value for their customers by offering DIY tips that incorporate product suggestions. However, these companies all use passive media such as text to create these experiences. This lead me to realize a point of potential innovation by making the recommendation of products interactive.

User Research & Personas

To put these findings into context with who my end users would be, I did some research and discovered that my two primary user groups would be casual retail consumers and business website designers / content specialists. It was here that I determined uTree should be designed as a Shopify app due to Shopify’s excellent app store that is easily accessible and universal across all Shopify web stores.

I conducted a mix of in-person and online research to develop two user personas, one for each of my primary user groups.

Front-End User:

• Casual retail customer
• Little knowledge about specialty products or niche offerings
• Looking for expert recommendations
• Needs highly functional, simple design 

Back-End User:

• Content specialist
• Looking for easy to use tools that require no programming knowledge
• Needs to translate company expert knowledge to an e-commerce platform

Design

Content as Conversation

I used these personas to help me develop a content framework for uTree’s design by creating a conversation between the user and the platform. I focused on the front-end persona as the needs of the front-end user would inform what design decisions I would need to make for the back-end user to be successful when creating their recommendation tree.

The need for this design shift became clear in user testing of earlier prototypes. The choices that lead to this decision are summarized in the midpoint progress report I created:

Below are a few content-as-conversation scripts I developed that I used to help shift the tone of uTree’s design:

UX Theme

Based on these reworks, I created a UX theme for uTree: Choice made easy, for both the back-end designer and the front-end consumer. This UX theme re-introduces the idea of interplay between the front-end and back-end users, and that ultimately, uTree is about making choice as simple and smooth as possible.

Lo-Fi Prototype & Design Work

uTree went through many iterations during the design process, from the initial idea of simply re-working the staples.ca website, to what uTree eventually became.

Below are some images from the design process, including a cork board with user flows, and a few lo-fi paper prototypes and wireframes:

Project Results

Final Prototypes

To illustrate what uTree would be able to do, I created two case study prototypes: One for Staples, and another for the OCS (Ontario Cannabis Store).

These two use case prototypes showcase what a back-end content manager would be able to create when using the uTree app on their Shopify site.

What’s Next?

I am continuing to design uTree. The next steps include:

• Building out a detailed back-end prototype
• Finalizing the functional requirements
• Updating and revising the project timeline and scope

Many of these steps are already underway, including a preliminary functional requirements document and business case document.