HelpTask
Capstone UX/UI Case Study
Allowing users to post small jobs and find suitable helpers
Platform
Mobile (IOS)
Role
UX Research, Testing, UX/UI Design
Duration
6 Weeks (80 hours total)
Tools
Figma, Maze, Google Forms, Old notebook and a pencil
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.
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.
Empathize
Main Research Goals
Get an insight into what tasks individuals want or need help with
Get an insight into how individuals find help
Get an insight into why individuals pay for certain tasks
Get an understanding of what similar services are available
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.
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.
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?
Example Questions
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
Define
Personas
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 ways users can find suitable helpers or contractors
I´d like to explore how users can share jobs
I´d like to explore ways users and helpers can communicate effectively
Ideate
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.
Must Have
Shows all Helpers
Search for relevant Helpers
Way to sort between different categories and criterias of work or helpers
A way to see and read about previous experiences with helpers
Way to direct message users and helpers
Shows price of service offered by Helper
Way to tag by professionalism or type of work
A way users can post tasks or jobs that need to be done
Description of what needs to be done
Upload images of the task or what needs to be done
A way to get notified when new Helpers post or responds
Browse
Search
Sort/Filter
Rating System
Direct Message
Price
Tags
Post Task
Description
Upload Image
Notifications
Category
Schedule Time
Feedback
Qualifications
Set Availability
Budget
Shows different categories of tasks
Built in feature to help with time Scheduling
Way for users to give feedback and rate helpers
A way for Helper to show their qualifications (Eg. Certified carpenter etc.)
Helps users set up when you are available for doing jobs/Getting help
Select budget users are willing to pay for tasks
See how quickly a helper is able to respond to DM
Shows favorite helpers (Selection-based)
Show helpers that users have used in the past
Shows what level of professional a helper is (Eg. Novice, or certified Professional)
Could Have
A way for users to track all tasks that need to be done
Response Time
Favorite
Past Helpers
Professional Level
Nice to Have
Can Come Later
To-do List
Task Flows
Post task
Cancel Task
Browsing Helpers
Messaging a Helper
Responding to Helper
Design
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.
UI elements
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”-ness.
Secondary
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.
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.
Header 1
Header 2
Header 3
Body
Button
Tags
Icon Set
The minimalistic icons give a clear representation of what they symbolize. They complement the utilitarian feel that goes alongside the chosen typeface.
Navigation
Categories
Footer
Other
Photo Upload
Proficiency
Logo
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.
The chosen logo type features clear, yet rough, misaligned lines, giving it a sense of DIY-ness.
Small
Large/Banner
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.
1st Usability Test
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
“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
Notifications
Separated new and old messages
Reiterations
Before
After
After
Before
Sharing tasks
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
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
Minor Iterations
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 🧘♂️
Opportunities
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.
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.
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.