Toptask, the hiring app: UX Case Study

Redesigning the Forms

Quick Summary

On the surface, the form for posting tasks on Toptask seemed simple. Employers select task type, and add in a few details like location, dates, and pay rates. However, once we began our user research, we discovered crucial pain points and ways to further simplify the form that we hope would increase turnover for Toptask.

Toptask Overview

Since their launch in Jan 2017, Toptask has been growing rapidly by helping people outsource tasks cost-effectively to London university students. Their app helps people get tasks done while giving students the experience and extra income.

Image Credit: Toptask

The Challenge

Redesigning forms in 2 weeks

The original brief from Toptask was to primarily add a remote option during the task posting process. The brief also included creating a ‘task history’/easier way to rehire students, where users can view record of past work history. However, after research, our solution became

‘a simplified form for employers to not only post remote jobs but also a more engaging form for posting on-site jobs as well’

For Toptask, redesigning better forms would mean an increase in new customers.

My Role

In a team of 4, we worked together on all aspects of the project.

Individually, I was responsible for presenting research findings, defining persona, experience map, problem statement, user flows, concept ideations and developing the initial paper prototype, updating parts of the hi-fidelity prototype on sketch (and bringing snacks for the team).

The Discovery

Early User Insights

The first week was a fast paced and highly intense research stage. Our kick off meeting with the client revealed their business needs, constraints, and that conversion of business owners was priority. Luckily, we were given enough students to contact for interview, but we struggled to reach more business owners. We contacted everyone we knew in our network, business owners on linked in, and also met with a café owner. In all, we interviewed 10 business owners, both current users and potential customers. We asked questions like:

Tell me about the last time you hired someone through Toptask?
What did you like/dislike about your last experience?
What is important to you when hiring a student?

These are the trends we found from affinity mapping, and typical behaviours we found that we leveraged in the design.

Affinity Map
Key User Insights

Persona

From our interviews, it was clear that a typical Toptask user was a busy entrepreneur who is more likely to use the app on the go. We used Scarlett’s persona constantly throughout the project to guide design decisions, priorities, and create empathy amongst the client and within the team.

Persona

Emotional Journey

We also mapped out Scarlett’s emotions throughout her journey of hiring a student with Toptask. This was key to setting client expectations about the aspirational emotional state we were aiming to design for.

Experience Map

We compared Toptask to a speedboat that was on a mission to go as fast as possible. However, there are a few anchors slowing it down as reflected below.

Major challenge we found from research was that

‘Employers don’t like filling forms and posting tasks, they have to. With the current platform, they did not have a pleasant experience while posting tasks’

Aspirational Vision

We also analysed what other outsourcing apps were doing well and more importantly what they were doing wrong. While Toptask was ahead with its strong customer service and providing carefully vetted students, our main takeaway was,

‘To compete, Toptask needs to have the shortest and simplest form’

At this point, it was clear that simplifying job task form is the most essential feature that will require least amount of effort from Toptask to achieve higher impact with their users.

Feature Prioritisation Matrix

This was a turning point as Toptask then decided to pivot from the original brief. Our vision now became

“How can we create a form that more users would like to fill, and let’s make sure they look forward to repeating it”

However, given the short, we realised that we may be over ambitious. We then decided to narrow down our goals

‘At minimum, our goal was to create an experience to remove any pain points while filling the job posting form, for both remote and on-site.’

Redesigning the forms

The second week was equally intense. We filled the whiteboards with sketches, and tons of concepts emerged. They all turned into some fidelity of something we could test with people. Ultimately, it helped us in developing these mockups. Here are examples of changes in the designs we made:

Making the forms more engaging

Getting people to fill forms is not easy, and it is often harder to convince people to fill a form that they are seeing for the first time. Since the business goal is to attract more new employers, we aimed to make the forms more engaging and intuitive. We updated the landing page by highlighting USP of the business, adding icon and a more engaging CTA. Users now felt there was a reward at the end of filling the form as a quick glance of the form revealed benefit of getting their task done from a top student.

Engaging Users — Home Page

We added images to the categories, after some hesitation, as we were asked to keep the same branding. However, users found the page more attractive after we added images so we decided to use them.

