Overview

For my 3rd project at General assembly I had to design a new feature for the Upwork platform. It was a one week group project of 4 people. Upwork is a website that helps freelancers in the Tech industry to find work. The feature we were asked to add was a volunteer section, where freelancers could update their skills and work on real life projects as volunteers. Luckily enough that was a group project and I had the chance to work with an amazing group of people, where we could divide the load of the project.

Client Brief

Upwork connects businesses of all sizes to freelancers, independent professionals, and agencies for all their hiring needs. With millions of jobs posted on Upwork annually, independent professionals earn money by providing companies with over 5,000 skills across more than 70 categories of work. Through Upwork, businesses get more done, connecting with proven professionals to work on projects from web and mobile app development to SEO, social media marketing, content writing, graphic design, admin help and thousands of other projects. Upwork makes it fast, simple, and cost-effective to find, hire, work with, and pay the best professionals anywhere, any time.

https://ww.upwork.com

Project Brief — Problem

Upwork would like to do more to help their freelancers develop their skills whilst contributing to good causes, by enabling them (and anyone else) to find volunteer opportunities that match and develop their skillsets.

Some initial things to consider

● What is different about volunteering vs paid work?

● What might typically get in the way of these professionals volunteering their skills, and how can the platform manage these challenges?

● How might the volunteer platform support and tie-in with the paid platform, yet without confusing the core offering?

Features

● Ability to browse volunteer opportunities

● Ability to create/use a profile in order to be better match opportunities

● Ability to apply for opportunities directly on the platform

Competitive research

We did competitive research with direct and indirect competitors to evaluate similar business. We researched 8 business recruitment and volunteering platforms.

In this table you can see the main key findings:

Feature analysis

We put Upwork on the feature analysis cross.

Users and audience

We didn’t have any data for the users of the website, based on the brief we assumed some key points for the audience. We conducted a survey to find out the real reasons that stop the users from volunteering and what really triggers them to volunteer their skills. We conducted a survey to determine what was stopping the users signing up and what prompts them to volunteer their skills. We received 30 replies and interviewed 16 for further details.

Here is an example of the interview script:

We found some really interesting results from the interviews, the key ones were:

Pain points

We created a persona based on our findings and a proto persona so we could have a clear view from the perspective of an employer that is looking for a volunteer and the perspective of the volunteer as well.

Persona

We created a persona.

Proto — Persona

The proto persona was built on assumptions as we did not have enough data to compile an accurate persona.

Roles and responsibilities.

We started off our project by saying what we liked and what we didn’t like, when working with other people which was very valuable and useful for the best working flow. For this reason we performed the retrospective and added on a Miro board notes what frustrates us and how we like to be treated. Every day we divided the load of the work and time was given to all the team members to work individually. We conducted daily catch-ups each day to discuss what work was outstanding and plan what to do next. Everyone worked as UX designers and researchers.

Process and what I did

Following the competitive analysis and the personas I continue with analysing the site map, basically how the navigation in our website would look like. The way we divided our 5 categories was based on our findings for the user interviews and our competitor research and how the current Upwork website has the professions divided. I specifically designed the old and new sitemap, I transferred the mid fidelity wireframes into high fidelity, I created the final presentation after getting all the data from the rest of the team. I created the questionaire with Survey Sparrow and performed 6 user interviews.

Site — map

To create the user flow, the journey that our persona Erick takes on the website we created the experience map and task analysis based on a scenario we created. The scenario was “Erik wants to add side projects to his graphic design portfolio through volunteering.”

The outcome was the happy path and a default scenario featuring no exceptional or error conditions.

Based on the previous research we moved onto designing paper prototypes with which we did different rounds of testing. In each stage we performed usability testing for potential users.

The key points of the lo-fi testing was:

Lo-fi wireframe example.

Key findings from the mid-fi iterations after testing:

2. Adding more descriptive breadcrumbs

3. Adding the contact volunteer link on the reviews — on the job listing page

4. Adding an edit link on the one click apply

5. Adding an icon for location on the job listing

We used a Miro board to add and change things in our work. This way we came down to adding a new feature in the Upwork Page that no one from the competitors had and will make the platform stand out. This feature enables the potential volunteer to contact people that already worked in the company the user is interested in and ask them about their experience.

Style guide

As it was a project that we had to add a feature in an existing website we followed the style guide of this existing platform, although we also decided to make our feature a new logo and make it a sister brand so we could have our own typography and colour palette and brand values, accordingly and following also the guidelines Upwork had created.

Typography

Prototype

We deliver a high fidelity prototype which we presented, based on our scenario and the happy path in the res of the class and the tutors.

Lessons

Adding a new feature in an existing platform can be tricky, as you need to consider all the current users that are already using the platform. The brand environment and values. Anything new that doesn’t meet these can look strange and unfamiliar and loose the trust from the current users.

Future Steps

  • Test high fidelity
  • Add quiz skills test
  • Bigger mentorship program workshop with the mentors that are available
  • Responsive website with accessibility

Junior UX/UI Designer Clinical fitness trainer Professional dancer 👩‍💻💃🏋️‍♀️🧘‍♀️