Skip!

The Basics

Role
UX/UI design,
Front-End Dev
Time
4 Weeks, Feb 2018
Type
Web design capstone, Individual

Scope

The capstone project for the UX Design course at Victoria required students to discover a problematic interaction experienced by people and present a solution.

During the discovery phase, I found out people were frustrated with wasting time waiting in long queues. Hence, the proposed solution was a system that used present day technology of appointment systems and token based service to provide information of queue size and waiting times and also providing an option to get into a virtual queue.

Old website

Approach

Starting with user research to discover a problematic experience, I created wireframes and prototypes and getting them tested by users to iterate the design. Several changes were made to the initial design to accommodate user needs. The idea of a virtual queue was well received by users and became the focus of the project.

Process

During the length of the UX design course, I learnt to strategise my approach and organise the necessary materials needed to completely understand the problem and then using various tools find possible solutions. The aim of the project was to discover a problematic experience and present (and build) a viable solution.
User research and interviews allowed me to discover the problematic experience that was wasting time waiting in long queues on a daily basis. I followed by a literature survey to investigate the current technology for this problem.
After clearly understanding the problem, working with various user research frameworks (empathy maps, personas etc.) that we had learnt and practised in other assignments, I discovered various solutions.

The last stage was to incorporate the various, viable solutions in a way that would most benefit the users. Since most people today use a smartphone and the various apps on it, I proposed and created a solution through mobile applications. I created simple design assets (colours, typography etc.) and focused on creating a rich & pleasing user experience through a well designed app prototype that incorporated animations, sounds, and microinteractions wherever possible without overdoing it.  

Below are the details of the frameworks used in the process.

Old website

Persona

After making empathy maps the next step was to focus on the target audience for the tool. The possible users of such a tool could be anyone in the general public who visit places that attract long queues. However, to understand the particular needs and create the solutions, I created personas of people that would be most benefited from using such an application, drawing them using elements from real people.

Journey Maps

Following the user personas, journeys had to be created by empathising, hypothesising and observing real people perform tasks through their day in specific locations that match the personas. The user journey highlights the pains at various steps by means of the actions and thoughts. By understanding the pain points, opportunities for improving the experience by tackling the specific problems were devised.
The user journey for this project was divided into three stages, discover, consider and decide as the user actions while performing these tasks were best categorised into these stages.

Testing

Feedback from user testing was grouped by commonality and categorised accordingly and then arranged by their frequency of occurrence.
All the feedback was considered and the required changes were made in the final prototypes. HEART framework was used to measure the application, which allowed for better understanding the purpose, opportunity and expectations of the solution.

Breakdown

Wireflow

Due to the various screens that had to be considered and designed to be an effective solution to the problem it was essential for the experience to flow smoothly across every page. This was achieved by recognising the need for it early and creating first a task flow and then a wireflow. This allowed me to design a solution that was always aligned to the IA and flowed well across the screens.

Old website

Wireframes

The first step to proposing an interface design was to create wireframes. The initial wireframes were unrestrictive and inclined to the style of popular video editing tools currently available as it was revealed upon inquiry with video editors that there is a preference of having familiarity across all the editing tools. Having a completely new interface would require unnecessary learning. Hence, the initial wireframes were aligned towards currently existing and popular styles. However, after testing the wireframes with people who were not familiar with video editing tools it proved to be rather complex and were changed in the next iteration.

Home wireframe

Design Direction

As the project was for a UX Design course, I wanted to provide joyful interaction to users while keeping all important functionalities at the crux of the application. Interactive elements were used to provide a pleasant user experience. The interface was designed in a minimalistic way to focus on functionality but still deliver something visually appealing.

Old website

Outcome

The initial concepts were sketched and tested by users. The final designs were created using Framer app for prototyping. Interactions were added to designs using Framers CoffeeScript programming capabilities.
The significant parts of the project include:

  • Onboarding: The first time use onboarding experience includes an introduction to the key feature/functionality of the app. To further familiarise the user, a demo video showcasing the usage would be provided for the first time as well.
  • Home screen:Wanted to implement a different style of menu interaction to provide a more unique experience. Also added an empty state with a touch of humour.
  • Task flow: A simple flow that allows users to easily navigate around and view the necessary information. The location specific 'requirements' doc was created to bundle up any extra information users may need to know beforehand. To make users aware, the notification pops up after users select their choice of service at the venue.
  • In queue features: To keep the screen clutter free, I created separate sections containing extra features and information that was present in a carousel form and accessed via swipe gestures.
  • Alerts: The idea was to provide a location based alert to the user for them to reach the venue with just enough time in hand. The option to get directions to the venue was provided and would use 3rd party apps (google maps) for giving route information.
  • Notifications: Incorporated notifications that would be pushed to app users as well as a possible onboarding strategy.
Old website

Challenges and Learnings

This project was created incorporating a variety of UX and design skills. As my first major project in UX it was filled with challenges. From approaching people for interviews and testing to actual UI design to solve the issues. I went back to the things we learnt back in class at each step and stuck to textbook processes to focus on quality UX. I also spent quite some time to learn a prototyping tool, Framer, my first, to create an interactive prototype to bring my ideas to life. There was a lot i learnt throughout this time and is reflected from the starting point to the final product.