Background:
Over the course of a week-long UX Design Sprint, Carley Calfee and Isaac Leifert were tasked with developing a mobile app that encouraged Gen Z college students to connect and build teams based on certain skill sets for side projects. Working through the University of Virginia’s Forge Launch academy, we were developed a case study using the following steps:
Problem statement:
“How might we design a web and mobile app that encourages Gen Z college students to connect and build teams based on certain skill sets for jobs/projects/side hustles/etc.?”
When we first began to delve into our challenge, we struggled to determine what direction we wanted to take our design in. We looked in the direction of existing apps in the project management and social connection fields, looking for any sort of crossover. Fiverr and LinkedIn stood out as two platforms that closely resembled elements of what we were hoping to build. Given this, we then centered our research around these two apps which allowed us to gain more accurate insights from potential users.
Research:
After conducting 5 directed and 5 ethnographic interviews in total, we were able to better understand respondents’ current preferences when it comes to project collaboration as well as key features that users wanted implemented in their app.
From our directed interviews and survey respondents, our main takeaways were that…
- Users liked how organized listings [card grids] made it easy to compare different vendors
- Users would like to communicate directly with those offering services
- People look to collaborate with those with experience in relevant fields and have specific skills
- People would like to make specific requests for help rather than relying on someone else offering what you need
- Most people rely on already existing networks for project collaboration, and only search outside of their network when they lack a certain set of in-demand skills
User Persona
For our user persona, we compiled all of the data we gathered from our interviews and research and developed Andrew, a 20 year old UVA student who models the ideal user of our platform. Andrew is a student in the McIntyre School of Commerce who loves to spend his free time brainstorming about potential business ideas in the hopes of becoming the next great entrepreneur. He keeps track of all his ideas and has even tried to build out a few, but always gets stuck at some point because he has a limited skillset and does not have many friends outside of his major who can help him. Recently, he had an idea to create a website where students can advertise their skills and help other students with projects they may not be able to handle themselves. However, he has run into an issue because he has no coding background and can’t figure out how to make his site functional. A very important trait Andrew possesses is that he is not afraid to ask for help. This is where SkillFindr would come into play.
Use Case
After creating the Andrew user persona, we created a use case in which Andrew sought to connect with a group of UVA (University of Virginia) students to work on a side hustle or project. In this step, we found that our product could potentially be used in instances where people in the UVA network may not suffice if they lack the skills that Andrew was looking for, and should design our app around those circumstances. This would entail allowing users to search for people outside of their school or organization networks.
Style Guide
For the style guide wanted to visualize the level of connection that we wish to foster within the app through incorporating a logo that involved people…well, connecting. The hands represent the people involved in actual project collaboration, and the blue-teal color scheme represents the focused creativity that we wish to inspire in our users.
Journey Mapping
We created a customer journey map in which Andrew needed to create a group for a personal project that he was working on. After planning the necessary information to go through with his project, Andrew reaches out to those in his peer network to see if they would be interested in joining. Only after exhausting the people in his personal network does Andrew turn to using online resources to find skilled people. This is the main opportunity space where our app exists. Eventually, after reaching out to enough people, he will narrow his search down to the right person/people and go forward with his project.
Flow Chart
After understanding where we might be able to incorporate an app into already existing user behavior, we wanted to create a flow chart to better understand how a user might navigate through the potential app.
Low-Fidelity Wireframe
When creating our wireframe, we focused on outlining the following features:
Onboarding:
- What information we needed to collect from users
My Skills
- Skills I Need Help With
Home Page:
- Recommended skills
- Recently searched skills
- Search feature
Search Page
- Different categories
- Large, easy to select buttons
Search Results Page
- Card grid style to easily differentiate between listings
- Option to filter between people offering services and open projects
Project page
- Skills needed
- Project description
- Project owner, previous projects, ratings
- Contact button
Bio
- Relevant skills
- Ideal timeline
- Portfolio
- Previous work experience
- Ratings and reviews from past collaborators
- Contact button
Message
- Sort between conversations
Mockup
Prototype
Reflection
Designing SkillFindr was our final project in Forge’s three-week Launch Academy. This project, being a mobile and desktop app that we designed completely from scratch, was an incredible learning experience that allowed us to design with the users’ needs in mind first and foremost. However, with us being UX students, we still have a lot to learn, and there are many improvements that we could make to this project. After conducting a round of usability testing, our main design changes included the following:
- Fixing the navigation bar so that the color contrast is more noticeable
- Adding images to the search section so that the categories are more informative as well as changing the text and background colors to fix contrast issues
- Changing the “Go Home” button at the end of the onboarding process to a “Continue” button
These changes represent some, but not all of the feedback that we received from usability testing. However, these were a few of the ones we deemed most important due to their impact on how intuitive the app is to use as well as accessibility concerns with proper color contrast ratios. Some of the other changes we plan to incorporate in future iterations of this project are:
- Including ways to better get to know the person behind the profile, such as having a hobby/interests, location, university, or “personality” section
- Including search filter features, as well as tags users can use to identify what search results they wish to be shown in
- Increasing text size on certain screens for better legibility
This project was both a challenge and a pleasure to work on, and we are super excited to continue learning more UX skills as we continue to work in the future!
