Helptask

Helptask

Capstone UI/UX case study

Allowing users to post small jobs and find suitable helpers

Role

UX Research, Testing, UX/UI Design

Platform

Mobile (IOS)

Tools

Figma, Maze, Google Forms, Old notebook and pencil

Duration

6 Weeks (80 hours total)

Background

Doing everyday tasks like mowing the lawn, painting the fence, or getting groceries can feel mundane and take up a lot of our time. For some tasks, we may not have the necessary skills to accomplish them. Thankfully, there are plenty of people who have the will and skillset to do these tasks.

Although there are many people willing and able to do these tasks, there are not many services that lets users get in touch with people who can help.

Doing everyday tasks like mowing the lawn, painting the fence, or getting groceries can feel mundane and take up a lot of our time. For some tasks, we may not have the necessary skills to accomplish them. Thankfully, there are plenty of people who have the will and skillset to do these tasks.

Although there are many people willing and able to do these tasks, there are not many services that lets users get in touch with people who can help.

Solution

HelpTask is an end-to-end application that connects users with potential helpers. Helptask allows users to post various tasks and let them browse through countless professional- and non-professional Helpers in search for the right person for the task.

HelpTask is an end-to-end application that connects users with potential helpers. Helptask allows users to post various tasks and let them browse through countless professional- and non-professional Helpers in search for the right person for the task.

Empathize

Main Research Goals

  1. Get an insight into what tasks individuals want or need help with

  2. Get an insight into how individuals find help

  3. Get an insight into why individuals pay for certain tasks

  4. Get an understanding of what similar services are available

  1. Get an insight into what tasks individuals want or need help with

  2. Get an insight into how individuals find help

  3. Get an insight into why individuals pay for certain tasks

  4. Get an understanding of what similar services are available

User Survey and Interviews

To understand how users approached getting help from others, I conducted 3 user interviews and a survey with 26 participants to see if there were any patterns worth recognizing.

To understand how users approached getting help from others, I conducted 3 user interviews and a survey with 26 participants to see if there were any patterns worth recognizing.

Example Questions

  • What are examples of tasks that you would need help with?

  • How do you reach out to someone?

  • What are your experience with paying someone else to do a job for you?

  • Tell me about a time you had very specific problem you needed to fix, and how you dealt with it?

Key Insights

Main Takeaways

  • A few participants replied that they would pay for more free time or convenience

  • Most participants felt safer using professionals for difficult jobs

  • A majority of participants found it hard to find and compare professional services

  • Some participants found it difficult to get in touch with/or communicate with certain professionals

  • A few participants replied that they would pay for more free time or convenience

  • Most participants felt safer using professionals for difficult jobs

  • A majority of participants found it hard to find and compare professional services

  • Some participants found it difficult to get in touch with/or communicate with certain professionals

Competitive Analysis

For my competitive analysis, I analyzed 5 different services that offered ways to let users post jobs or connect with potential helpers. The services were vastly different in terms of features and niches they focused on.

For my competitive analysis, I analyzed 5 different services that offered ways to let users post jobs or connect with potential helpers. The services were vastly different in terms of features and niches they focused on.

Define

Based on the research insights, I was able to create two relevant user personas to highlight potential user needs.

Based on the research insights, I was able to create two relevant user personas to highlight potential user needs.

1

2

HMW questions and POV statements

How might we

  • Help people decide what to do and who to contact?

  • Tell whether a task is difficult or requires specialized expertise?

  • Help users free up time?

Point of view

  • I´d like to explore how users can find helpers and contractors

  • I´d like to explore how users can share jobs

  • I´d like to explore ways users and helpers can communicate effectively

Ideation

Feature Set

After defining personas, HMWs and POVs, I came up with several features that would give a better picture of what to include in my design. Due to time constraints, my focus was on creating an MVP, meaning that I would only focus on the must have´s and a few of the could have´s.

After defining personas, HMWs and POVs, I came up with several features that would give a better picture of what to include in my design. Due to time constraints, my focus was on creating an MVP, meaning that I would only focus on the must have´s and a few of the could have´s.

Must have

Browse

Shows all Helpers

Search

Search for relevant Helpers

Sort/Filter

Way to sort between different categories and criterias of work or helpers

Rating System

A way to see and read about previous experiences with helpers

Direct Message

Way to direct message users and helpers

Price

Shows price of service offered by Helper

Tags

Way to tag by professionalism or type of work

Post Task

A way users can post tasks or jobs that need to be done

Description

Description of what needs to be done

Upload Image

Upload images of the task or what needs to be done

Notifications

A way to get notified when new Helpers post or responds

Could have

Category

