Due to lots of broken relationships and marriages, number of single mothers and living-alone men has increased tremendously. This is a story that I was told by a Facebook online social media influential lady. After watching her program for a while, I noticed that she struggled to organize her program while she hooks up partner seekers on her video streaming program. I decided to leverage my UX design experience to help her improve her program. The idea was to design a dating website, where she could bring her overwhelming followers together in one place, and choose profiles for the hookup each time she comes online instead of the usual random-picking through WhatsApp calls during her program.
Design a dating website where users could track and find their matches for serious dating any location of their choice.
THE DESIGN PROCESS
Researcher, Designer &
User testing moderator
The project lasted for 90days
I used Adobe XD, Figma, and sketch
Here are the competitor apps
I went online to search for what other similar websites are already
doing to connect partner seekers.
Competitive research allowed me to have a broader idea of the issues that existed in the expert app space and the solutions that had already been created by others. By taking a closer look, the strengths and weaknesses of my competitors could help me determine the features that needed to be added or improved.
The goal was to come out exceptional in the market. In order to understand their design heuristics, I downloaded both apps on my device. First, I wanted to understand their marketing strategy, pros and cons, identify their strengths and weaknesses. Using the SWOT methodology, to sum up, everything about their strengths, weaknesses, opportunities, and threats.
What I learned.
Parship and Badoo did a great job with partner search, regarding location and matches. I took more inspiration, added more colors to stand out in my design.
Before conducting any interviews, I had to identify what I wanted to learn from the interviews. With that in mind, I drafted open-ended questions to help me gain relevant insights from the participants.
To Identify the needs, behaviors, thought, and pain points of the users.
Participants and the interview summary
Juia 31, social worker Stuttgart
"I love to read articles about my situations first. If the articles still do not answer my questions, that's when I contact experts"
"When I contact experts, then there should be ways to verify whether they can be trusted or not"
Alberto 33, UX designer Berlin
"When I find something interesting is to clarify, important for me to be able to contact the experts quickly"
Laura, 27 UXer
"I'm a busy person, it will make more sense to me when I can book appointments for when it is convenient for me"
"Trusting the experts is also an issue for me in most cases"
What I learned
1. It will help to add articles/Blog for the users who prefer to read articles
2. Make expert recruitment a transparent one and allow experts to provide detailed information about themselves in their profiles
3. Make multiple contact methods available on the expert profiles
4. Add a calendar where users can book or schedule appointments with experts
5. Provide extensive links about experts' experiences in the design.
User journey map
I created user scenario tasks to help define what my users would want to accomplish. Translating a human need into a feature allowed me to pinpoint solutions and necessary functionality from a user’s perspective.
I structured user flow to organize the steps in a way that allows users to complete tasks from an access point to the success criteria. In this case, from sign-up as a new user to reading an article. The second, as an existing user to login and book or schedule an appointment with an expert using the calendar.
I organized the internal content of the app in a hierarchical way. This serves as the structural foundation that allows users to understand the information structure of the app and know where and how to find them
To do this, I conducted an online card sorting exercise using the optimal-workshop website. This process helped me validate and make corrections to the initial idea of the site map that I created.
After analyzing the results from the card sorting, I restructured the sitemap to implement the gathered feedback.
IDEATION & DESIGN
I started out using pen and paper to create sketches of the key features of the content pages. This process was quick and allowed me to focus on high-level functionality.
Once the basic functionality was established, I translated my designs from sketches into basic greyscale visuals using Adobe XD.
The designs included more detail and provided a preview of how the real UI elements like the typography, the color, button, and icons would look and be placed.
After upgrading the design from Mid to High fidelity mockup, I linked hotspots between the UI elements corresponding with my user flows, so that a clickable prototype of the app could be created.
Since the main goal of design research is to build something useful for real users, I needed to evaluate the usability of the digital prototype. I Recruited 6 participants to conduct a moderated remote test using Skype.
My goal was to find out how users interact with the prototype and what tasks they were struggling with. Below are sticky notes that helped me organized my feedback on an infinity map. If interested, please download the rainbow spreadsheet here
Having a relevant image for the app was important to recognize the purpose to the users
It was important to pay special attention to the Home button because nearly all the participants couldn't find the Home button
Unnecessary elements needed to be removed to make the calendar less cluttered.
The alignment for popular experts, articles, and videos was confusing to users
The calendar looked out-dated and confusing to schedule an appointment
There was a prototype error in which users couldn't find the bottom bar and the major navigation icons
The images didn't represent the purpose of the app very well
The back buttons were missing
The skip button was placed beneath
There was no "next button"
The color was still grayscaled
The images replaced with more relevant illustration images
The position of the skip changed to the top as requested by multiple testers
The back buttons added so that users can return to the previous page
The next button added to help users either tap or swipe to proceed to the next onboarding screen
The color was finally added to make the color scheme of the app consistent
There was a cover picture occupying space for the header
Logo placement was at the left top corner
The article, videos, and popular experts were placed asymmetrically
The expert cards were elevated
The cover picture has been removed as it was not necessary for the mobile version
Logo placement was moved to the right so that the hamburger menu will have enough place as the major navigation access.
The article, videos, and popular experts were placed symmetrically to make them aligned
The expert card elevations were dropped because raising cards is out-dated in the UX design trend.
The desktop idea for the Home screen
The entire calendar screen was cluttered
The way users changed dates and time were good but not enough space to tap the elements because the user will frequently mistakenly tap other things instead of what they intended
There was a way to get quick information, which was intended to tell users appointment cancellation policy
The calendar date was too small and was elevated in boxex
More space and alignments were corrected
Changing dates and time in a way that allows users to swipe instead of struggling with tapping and errors
The information icon has been removed as suggested by testers. This information will now be given in the email feedback after appointment schedules have been submitted
The shadow in the boxes have been removed to maintain a flat user interface and modern look
Because the purpose of this app is to allow users to search and schedule appointments with experts from all fields, it was important to convey that message by using the relevant images in the onboarding screens, which not the case at beginning of the design.
Alignments and placement of icons, navigation bar, and top bar were all rearranged after the usability testing, A/B testing, and peers' opinions from the slack designer community
My focus in this design was to make sure that my persona which is Julia, is able to either read articles, find the right expert, contact the expert, or schedule video call appointments with the expert. All the features that allow her to complete these tasks are included in this design. Which are;
-Search for experts
-Contact the experts, or
-Schedule video appointments.