Engaging Users — Categories

Simplifying the form

Making the form flow more easily

We went through intense discussions whether to keep one-page form versus splitting the form across multiple pages.

After testing, our decision was clear. Users felt the current form was simple. However, once they saw pop ups within each field, they began to get frustrated. They also felt the questions were all packed together, and the form did not flow like a natural conversation.

Having one-page form with packed data entry may work if users are trained and using it day-in day-out. However, since our persona is a busy entrepreneur, who is not very tech savvy, it was necessary to have a simpler looking form. This is why we decided to split across multiple screens by dividing the form into topics.

Making Forms flow Easily

Saying thanks to close the conversation

We added a thank you page with next steps to close the conversation. With the current app, users are taken directly to the task summary page, while they expected to see some sort of a confirmation page and find out how they will get notifications from students.

We realised adding an option to share printable invoice is not essential but helpful, because we found that many of the employers share invoices with their accountants.

Closing the Conversation

Making users in control of the form

During the design studio, we decided to add a progress bar to help people feel more in control during the process. We also considered summary menu during ideation, as users may need to check back on details like dates and pay rates before posting. However, we stuck with the progress bar because the form is quite short and does not require gathering answers. We instead added an alert for customers to be able to make any final edits before publishing their post.

Adding the Remote Feature

Users were insecure about revealing their location if they were hiring remote work, so we let users select remote option and complete the form by skipping the location field.

Adding the Remote Feature

Choosing appropriate controls

This was a challenging decision. Although we discovered early on that selecting date and time through calendar and time on the same page was more natural than having other options like drop down or entering text, we struggled with making the form repeat schedules. We considered giving users repeat options e.g. every weekly, monthly, or set custom requirements. However, we did not add it in our final solution as we wanted to limit the number of changes we were testing.

Current flow does not allow you to select both start and end time for on-site jobs, which we added. For remote jobs, only setting deadlines was important so we simplified the form to reflect that.

Choosing Appropriate Controls (Remote Option)
Choosing Appropriate Controls (On-Site Option)

Making questions easy to answer

The most important question of the form was payment, and this was also where users struggled most. Some users said they would leave the app at this stage, because setting payment was confusing.

While doing usability testing, all 12 of the users tested mentioned that they would pay fixed rates as setting hours is very subjective. Business owners would rather stick to a fixed budget for the project. Setting fixed rate would also accommodate for tasks like babysitting, tutoring, where hours are known.

From a business perspective, giving an hourly option by fixing minimum hourly rate would prevent users from setting lower pay. This is taken care of with the added option to set timings early on in the form and adding validation while setting fixed rate. This is why we decided to remove the hourly option altogether, so users can simply enter their budget of the scope.

Making Questions Easy to Answer

How We Got There

Here are few examples of key iterations we made during prototyping and testing, I will be updating with more examples soon.

Iterations (Home Page)
Iterations (Confirmation Page)
Iterations (Designing Calendar)

The Solution

Scenario tested: Post a task to translate french to english

Please click here to try the final prototype

Results & Next steps

Our solution has room for improvement and needs further testing. However, user tests showed that the form is simpler, more engaging, and more users can now post tasks more efficiently.

Before: 4/8 users could post tasks without any help
After: All 8/8 users can post tasks without any help

We also suggested further improvements to the form that were out of our scope

- Analyse if users are selecting ‘others’ in category. This would confirm user test results that categories need to be further simplified

- Consider a reward system for employers to post high quality job descriptions/approval before a job post is accepted

-Most importantly, improve the form to make it easy for business owners to repeat hiring

Key Takeaway

This was my first UX client project, and I was thrilled with the opportunity to work on an ambitious project. What I learned most importantly during the process was to,

- Look for assumptions to be disproved rather than validated

- Design forms that have engaging conversation with the user

- Consider business goals and constraints at all times during the design

Thank you for reading! If you enjoyed this case study or have any feedback, I’d love to hear from you. You can connect with me on linkedin


References: I was inspired by the book ‘Forms that Work’ by Caroline Jarrett and Gerry Gaffney while working on this project