Shows different categories of tasks

Schedule Time

Built in feature to help with time Scheduling

Feedback

Way for users to give feedback and rate helpers

Qualifications

A way for Helper to show their qualifications (Eg. Certified carpenter etc.)

Set Availability

Helps users set up when you are available for doing jobs/Getting help

Budget

Select budget users are willing to pay for tasks

Nice to have

Response Time

See how quickly a helper is able to respond to DM

Favorite

Shows favorite helpers (Selection-based)

Past Helpers

Show helpers that users have used in the past

Professional Level

Shows what level of professional a helper is (Eg. Novice, or certified Professional)

Can come later

To-do List

A way for users to track all tasks that need to be done

Task Flows

Post task
Cancel task
Browsing helpers
Messaging a helper
Responding to a helper

Empathizing

Early Wireframes

Rather than being heavily text-based, I wanted to explore a design based on iconography and visual cues. The design needed to have clear sections and overall consistency. One of the key features would be the ability to see which credentials a helper had by using a crown or checkmark icon.

Rather than being heavily text-based, I wanted to explore a design based on iconography and visual cues. The design needed to have clear sections and overall consistency. One of the key features would be the ability to see which credentials a helper had by using a crown or checkmark icon.

UI elements

For the UI elements, I wanted to emphasize a sense of utilitarianism.

For the UI elements, I wanted to emphasize a sense of utilitarianism.

Color Palette

Primary

A muted green with a shade of brown, that represent a sense of “growth”, “calmness”, essential to the outsourcing nature of the design solution. It can also be associated with a sense of DIY.

A muted green with a shade of brown, that represent a sense of “growth”, “calmness”, essential to the outsourcing nature of the design solution. It can also be associated with a sense of DIY.

Primary

A rustic shade of purple, that conveys a sense of “richness” and “creativity”, and contrasts the primary greens perfectly.

A rustic shade of purple, that conveys a sense of “richness” and “creativity”, and contrasts the primary greens perfectly.

Neutral

An off-white/eggshell look, that is often associated with indoor painting, and is an ideal characteristic background to highlight the different UI elements.

An off-white/eggshell look, that is often associated with indoor painting, and is an ideal characteristic background to highlight the different UI elements.

Logo

Small

A nod to the IKEA instructions man, which may strike familiarity with users. The mascot goes along with the line art style featured in the icon set.

A nod to the IKEA instructions man, which may strike familiarity with users. The mascot goes along with the line art style featured in the icon set.

Large

The chosen logo type features clear, yet rough, misaligned lines, giving it a sense of DIY-ness.

The chosen logo type features clear, yet rough, misaligned lines, giving it a sense of DIY-ness.

Small

Typeface

Helvetica is a clean sans-serif font that is easy to read on all surfaces. Chosen for its universal and utilitarian look, which gels well with the theme of this end-to-end solution.

Helvetica is a clean sans-serif font that is easy to read on all surfaces. Chosen for its universal and utilitarian look, which gels well with the theme of this end-to-end solution.

Header 1

Helvetica Bold 24

Header 2

Helvetica Bold 20

Header 3

Helvetica Bold 18

Button

Helvetica Regular 16

Body 1

Helvetica Regular 14

Body 2

Helvetica Regular 12

Icon Set

The minimalistic icons give a clear representation of what they symbolize. They complement the utilitarian feel that goes alongside the chosen typeface.

The minimalistic icons give a clear representation of what they symbolize. They complement the utilitarian feel that goes alongside the chosen typeface.

Navigation
Categories
Bottom Nav
Other
Upload
Social Proof

High Fidelity Wireframes

Testing

The goal of the usability tests was to see if the design made sense in terms of information architecture. I also wanted to see if participants could find the information they needed using the visual cues.


In order to test different iterations, I did 2 rounds of usability tests with a total of 11 participants.

The goal of the usability tests was to see if the design made sense in terms of information architecture. I also wanted to see if participants could find the information they needed using the visual cues.


In order to test different iterations, I did 2 rounds of usability tests with a total of 11 participants.

1st Usability Test

  • Post Task

  • Find helper using browse feature

  • Send message to helper / Respond to unread message

  • Post Task

  • Find helper using browse feature

  • Send message to helper / Respond to unread message

2nd Usability Test

  • Find certain helper based on predefined criterias

  • Share a certain job with a helper using direct messaging feature

  • Find certain helper based on predefined criterias

  • Share a certain job with a helper using direct messaging feature

“I think the layout and navigation uses common design patterns which made it fairly easy to navigate. The color palette is great as well.”


“The prompts "share" and "add" was a little confusing because they were inconsistent. If I'm "adding" the bathroom project, it should be the button should say "add" not "share"?"


