UX Design Projects

The Project

As part of the CareerFoundry UX bootcamp, I was given the brief to create a product that would enable anyone, anywhere to instantly chat with an expert.

I chose to focus on a solution for freelancers. In 2020, 59 million Americans freelanced according to a study by Upwork, making up 1/3 of the US workforce.

No matter what industry freelancers work within, they all face the same problems.

The Goal

Design an app that connects freelancers with business professionals to offer support and advice on the many issues freelancers face.

The Challenge

Freelancers need a way to connect with seasoned business professionals because they lack the knowledge and support it takes to run a business.

We will know this to be true when we see freelancers scheduling video calls with our experts.

The Solution

Lance is a responsive web app that connects freelancers with seasoned professionals to answer questions concerning the business of working for yourself. Users are able to search a database of professionals, pose a question and schedule a video call with the expert of their choice.

TOOLS

Figma
Adobe XD
Sketch
Photoshop
Usability Hub

DURATION

7 months

ROLE

UX Designer

A mobile app connecting freelancers with business experts for professional advice.

My Process

I used the Design Thinking process to understand users, challenge assumptions, redefine problems and create innovative solutions to prototype and test. For a project of this size, I find it helpful to divide the work into stages. The tasks within each stage of the design process helps me keep the user in mind while informing decisions made in the following phase.

Competitive Analysis
User Interviews
Research Analysis

User Personas
User Journeys
User Stories

Task Analysis
User Flows
Infortmation Architecture

Wireframes
Prototype
Iterations

Usability Tests
Preference Tests

Design System
Interactive Prototype

Understanding the Problem

My first goal is to gain an understanding of the people I’m designing for as well as the problem I am trying to solve. To do this I perform competitive analysis’ on similar apps, conduct interviews with the target users and analyze the information using affinity mapping.

Competitive Analysis

I began the project by researching the online expert landscape. I analyzed platforms such as JustAnswer and Clarity, which allow users to ask questions of experts in several fields. I focused on their objectives, overall strategy, marketing and visual design.

I created SWOT analysis’ to identify the strengths, weaknesses, opportunities and threats of each platform. This allowed me to better understand what was currently available to users seeking advice as well as how these platforms helped users reach their goals.

Key Insights

Allow users to choose the expert
Other services connect users with an available expert in their selected field. Users don’t get to browse expert profiles or request who’d they like to speak with.

Pay-per-session
Some platforms are subscription-based and only allow two calls per month. By offering a pay-per-session model, users don’t have to commit to a monthly service.

Real-time calendar scheduling
Users should be able to view the experts available appointments and book a call immediately. Other platforms require you to request a call, which leads to multiple messages in order to find a time that works for both participants

User Interviews

I conducted User Interviews with the target audience to collect Qualitative Research that would help me understand freelancers behavior around making business decisions. By talking with freelancers I gained valuable insights into their needs, goals and frustrations.

The interviews helped me determine what tasks users would like to complete in an expert app as well as the areas of business users would require advice in. By documenting their paint points with existing apps or in finding answers to their business questions, I discovered areas where their needs weren’t being met.

Goals

  • To better understand user behavior around making business decisions while freelancing

  • To determine what areas of business users would require advice from and what tasks users would like to complete in an expert app

  • Documenting user pain points with existing apps or in finding answers to their business questions

  • Collecting data on the content and how often users would use an expert app

Methods

  • Moderated, remote interviews via Zoom (recorded for reference)

  • Three freelance participants from various fields

  • Scripted interview for consistency

Affinity Mapping

In order to synthesize the data from my interviews, I created Affinity Maps. I revisited the interview recordings and organized my notes. I wrote out each insight, quote, opinion and fact onto a sticky note. Then I grouped similar information based on behaviors and attitudes, needs and goals, frustrations, facts and quotes. Being able to identify patterns between findings in the interviews provided me with valuable information.

Key Insights

  • Participants are unsure of how to structure their business and only a third of them have talked with a lawyer or accountant.

  • Participants want access to an expert in their industry.

  • Participants would like to see expert backgrounds and a vetting process before seeking advice.

  • The biggest challenge participants face is getting new clients and/or consistent work.

  • Participants are unsure of proper procedures for contracts, purchase orders and licensing.

  • Participants would reach out for advice periodically, but would not be interested in a subscription model.

Defining Freelancer's Needs

During the Define stage, I accumulated the information I gathered from my user interviews and competitor analysis. I analyzed the competitor profiles and synthesized the data from interviews to create user personas, journey maps and user stories.

User Personas

In order to understand our users and design the product with them in mind, I created Personas based on our target audience. After conducting user research which included interviews with members of our target market, I developed two personas that detail our users Needs, Motivations and Pain Points.

These personas were referenced throughout the project to ensure the user was at the center of the design decisions.

User Journey

To visualize the process our user goes through in order to accomplish their goal, I created Journey Maps.

After I created the Personas, I assigned a scenario for each and broke their User Journey down into phases. These maps help us understand the steps a user takes to reach their goal, the emotions during each stage and they identify opportunities for a successful user experience. 

Generating Ideas

