UI Challenge 006: User Profile
For this challenge I immediately knew what I wanted to create! And it just so happens to be a service/app I have wished for years was a real thing….
A “friend finder” app for female travelers – who can’t always rely on their friends – to find other female travelers in order to connect, find other travel companions, and ultimately make new friends – bonus if they become lifelong adventure friends.
Being someone who has traveled solo many times, I know there is a need in the travel industry for this product. Ironically through this process I think I may have figured out what my next passion project is – that is, after I finish tackling Stockholm’s SL Metro System. More to come…
When thinking about the features I wanted to include on this user profile there were three big content areas that came to mind (given my previous experience with dating and friend finding apps):
The ability to have a profile verified – so other users know the profile is legit
The imagery that can be included – with the main profile images being the largest, and additional image content blocks integrated to enhance user’s ability find common connections
Profile view options – to move away from the long scroll that is typically associated with the current friend/dating apps on the market
These key factors were also aspects of what the UI challenge presented me with: to design a user profile being mindful of the most important data, names, imagery, placement, etc., while also keeping in mind whether or not it would be a serious profile, a social profile, or anything else.
My mission: To design a user profile and be mindful of the most important data, including names, imagery, placement, etc. The need/product the profile would be featured on was completely up to me.
The user(s): Millennial female travelers, many of the times who travel solo, and are looking for likeminded female travelers to connect with, become friends with and ultimately be able to travel with.
The problem: Although solo female travelers love the adventures they go on, sometimes they wish they could experience them with a friend. The issue is, none of their friends can make the commitment to join them on the trips they plan.
My solution: To “create” a friend finder app (in the same vein of Bumble BFF) in order for female travelers to find and connect with other female travelers. This profile would be the view they experience for all users on the app.
Initial Sketches
This was a challenge some of my GA cohort mates and I completed together – each with the same prompt, sketching on our own layout ideas and coming back together to share our initial thoughts and sketches after a 15 minute period, giving each other constructive feedback in order to complete the high-fidelity mockups on our own time.
Because I had seen the prompt prior to our Zoom call, I came armed to the sketching session with some initial key research based on already existing (and shall not be named) dating apps.
It was during my feedback session that one of my peers mentioned something about giving users the ability to choose their own profile view layout – e.g. the layout they would see for their own profile as well as the layout they wanted to see for other users as they were swiping through.
Mid-Fidelity Wireframes & Feedback
Following our sketching session I headed into Figma to create a UI kit and mid-fidelity mockups I could share with a couple of potential users to get their initial thoughts and reactions – both of these users have previously used online dating apps. The mid-fidelity mockups were as follows, testing out various layout ideas, image sizes and content blocks.
Getting initial reactions was a bit difficult, due to the mid-fidelity nature of the layouts, but both users ended up leaning towards the middle layout.
After putting the layouts into high-fidelity, and going back to each user with the updated profiles, both users continued to prefer the second layout, but stated they preferred the name, location and “blurb” placement of the first layout.
High-Fidelity Wireframes
As is the case with many usability tests, the user is much more likely to make a solid decision when they can see a product in high-fidelity. For those who do not come from a creative background it’s hard for them to “imagine” an actual product when it’s a series of grey image placeholder boxes and text in black and white.
Final Solution
After taking into consideration the feedback I received from the users based on the high-fidelity mockups I showed them, I landed on the following solution, which included:
Giving users the ability to see two different views of a profile – one with the image full screen and a second expanded view
On the expanded view making sure the user profile photo takes up about 60% of the screen
The ability for users to both save the profiles they like, as well as initially reach out via messaging and/or a wave (without the need to “swipe” first)
Integrating more imagery through via a social feed style gallery where users can upload photos from their travels
