Hands App

The Project

CareerFoundry UX Course Design Project 

Hands App was created during a 400 hour UX course with Careerfoundry.  The Hands project gave the experience walking through each step of the UX process, starting with user research to creating development ready design. I learned how to take what I learned during my research/user testing and turn that it a product that is solves user's real needs. 

The Challenge

Come up with a solution to help solve the frustration of creative freelancers and business consultants who need to use multiple software solutions to run their business, which results in high monthly costs and wasted productivity.

Key Goals:

  • Create an MVP and Lean Canvas for a beta launch

  • Conduct user research to determine user’s goals, needs, and wants

  • Create user personas to identify Hands app user

  • Identify task analysis and customer journeys

  • Conduct an in-depth information architecture process to determine the content structure

  • Design and test user interface elements

The Solution

A responsive web application that allows freelancers and business consultants to manage their business with one application. 

Tools & Techiques Used:

  • User Research: Competitive Analysis, User Research + Surveys

  • Pen and Paper - Sketches of First Designs

  • Balsamiq - Low/Grayscale Fidelity Wireframes

  • Sketch - Final Designs

  • Prototyping - Marvel, Prottapp, and Canvasflip

 

Table of Contents


01.User Research

User Research is where every product that I work on begins.  I conducted user research to determine the needs, goals and wants of the users for Hands App.

The user research methods that I used were:

  • The Competitive Analysis was used to analyze the components of each business, market and strategy.

  • User Interviews and Surveys helped to determine user’s frustrations with current software that is on the market and what features they would find most valuable in business management software.

  • Lean canvas (using Ash Maurya's Lean Stack app) was created to give a clear view and plan of Hands App MVP.

Click the left and right arrows to view the images


02. User Personas

Next, I created user personas based on my findings from the competitive analysis, user surveys, and user interviews.

What I Learned For My Research:

  1. Consultants, creative freelancers, and creative business owners often have a limited budget - paying for multiple software solutions can become very costly.

  2. Consultants, creative freelancers, and creative business owners often have tight time constraints. Managing several different software solutions wastes time and reduces productivity.

  3. It is a huge time investment to learn several software solutions. It is also frustrating to put together an effective workflow between the software solutions that you have chosen.

 

Click the left and right arrows to view the images


03.Information Architecture

The following methods were used to create the information architecture for Hands App:

  • A Content Audit was used to organize all the content that will be included in the structure of Hands App web application and website.

  • A Task Analysis and User Journey were used to understand the steps the user to sign up for an account with Hands app.

  • The results of a Card Sorting session help inform the design of the overall app structure, navigation labels and home page design.

  • A Comprehensive Final Site Map was created after a content audit and card sort. The sitemap shows Hands App website and web application structure, navigation labels and desired functionality.

 

Click the left and right arrows to view the images


04. Task Analysis + User Jounerys

A Task Analysis and User Journey were used to understand the steps the user to sign up for an account with Hands app.

 

Click the left and right arrows to view the images

05. Iterative Wireframes

 

I originally designed Hands interface in 2016, as my design skills improved I saw the need to return to this project and redesign the user interface. I believe that updating and iterating designs is part of being a good designer.  Products in the marketplace should be using a iterative design process. 

Below you will see 2 iterations of the final product.  The design to the left is the first iteration and the design to the right is current design. 

 

The first step in my user interface design process is to sketch out the interface on paper. Sketching allows me to create iterative design solutions quickly.  Coming up with design solutions at this point in the process is the least expensive and wastes the less amount of time. 


06. Annotated Wireframes

Annotated wireframes explain interaction of the elements on the interface, how the content is laid out, and the how interface will function and interact with users.

 

Click the left and right arrows to view the images


07. Low Fidelity Wireframes

 

I used Balsamiq to design the low fidelity wireframes for new version of Hands user interface.

 

Click the left and right arrows to view the images


08. High Fidelity Wireframes

 

Final designs were created with Sketch and prototypes were made with Marvel to simulate how the app will function after development is complete.

Hands Mobile Prototype

 

Hands Tablet Prototype

Hands Desktop Prototype

Hands App _ Desktop.gif

09. User Testing

Users preferred to have the Hands App menu on the left hand side rather then across the top.  As a result, hands was designed with the menu in the preferred position.

Hands App Portfolio Piece.001.jpeg
Hands App Portfolio Piece.002.jpeg

Users clicked on the expected areas in both click tests.  I believe that having large buttons with directions such as ‘New Milestone’ and ‘New Project’ made it easier for the user to know where to click.  As a result, the rest of the app will have buttons with clear instructions making it easy for the user to know where to click.


10. Observations

Hands App was aimed at solving the problem of the high cost and loss of productivity when freelancer business are required to use multiple applications to manage their business. 

The final solution will include:

  • A robust project management system

  • A calendar to quickly view upcoming task due dates

  • CRM for managing clients

  • Ability to communicate with team members

  • Send clients recurring invoices

  • Track expenses

What I Learned:

  • Your users rarely have the problem that you expected them to and talking to them is the best way to truly understand what they need.

  • Use simple clear labeling to make it easy for users to complete the intended tasks.

  • Don't be afraid to iterate on past designs, it is part of growing as a designer.