UX/UI Case Study №4: Joule
Completing technical tasks has become more common as businesses become increasingly digital. However, sometime these smaller tasks (a.k.a microtasks) take up too much time for any real progress to be made. Micro-tasks include: fixing Wordpress bugs, code updates, image re-sizing, and SEO optimization.
Joule is an AI-driven task management platform which makes progress a priority. It is a simple and user-friendly way to get micro-tasks done quickly and easily.
The client needed a design for the worker mobile interface and a mobile prototype for Joule. “Worker” refers to the individual (typically a freelancer) using Joule to sign up for micro-tasks and be compensated for every micro-task they complete.
Design Process
The design thinking process was followed to ensure that design decisions were supported by research and feedback — with an iterative process during the testing phase.
Research and Planning
The first thing I needed to do was understand who I was designing for. To understand the target user I decided to conduct in-depth interviews with people who have experience freelancing. I also created surveys using Google Forms to confirm findings from the interviews. I had a couple research goals in mind as I conducted the interviews.
Research Goals
- Understand demographics of freelancers
- Understand work-life, goals and frustrations encountered
- Thoughts on the Gig Economy
- Thoughts on completing individual tasks as opposed to longer projects
- Thoughts on Joule’s platform and if they would use it
- Thoughts on the bidding system used for freelancers to compete on specific tasks
- Tools they use frequently for task management
Research Methods
User Persona
After gaining sufficient insight and data from the interviews and surveys. I consolidated the findings to create a user persona, describing the goals and frustrations of a freelance developer.
Pain Points and Proposed Solutions
Next, I consolidated common frustrations into four individual pain points. Afterwards, I proposed solutions directly related to each of the pain points.
- Pain Point №1: Freelancers didn’t have a problem with the bidding system itself. They had a problem with their work being under-valued. Clients tend to go with a cheaper bid from across the globe for the same or lower quality/level of work.
Proposed Solution: To include a standardized cost-over-time bidding system in which clients enter their budget range based on a standard range. When assigned a task, the worker then inputs their charging price based on the clients budget. This ensures that there is a minimum cost associated with the task. - Pain Point №2: Freelancers found that clients tend to provide unclear and vague descriptions for the work they want completed. This caused confusion and unmet expectations which would result in ongoing communication between the client and worker.
Proposed Solution: To have clear deliverables for each task and help available to clarify any confusion (i.e. a 24/7 chat option) - Pain Point №3: Freelancers often would complete the work only to find out that the client is no longer able to or refuses to pay them for the work they have done. The unreliability of clients and not being able to guarantee payment is a huge frustration.
Proposed Solution: For there to be clear ratings and reviews posted by workers. This ensures that workers only accept tasks from reliable clients. - Pain Point №4: Freelancers found that they would spend too much time searching for gigs and client work. When the time spent searching for gigs becomes more work than actually working on a gig is when the worth of the gig gets questioned.
Proposed Solution: For the app to be as convenient as possible and have tasks sent to workers without them having to do any searching.
Competitive — Comparative Analysis
After understanding the pain points and proposing solutions, I also wanted to understand existing platforms. I looked at platforms which targeted freelancers like Upwork, platforms which freelancers mentioned using like Trello, platforms which were simple/convenient like Uber and platforms which had a rating feature like Airbnb. I compared these platforms to see if there were components which I could use as inspiration for my own design.
Simple User-Flow Diagram
Before moving onto sketching screens, I wanted to create simple flow of how I want the user to proceed through the app. Creating a flow helped with prioritizing which screens were critical to design first. It also helped with insuring that the app is not too complex and remains convenient for the user.
Visual Design
Mood Words:
Logo Redesign and System:
Use of Avatars:
Proposed Colour Palettes:
Colours proposed for Joule are warmer, earthy tones. These tones give friendly vibes which allow the app to be less intimidating for users.
Usability Testing
Version #1 and Version #2 of the prototypes were both tested on InVision. Users were given specific tasks to complete as they went through each prototype.
Additionally, the last prototype of the app was also subject to a screen review where multiple individuals would voice their thoughts and provide suggestions for each screen.
Usability Test Instructions:
Intro: As a freelancer, you use Joule to receive tasks which you are qualified for to complete. Go through the mobile app, accept a task and indicate the completion of that task.
Usability Test Findings
Issue №1: Users want to be able to decide whether or not they are interested in the task before clicking the task card to view more details.
Solution №1: Add relevant details to the task card.
Issue №2: Leaving ratings and reviews is a significant component of the application. However, users who don’t have much time on their hands would deter from leaving both a review or rating if they saw “Write a review…” first.
Solution №2: To encourage users to leave at least a rating for the client, the order of the review section and the rating section were switched. That way users who are short on time are able to leave a quick rating for the client.
Issue №3: Once a rating and/or review for the client has been received, a modal indicating that the users response was recorded appears. To close the modal, users must tap the “x” at the top right corner. This action doesn’t provide users with a feeling of completion or a call to action.
Solution №3: Instead of an “x” a call to action button with “Ok” is used. This allows users to acknowledge that their response has been recorded but need to wait for the clients response.
Design Solution
After testing the prototype, making necessary changes, the link to high fidelity version of the prototype is here.
Below are some of the final high -fidelity screens for your viewing pleasure.
Conclusion
To conclude, the objective of this project was met. Clients received a design for the “Workers” interface of the Joule App. Pain points from research were identified and solved using design solutions. Sketch was used to design mid-fidelity and high-fidelity wireframes. A prototype for the app was also created using InVision.
Future directions of this design would be to conduct more testing with freelancers. I would develop the payment portion of the as it is an important aspect for freelancers. I would also develop the “Operators” interface for desktop. An, operator is an individual who assists by assigning tasks to individual freelancers.
