Designing an Interactive Service Menu

About the project

As an intern at You.i TV Ottawa, I worked with a team to design an interactive service menu built-in to You.i website and a web-based mobile app. We found the back and forth process between the sales team and customers is long and time-consuming, and there was no such application to facilitate this process. As a result, customers of the company needed to wait for a sales agent to be in contact with them on a regular basis.

My role

UX Research, UX Design

Discovery

At the discovery phase of my project, I conducted user interviews with 3 employees in the sales team in order to get a better understanding of the problem, why they think that's a problem, and what expectations they have from the final design ideas.

Insights:

A service menu with a list of features that a user can select from
All list items should be optional
Customers will be able to select all the features that they want for their app
They finally can see the average size of the project
They may see the basic price for the project

Personas

Based on the interviews we set up two personas. Our users consisted of sales team members and customers of the company.

Their goal is to be able to interact with the service menu like adding and removing features and find the total cost and effort for the project.

Competitive analysis & Inspiring Example

The purpose of the competitive analysis was to find the strength and weaknesses of the competitors. However, we couldn't find a similar concept for configuring software. I found the same process in the car configurator webpages.

Ideation

To include our users in the process and see other teams' points of view, we invited a sales manager, UX manager, a developer, and two interaction designers to contribute their ideas.

Different teams had defined terms and categories for the customer journey in building an app. The goal of this session was to combine them and establish a set of common categories that all can understand and agree upon.

User flows

I visualized a path taken by a user to complete the whole process of ordering all the requirements for their app. This user flow was also extracted from the interviews done with the sales team and during the ideation process in the UX meetings.

Wireframes

At the beginning of my design process, I created a low fidelity wireframe for webpage and mobile version. It includes high-level navigation and menu structure to illustrate how content will be organized.

In the next step and following the feedbacks from UX leads, color and styling were added to create high-fidelity wireframes. I used Sketch for creating wireframes.

Annotated Wireframes

Once the concept for interaction design had been finalized, wireframes were thoroughly annotated to describe functionality and behavior to inform development stories and tasks.

Result

Using You.i TV design thinking process of research and design we arrived at high fidelity wireframes and prototypes. The next step for this project was brand application redesign which includes creating a name, symbology or design that identifies this service. I, as an interaction designer, was not involved in that process.

Biggest Challenge in this project:

Lack of common resources for the menu was one of the biggest challenges. Each team - developers, designers, sales- had their own category for the steps that a user needs to go through to order an app. Some of these categories overlapped.

To overcome this problem, I was constantly in contact with different teams and finally, during a full hack day, we could establish a set of features and steps that a user needs to choose from.

Page updated

Google Sites

Report abuse