I’ve grown to understand the user and their needs during the Empathize stage, synthesized the observations in the Define stage and now can begin to identify solutions. To do this, I start by creating User Flows and Task Analysis and then build a Sitemap based on this information. I validate the Information Architecture of the Sitemap through Card Sorts

User Flows

I built User Flows to determine which pages a visitor must interact with to complete a task. After performing a Task Analysis to understand the objective and task flow, I created a visual representation of the pages a user will need to accomplish their goal. This helps me determine what screens are needed before beginning the information architecture phase.

Information Architecture

The User Flows helped me determine which screens Lance needed in order for a user to achieve their goal. Based on these flows, I created a Sitemap to organize the information and hierarchy of pages. After creating the initial sitemap, I conducted open and closed Card Sorts to find patterns that will inform the most user-friendly way of organizing the information. I analyzed the results of the card sorts and implemented changes.

Prototyping Solutions

In order to test the solutions I’ve generated, I needed to produce a scaled down version of the product. To do this, I begin rapid prototyping sketched wireframes to understand the core structure of the app. I then created a Mid-Fidelity Prototype for Usability Tests.

Low-Fidelity Wireframes

In order to focus on the core structure of the pages needed for a Minimum Viable Product (MVP), I sketched Low-Fidelity Wireframes. These wireframes were then grouped together to represent a User Flow, focusing on the high-level functionality of the design.

Mid-Fidelity Wireframes

After the sketched wireframes helped me determine the structure of the pages, I developed a Mid-Fidelity Prototype. These digital mockups show more detail and provide a preview of what real UI elements may look like. I built out pages based on User Flows in order to test the product with real users.

Iterations, Alterations and Refinements

Below are various iterations of Lance’s high-level screens. I sketched wireframes to organize the core structure of each page, did various Mid-Fidelity Mockups and refined the UI to create a High-Fidelity Prototype.

Iterations - Home Screen
Home Screen

Testing with Users

In order to test the solutions I’ve generated, I needed to produce a scaled down version of the product. To do this, I begin rapid prototyping sketched wireframes to understand the core structure of the app. I then created a Mid-Fidelity Prototype for Usability Tests.

Usability Tests

I then conducted Usability Tests with an interactive MVP (Minimum Viable Product) in order to determine if the product was useful. The tests included 6 participants from Lance’s target audience and were moderated and conducted via Zoom. During the sessions, I observed and measured how users were able to complete basic functions such as searching for experts, consulting with an expert and scheduling a video call.

After the tests, I created an Affinity Map to synthesize the data and organized my findings in a Rainbow Sheet in order to prioritize the fixes and brainstorm possible solutions.

Goals

  • Understand the ability of participants to complete tasks

  • Determine how long it task to complete a task

  • Uncover any critical errors in the prototype

  • Do participants enjoy the product?

Implement Changes

During usability tests, I uncovered some areas of friction. One such example is that users were unclear of where they were during the consultation process. 

Evidence 
There was no clear signifier while consulting with an expert. 6/6 users found the booking page accidentally and were unaware of how many messages they had remaining during the free consultation. Clear prompts and the system status was added to the top of each page to rectify the error.

Suggested Changes
After the first consultation message, a confirmation screen was added. The messages will then show in the Inbox with a Consultation label. The consultation status is shown at the top of the page with the number of available messages. After the consultation, the Book a Call and Message buttons will be activated and a pop-up ratings modal will show.

Refining the Design

Now that I’ve validated my product through testing, I can focus on the visual design. I enhance the User Interface through colors, typography, spacing and styles. Then I built a Design System to ensure a successful handoff to developers.

Design System

After developing the framework of Lance through multiple iterations, conducting usability tests and improving on issues found, I turned my focus to the visual design. Visual design enhances the user experience through the use of colors, typography, spacing, and styles to create a UI that will provide an easy and enjoyable way to interact with the app.

I created a Design System in order to keep the design consistent across multiple pages and platforms, ensuring they abide by the rules of thumb and will make for a successful handoff to developers.

High-Fidelity Prototype

With the framework in place, validated through testing multiple iterations, I then built a High-Fidelity Prototype. It is highly functional and allows for a realistic user interaction, giving stakeholders a true representation of the product.

Learnings

Trust in the Process

At the beginning of the project is was easy to get distracted by what the app would develop into. I realized that by stepping back, letting go of my assumptions and trusting in the design thinking process, I would develop a product that was truly user-centered and built upon informed design decisions.

Test Often and Ask for Feedback

Usability Testing is such an important part of the design process. In order for a product to be useful, it must be easy to use and include the features needed for us to meet our goals. Testing helps us validate our designs and uncover areas that need to be improved.

While designing, it is possible to focus so much of our attention on one area, that we loose sight of another, or we allow our bias’ to take over. Asking for feedback from our collaborators and peers is important as fresh eyes bring new perspective and often new questions.

Organize and Create Structure

UX Design is a collaborative process and in order for it to be successful, it must be understood by our team. It is important to keep files, folders, layers and assets organized with a consistent filename structure. In order for a project to be handed off successfully, we need to have a Design System in place with organized dartboards and a structure file system.