"in the message box, it was hard to notice which ones were "new /unread"

Key Takeaways

  • Some participants found the design clear and intuitive, while others felt that doing certain tasks was confusing

  • Almost none of the participants consciously noticed whether a helper was a certified professional or not

  • Some participants felt that certain prompts were misleading or confusing

  • Some participants struggled to differentiate between new and old messages/Notifications

  • Almost all participants were positive to using this type of solution in their daily life

  • Some participants found the design clear and intuitive, while others felt that doing certain tasks was confusing

  • Almost none of the participants consciously noticed whether a helper was a certified professional or not

  • Some participants felt that certain prompts were misleading or confusing

  • Some participants struggled to differentiate between new and old messages/Notifications

  • Almost all participants were positive to using this type of solution in their daily life

Reiterations

The goal of the usability tests was to see if the design made sense in terms of information architecture. I also wanted to see if participants could find the information they needed using the visual cues.

In order to test different iterations, I did 2 rounds of usability tests with a total of 11 participants.

The goal of the usability tests was to see if the design made sense in terms of information architecture. I also wanted to see if participants could find the information they needed using the visual cues.

In order to test different iterations, I did 2 rounds of usability tests with a total of 11 participants.

Notifications

Separated new and old messages

Separated new and old messages

Before
After
Before
After

Sharing tasks

Made sharing tasks in chat easier and more intuitive

Made sharing tasks in chat easier and more intuitive

Helper Cards

Before

  • Visual representation based on user research and participants’ needs

  • Shows name, description, rating (Social proof), price, and tags that display expertise

  • Profile picture checkmark to display professionalism

  • Arrow icon leading to profile section

  • Visual representation based on user research and participants’ needs

  • Shows name, description, rating (Social proof), price, and tags that display expertise

  • Profile picture checkmark to display professionalism

  • Arrow icon leading to profile section

After

  • Removed description due to irrelevancy

  • Moved checkmark to the tag section

  • Added amount of reviews to better show trustworthiness

  • Fixed visual hierarchy and type weight based on importance

  • Removed description due to irrelevancy

  • Moved checkmark to the tag section

  • Added amount of reviews to better show trustworthiness

  • Fixed visual hierarchy and type weight based on importance

Minor Iterations

  • Tweaked text size to make it more visible

  • Reworded certain phrasing to make it less confusing

  • Tweaked text size to make it more visible

  • Reworded certain phrasing to make it less confusing

Conclusion

Final Version

1. Post your task

2. Find a suitable helper

3. Plan the details

4. Kick back 🧘‍♂️

Test for yourself

Opportunities

  • The design only focuses on users that need help. The next step would be to look at the Helper side of the application.

  • The design only focuses on users that need help. The next step would be to look at the Helper side of the application.

  • Fleshing out the different job categories. This would require more research to get an overview of what jobs users need help with.

  • Fleshing out the different job categories. This would require more research to get an overview of what jobs users need help with.

  • Let users favorite certain Helpers

  • Let users favorite certain Helpers

  • Certification or apprenticeship overview. Allow for a better overview of the exact credentials a helper has. This could vary greatly in different countries.

  • Certification or apprenticeship overview. Allow for a better overview of the exact credentials a helper has. This could vary greatly in different countries.

  • Better schedule and availability overview.

  • Better schedule and availability overview.

Personal Takeaways

With a design like this, it can be easy to be overwhelmed by the amount of potential features that can be included. Keeping within a time limit and focusing on an MVP is a great way to remove excessive scope creep and overarching perfectionism. It allows you to get to the core of the problem without getting lost in details. It also allows you to test the solution more quickly.


To save time with the project, I opted for unmonitored testing. Although my rounds of testing provided valuable feedback, It made me realize that I missed out on a lot of key details and cues that I could have noticed with monitored tests. 

With a design like this, it can be easy to be overwhelmed by the amount of potential features that can be included. Keeping within a time limit and focusing on an MVP is a great way to remove excessive scope creep and overarching perfectionism. It allows you to get to the core of the problem without getting lost in details. It also allows you to test the solution more quickly.


To save time with the project, I opted for unmonitored testing. Although my rounds of testing provided valuable feedback, It made me realize that I missed out on a lot of key details and cues that I could have noticed with monitored tests. 

Back to top

© 2024 Kristian Storli

storlikris@gmail.com

Linkedin

X / Twitter

Dribbble

© 2024 Kristian Storli

storlikris@gmail.com

Linkedin

Dribbble

X / Twitter

Create a free website with Framer, the website builder loved by startups, designers and agencies.