What Does an Effective Profile Page Look Like?
Project Context
Role: UX Designer
Timeline: April - May 2022
Responsibilities: Research, WireFraming, Prototyping, Usability Testing
What is this project about?
After I graduated from college, I worked for tranZynergy which was a company that provides various services for freelance translators. One of the biggest products that they had was a web platform that allows translators to connect with each other to find job opportunities.
For this project, I was in charge of re-creating the profile page for users. I found solutions and created a new design by finding problems with the previous design, research, prototyping, and user testing.
The Challenge
To re-design unique profile pages that represent the personalities of freelance translators.
The Design Thinking Process
Product Definition
Stakeholder Interviews
I started this project by conducting a stakeholder interview. I talked to the co-founders of tranZynergy. Through several rounds of very meaningful discussions, I was able to create a List of Unsatisfactions and Value Position Mapping which guided me to make decisions throughout the process of this project.
List of Painpoints
-
It does not look fun to read
-
The about me section is hard to read
-
The icon in the top left corner is unclear
-
Not very personalized (People cannot get to know that person from this profile page)
-
The save button is too small
-
It does not look modern and clean
-
The text is too small
-
We want something that can prove this translator's skills
-
We want users to be able to show off what they have done
-
I don’t know how to be friends with the person on the website
Product Research
Competitive Analysis
After the stakeholder interview, I did a competitor analysis. This helped me to understand our competitors' strengths and weaknesses which helped us not only improve our product but also differentiate it from others.
Empathy Chart
After defining problems and analysis, I made empathy charts for two groups of potential users; Entry-level freelance translators who are looking for jobs and senior-level translators who are looking for someone who can help with their work.
This helped me to understand more about the thinking process of potential users and the design requirements for the product. This became a base for personas and storyboards.
Empathy Chart Entry-Level Freelance Translator
VS
Empathy Chart Senior-Level Freelance Translator
Target Audience
-
Target Audience - Mainly, two groups of people
-
Entry-level freelance translators who are looking for jobs
-
Senior-level translators who are looking for someone who can help with their work
-
-
Possible Viewers - People who might interact or view this app, but do not necessarily have it on their devices and use them
-
Translation Agency - recruits translators for hire
-
Clients - looking for someone to do translations
-
Translators who want to connect with other translators
-
Analysis
Personas
Storyboard
I drew a short manga to show a story of how a profile page would benefit users and showed it to a marketing team. This led to a great discussion about what kind of information should be on the profile page and how to market our product to entry-level translators.
Finding Solutions
Ideation
I started by brainstorming what user experience and features we need to accomplish our goal. I explored different solutions and presented them to the team. We decided what features and information the profile page should have.
Solution:
-
Banner Photo
-
Qualifications (later, changed its name to “Accomplishments”)
-
Portfolio
-
Expertise (later, changed its name to “Specialities”)
-
Message
-
Pronoun
-
SNS
-
Quick Description
-
*Scoring and Reviews - not approved by stakeholders
Design
Design Requirements
After defining goals and solutions, it was time to start designing. Prior to starting the design process, I made three important design requirements that kept me on track with why and how I would design this product.
Information Grouping and Wireframes
There is a lot of information on the profile page. One of the take-aways from the Competitive Analysis was how they grouped information and organized them. For this project, I focused on three things in the process of organizing information.
-
Chunking
-
Human Psychology - F-Pattern
-
Hierarchy
CHUNKING
First, I started by grouping information into big chunks. This helped information to be easier to understand by breaking it into small, well-organized units.
WIRE FRAMING WITH HUMAN PSYCHOLOGY
In this process, I researched people’s psychology when they scan through screens to decide how I would place each chunk of information. There are two big patterns, which are “F-Pattern” and “Z-Pattern”.
F-Pattern
Z-Pattern
I applied these Patterns and made 3 different wireframes and presented them in the meeting and we decided to go with Wireframe 1.
Wireframe 1: F-Pattern Applied
Wireframe 2: Z-Pattern Applied
Wireframe 3: Z-Pattern Applied
HIERARCHY
Hierarchy is very important to help viewers know the order of importance of information groups. This was also one of the biggest problems that I found in the previous profile page design. In order to fix this problem, I implemented the design guide that I created for this company. I also created a UI kit for this page.
Prototypes and Usability Tests
After defining solutions and being approved by stakeholders, I created a Mid-Fidelity prototype on Figma and conducted usability tests.
Prototype Version 1
Prototype Version 2
Prototype Version 3
Here are the three tasks and questions I asked test-takers for feedback.
-
Task 1: Tell me where you would find the academic history of the person on this page.
-
Task 2: You want to connect with James Brown to work together. Send a connection request to him.
-
Task 3: You have received a connection request from Zoe Chen. Add this person to your connections.
-
Question 1: Were you able to find the information that you needed?
-
Question 2: What features do you find most valuable?
-
Question 3: What do you think about this design?
-
Question 4: What prevents you from using it smoothly?
Highlighted Findings:
After defining solutions and being approved by stakeholders, I created a Mid-Fidelity prototype and conducted usability tests.
Description Layout
From research, I found out that the description on the left did not get attention as much as I was hoping because of having to scroll to see the full information and the font size. There was not enough space for the amount of information that I wanted to put. Therefore, I put less info on the left box and moved work-related information to the main box on the right. This added more breathing space to the design and also highlighted important information better.
.png)
Button Placements: Call to Action Button and Edit Profile Button
Initially, people had to go to the “Social” tab in the header to find new connections, but all of the users could not find that place. So, I added a “Find Connections” button in a visible place for better workflow and to encourage users to connect with more people.
Some of the users said that the placement and size of the “Edit Profile” button were off. Then, I realized that the “Edit Profile” button is getting more attention than it should because it is big and right below the user’s name, so I moved it down and moved it to the side.
.png)
.png)
Language Familiarity Level: Translators should be at least “Fluent”
One of the test takers pointed out that the translator should be at least fluent in the language that they list. Other levels are good to start conversations, but they are not necessary. We decided to get rid of “Expert”, “Proficient”, and “Novice” and have “Native” and “Fluent”.
.png)
Outcome
See it for yourself!
After the last round of the user-testing process, I finalized the profile page. I love how it came out. Here are examples of the user flow page.
Profile Self
People cards and choosing a person for a preview
Look through a profile and request to connect
Two ways to favorite a person
Accept or Decline a Received Request to Connect
Remove Someone from Your Connections
Next Step
Evaluation between Users
This new revised profile page design has improved significantly compared to the previous version. However, the journey does not end. As a business networking platform, evaluations between users are critical to deciding whom they would want to work for and with. In the future, I would like to add assessment features to allow users to estimate each other to gain more trust.
The idea of star scoring and reviews was not approved by stakeholders because they did not want users to criticize each other, so I thought about other ideas such as listing how many projects they had completed or testimonials from other people. Also, creating a way to measure people’s skills by offering language quizzes or courses that they would be able to put on their profile pages. I would like to research each option and find out what would be the most effective for this platform as suggestions to stakeholders.
