Event Task Manager

Mobile App Design & Usability Testing

The goal was to design a mobile app that allows event organizers to manage tasks that are coordinated between multiple teams.

Summary

Mission

The goal was to design a mobile app that allows event organizers to manage tasks that are coordinated between multiple teams, e.g., caterers, interior decorators, photographers, videographers, lighting engineers, etc. Some of the main features outline in the brief were the ability to create and assign new tasks, make requests to team members, and keep track of the progress for all tasks assigned.

My contributions

I designed this app from scratch which included doing user research and talking to the target audience, conducting competitive analysis, defining user flows, suggesting additional features based on users’ needs, creating wireframes and final UI, building a prototype and conducting usability testing, and improving the app based on the test results.

Results

  • Complete app design from concept to final UI (0 to 1)
  • 48% reduction in time needed to add tasks from a template
  • 67% reduction in number of clicks needed to complete a task
  • 10% increase in completion rate, bumping it to 100%

Services

  • User Research
  • User Flows
  • Wireframes
  • UI Desing
  • Prototyping
  • Usability Testing

My Role

UI/UX Designer

The Brief

For this project I recieved an open-ended brief, including a minimum set of features that the app needs to have, while also leaving room for me to figure out which additional features it would be beneficial to add to the app.

The main goal was to design a native mobile app that allows event organizers to manage tasks that are coordinated between different teams.

List of required features

Starting With Research

Since I needed to figure out which features the app needed to have, research was the most logical place to start this project. Two main activities I focused on were competitive analysis and user interviews. The information I gathered helped validate the base set features and also allowed me suggest a list of additional features that would be beneficial to the users.

Competitive Analysis

Based on the feature set the app has the biggest overlap with general purpose To-do list apps, so the first step was to take a look at them and analyze how they handle tasks. At the core, these apps turned out to be quite similar and they mainly differ in additional features.

How adding tasks works across different to-do apps

Who Are We Designing For?

To get a better idea how to integrate the required features into the app, as well as get an idea of what other features the app should include, we need to take a look at our users.

Main user type that emerged from this research were brand amassadors that organize in-person event on a regular basis without that being their main job.

User Persona - Brand ambassador

What We'll Do Differently

As we've seen, most to-do apps handle tasks in pretty much the same way, so instead of trying to reinvent the wheel we will focus on building on top of that foundation with features that will most benefit our target audience.

Main ways the app will be different:

  • Organizing tasks into events
  • Organizing people into teams
  • Task and team templates
  • Integrations with apps like Eventbrite

List of minimum and additional features

Exploring the flow

Once the list of features was finalized, it was time to see how those features can be combined into a cohesive experience.

Defining The Big Picture

The first step of combining all those features into something that makes sense was a flowchart that shows all the screens that make up the app and how they are connected.

Flowchart

Going Deeper with Wireframes

After the first iteration of the flowchart was complete, it was time to start exploring the flow on a screen-by-screen basis, using wireframes. I had a pretty clear vision for what I wanted the app to be like, so I went with more detailed wireframes.

Usability Testing

Going High-Fidelity

After the flow was defined it was time to validate the designs, so I decided to go ahead and create the high fidelity designs to make the testing as smooth as possible.

High-fidelity designs

Setting Up The Test

Once I had the high fidelity designs for the screens needed for testing, I proceeded with creating the prototype, and setting up tests in Useberry.

We already established that the flow for adding tasks is quite similar across all the apps we looked at, so there was no need to test that as users are already familiar with that type of flow. Instead, I decided to test one of the features that were unique to this app - Templates.

The task users needed to complete was relatively simple - to add tasks from a template. This would include starting from an empty state screen, clicking the proper button, picking any of the templates from the gallery (not shown below) and confriming that you want to use that template.

Running The First Test

When I ran the first test, the results were interesting — let's take a look...

First version I tested

Results of the first test

Second Test

After analyzing test recordings and click heatmaps, I noticed three important things:

  1. People were having trouble identifying the "Start from template" button
  2. A lot of people tried to find the option by clicking on the floating action "+" button
  3. On the template preview screen they were trying to click on empty checkboxes

The solutions were pretty obvious: making the button more prominent by adding an outline, adding template into the floating action menu, and removing checkboxes from template preview as they are not needed there. I made these corrections to the design and ran the test again, it's very interesting to see what minor design changes can do...

Second, updated version I tested

Results of Test #1 vs. Test #2

Small Changes, Big Results

The heatmap below, showing where users clicked during each test, perfectly illustrates how a change as small as adding outline to a button can create big results.

Heatmap showing clicks in V1 vs. V2

Final Product

All the findings from the usability test were impletented to make the first version of the app as polished as possible, and to make sure we are off to a good start in terms of usability. Below you can see all the screens that were designed for the app, as well as a feature-by-feature breakdown of the key flows.

Final UI

Tasks, alerts & requests

These represent the core of the app and everything else is organized around the concept of tasks, alerts and requests you can add, manage and assign.

Different task types

Events

The app lets the user organize tasks by events. It then further organizes them by time and teams. The timeline also categorizes tasks based on when they need to happen - before, during or after the event the user is planning.

Event screens

Teams

The app lets the user create and manage teams for each event they are planning.  The ability to assign tasks to people and track their progress ensures a smooth experience for the user.

Team overview and management

Templates

As our users often organizes the same type of events, the app lets them quickly add all of the tasks, or all of the team members, from a template or from a past event they organized.

Task templates

Have a design project you need help with?

Get in touch