The government initiative, Social Development Network(SDN) aims to encourage social opportunities between opposite genders by bridging gaps through accredited partners. The website serves as a platform for eligible individuals to access information on dating and relationship content, as well as details of events planned by SDN and its partners.
I led the user research, user testings, and was involved in UI designing for particularly, Success Stories features. Overall, I was involved in the end to end development of this website, including Wireframes and Prototyping. I collaborated with four designers (Jason, Suzette, Sophie, Laura) throughout this entire project.
The SDN webpage is not catching up with latest digital trend, usability and accessibility of its information are also poor. Based on our initial user testing of old webpage with 15 users, here are some key problems with the core experience.
Outdated and Unappealing Webpage
Layout is messy, with information all over the place. 67% of users rated only 1 out of 5 on their initial impression for the site.
No Relevancy
Unclear intention of the landing page. Users get the idea of an event sign-up page instead of social dating platform. There are also insufficient images that convey to users clearly on what to expect from the event.
Unintuitive Experience
Hierarchy of information is confusing e.g. FAQ is placed as the Hero banner on the main page. There are no clear CTA for users on registration, discouraging signups.
Upgrade Webpage Appearance
Increase Content Relevancy
Improved Webpage Functionality
Overall design better than the original website and well structured.
Our Users
Before we start designing, we deep dived into the existing behaviours of users to understand them better. We have conducted a series of user interviews. Our research targets on some of below points:
✢ Needs and goals of users going onto dating platforms
✢ Pain points of users exploring the existing user journey
We created two Personas, as shown below, where these are mapped to the main behaviours of users. However in this case study we will focus only one Personas, Bryan.
Defining User Problem
We then consolidated the issues faced by two Personas to defined problem statements. Here is one that we have done for our focus Personas, Bryan, in this case study.
User flows
We mapped the Personas to its user journey on the website to meet the intended success metric.
Early Ideation
We have conducted a design sprint together using Figma as a remote collaboration tool. Making our comparative analysis by taking considerations of other brands in the same/ different industries, adopting their best practices. A quick solution sketching was done to end the sprint.
Early Designs
This is how the early wireframes look like. We built on them to create high-fidelity prototypes. Throughout we experimented with different colours, shapes and layouts over remote sessions.
Usability Test & User Interview
To validate designs and prototypes, due to pandemic, we carried out remote tests with 15 users where we observed them in a controlled testing environment. Repeated iterations were also done based on discussion with client’s opinions.
Here is a detailed walkthrough of the revamped website.
Strengthen Visual Aesthetic
The logo of the brand is also recreated to look like two people, using hearts to imply that the site helps individuals seek meaningful relationships. Whereas it previously looked like people having fun at an event.
We also use more vibrant brand colours to give the impression that the brand is warm, fun, and happy. Not forgetting to stick close to the branding of SGDS (Singapore Government Design System)
Exploring Dating Agency in Another Space
We restructured Information Architecture to bring about a better user experiences by putting information on dating agency on a separate tab for exploration.
Positive and Relevant copy
We use friendly copy to speak to the users and let them feel connected to the webpage that the site is here to help them create meaningful relationships.
Never Feel Lost Again During Registeration
We have built clear CTA to existing registration, making the process more intuitive than before.
Discover by Categories
New included feature such as filter by categories of choices, popularity and duration.
Keep Track of Signup Events
We have collected that users also tend to missed out signed-up event amidst busy schedule so “Add to Calendar” feature is included as a reminder.
Live Chat
Replace contact form with live chat function. This will allow help to be given promptly during event registration, which in turn, lower entry barrier to socialising.
Community Feature
Add community feature so users can connect with each other after event, encourage more individuals to mingle beyond SDN platform.
Sharing button
Add a feature to allow users share success stories with their friends through social media, spreading words about SDN as a platform.
⛳️ Take one step at a time
We learnt to solve problem by breaking into small milestones, tackling each issue at one time. This helps to make our work more efficient while reviewing our goals along the way.
⏳ Testing with users
This project has given me to the chance to strategise the "ideal" manner of conducting user interview to get the most out of it.
