TalentShare.
Scope: Mobile App Design, Concept Design, Branding
Client: TalentShare (This is a conceptual project)
Timeline: 8 weeks (June- August 2021)
Role: UX/UI Designer
Team: Self-directed; with feedback from mentor and peers
Tools: Figma, Whimsical, Zoom
The Company.
In a world full of skilled people, we need to find a way to connect us together. And TalentShare is here to make it happen. On this platform, people can trade and exchange their skills, talents, and services using our digital currency TSC (TalentShare Coins). This platform is aimed to promote mutual beneficence, education, and community development. Sharing is caring. Giving gets receiving.
The Challenge.
The concept of talent sharing does exist, but barely any products have made it successful in the market. The target market for this product can be relatively small. In this design process, my challenge was to design a product that’s fair, easy-to-use and gets users to come back for it.
The Objectives.
Design a brand new end-to-end mobile application with key functions that include creating profiles, booking, inboxing, browsing, joining communities, and checking TSC. The design should follow user research results and proper information architecture.
The work is here.
1. Emphasize
Planning Research: Goals, Methodologies, Results, Synthesis
Research Plan
Research Goals
We want to know the goals, needs, and frustrations people have towards booking travels, as well as motivations, attitudes, and concerns people have towards time travel trips so that we utilize this information and build content.
Research Objectives
Identify the target market and its demographics.
Understand direct and indirect competitors’ offerings and their strengths and weaknesses.
Understand the frequency, length, and payscale of freelance jobs in different industries.
Discover the job processes and experiences when completing freelance jobs.
Understand potential users’ attitudes towards the idea of trading services and skills.
Understand people’s opinions towards digital currency systems.
Research Questions
What are the target market’s demographics and key characteristics?
What are people’s experiences like when they are providing/receiving freelance services?
What makes skilled people think their services are being evaluated fairly?
What are their typical experiences, processes, and flows from when they find clients, communicate with clients, complete the job, and receive the payment?
How do people evaluate fairness, credibility, and safety when trading services?
Research Methods
Market Research -To study the trends of freelancing jobs as well as people’s attitudes towards trading services.
Competitive research - To identify direct and indirect competitors, including service trading apps, goods trading apps, and freelance jobs apps, to see what our competitors offer and their strengths and weaknesses.
User interviews - To hear from potential users firsthand on their stories and opinions on service and skill exchange.
Secondary Research
To get a brief idea of the market, I conducted market research on trends of freelancing jobs as well as people’s attitudes towards trading services. I also identified a few direct and indirect competitors who offer similar services to see their strengths and weaknesses.
User Interviews
To better understand our users — their key goals, needs, motivations, and pain points — I conducted 10 remote interviews that consisted of open-ended questions about their freelancing (and hiring freelancer) experiences and processes, their attitude towards skill sharing, concerns, and frustrations,
Participants
Web developer / DJ / Sound designer, 34, male, Canada
Game streamer / Social media influencer, 28, male, USA
Business consultant / Entrepreneur, 26, male, USA
Film director, 30, male, China
Personal trainer, 29, male, China
Tattoo artist, 23, male, China
Dance teacher / Masseuse, 26, female, Canada
Small business owner, 26, female, Canada
English tutor / Babysitter, 29, female, Italy
Photographer, 32, female, China
Results
Based on the notes from the interviews, I gained some very helpful insights.
Persona
Since the research is telling us that people in the creative/entertainment/service industry are more likely to use this product, I then created two personas to present the target audience group. Having the personas identified can help us empathize with the target users better.
Meet Mila, a freelancer and an inspired digital nomad. And Tyler, a leader and a team manager.
Empathy Map
We want to dive deeper into Mila and Tyler’s minds. So I brainstormed on some of things they may say, think, do, and feel.
2. Define
Project goals, feature roadmap, site map
Project Goals
After empathizing with our target users, I was able to identify the key problem statement of what we are trying to achieve, as well as finding common grounds between business goals and user goals.
Feature Roadmap
Since the idea of this product is more innovative, it is important to come up with useful features that would enhance users’ experiences. After carefully comparing the user insights and our project goals, I then created a comprehensive Product Feature Roadmap — a list of key elements that should be included in the product’s design.
Site Map
After defining the problem solutions, I created a sitemap to help plan the structure and organize the contents of the mobile app.
3. Ideate
Interaction design: task flow, wireframes
Task Flow
It could be overwhelming at first to understand such a large product that includes many features and screens. To break down the necessary steps for users to do certain tasks, I made a task flow to ensure we are designing thoroughly.
The main 4 tasks users face are:
New user registration & complete profile
Make a post to offer a service
Get service from others
Join an community
Wireframes
Since we have figured out the information architecture of the product, I started sketching out the basic layouts of each screen. I then developed high-fidelity wireframes in Figma and wrote copies for contents. Having wireframes allowed me to translate my ideas into tangible visualization.
Please see the full list of wireframes here.
4. Prototype
Visual design: logo, UI Kit, UI design, prototype
Logo Exploration
What is TalentShare? It should be modern, clean, comfortable, creative, relaxing, united, and enjoyable. And the logo should present those. I thought of using shapes and different colors for that abstract creative feeling. So I sketched and digitalized a few versions of the logo, and decided on one that I think represents the brand culture of TalentShare most.
UI Kit
To maintain consistency, I developed a modular design system based on reusable components and their states, such as cards, list items, and controls. Every component can be rearranged and combined with others while maintaining design consistency and recognizable UI patterns for the user.
UI Design
And now we are putting the visual design together! I created 60+ screens including launching and splash screens, sign in/sign up and profile creation screens, home screen, communities screen, explore and search result screen, single product and view profile screens, chatbox and scheduling screens, my booking & write review screens, and digital wallet screens.
Prototype
After having the full UI design, I created a prototype on Figma to show the navigation flow. This prototype is later used for usability testing.
Please find the full prototype here.
5. Iterate
Usability test, affinity map, and priority revisions
Usability Test
Test Objectives
Test whether the users can get clear information on what TalentShare is about.
Test whether it is easy and straightforward for users to navigate.
Test how easy it is for users to create profiles, join communities, and make bookings.
Note any generation hesitations, confusion, difficulties in the process.
Test Subject
A high-fidelity prototype (from Figma) that contains fully completed mobile app UI design.
Test Methodology
A 15-second test on the screenshot of the landing page created on Usability Hub.
Remote, one-on-one test, via Zoom with screen recording.
Test Participants
Female, 38, University Teacher, Canada
Male, 28, English Teacher / DJ, Poland
Male, 26, Personal Trainer, USA
Male, 28, Content Creator / Photographer, Canada
Male, 32, Data analytics / Photographer, Canada
Affinity Map
We’ve definitely got some helpful feedback from the usability test! Now it’s time to organize the findings. I used different colored Post-its to note my observations and their feedback. I then sorted by tasks and created an affinity map. It helps me gain insights and decide on design recommendations to apply to the iteration.
Priority Revisions
So people loved it!
That’s amazing to hear - not only did they find the user experience easy and clear, but they were also keen on the idea of this product, its features, and the overall aesthetics. A few of them would even like to see it become an actual app.
And of course, they also provided some feedback on where they would like to see improvements. So I did some revisions to the design.