Web Development Log | MeetMe

Front-end Development, UX UI DesignConceptual Design, Prototyping, Usability, User Research, Visual Design

This is a web development project for the university’s assessment worked with Lena Schuster.

We undertook primary research, user research and competitor analysis, and then created conceptual designs, visual designs and prototypes.

The project was graded as A+
Overall 86%: Prototype 95% and Documentation 77%

  1. Primary Research
  2. User Research
  3. Competitor Analysis
  4. Conceptual Design
  5. Visual Design
  6. Prototyping 

1. Primary Research

The main point of doing research is to reach out to target users to find out their needs, wishes and overall requirements for any project. For our project we have decided to create a questionnaire.

Most of the answers are simple A/B or yes/no questions as young people would not answer such many open-ended or multiple choice questions.

48 people anticipated the questioner.

20 years old: 1
19 years old: 9
18 years old: 27
17 years old: 11

Male: 25%
Female: 75%

A-I am still using it: 8
B- I was using it in the past: 8
C- only registered: 22
D- never: 10

Yes: 27%
No: 73%

A- Name and letter: 46%
B- nickname: 54%

A- computer/laptop: 44%
B- mobile devices: 56%

Yes: 63%
No: 37%

Photo: 44%
Height/weight/age: 30%
hobbies: 26%
sexual/relationship preferences: 14%

After inputting the ,,dream partner” data there will be possibility to get notification when your partner is within area of 1 km from you (with Wi-Fi/data/GPS systems).
Yes: 58%
No: 42%

1 completely static – 10 completely flexible

forums: 44%
groups: 30%
restaurant tips: 20%
vouchers: 23%
date tips/news: 18%

Yes: 38%
No: 62%

A- up to £1/month: 72%
B- £1-£5/month: 22%
C- more than £5/month: 6%

2. User Research

We developed 4 personas and scenarios to learn about possible users.

Cathy (19)

Persona

Cathy is a first year student and she is feeling quite homesick as this is her first time living on her own. She is studying teaching and likes to spend some time shopping or clubbing with her new friends. She has a bubbly personality but she can socialize easily and therefore she is interesting in meeting new people.

Scenario

Cathy is just sitting in her class on Friday afternoon and feels a bit bored as all of her new friends do not want to go out tonight. She remembered she has seen a new dating web MeetMe that is not only for dating but for finding a new friends as well. By creating a new search she has found a girl in her town who wants to party tonight as well. She sends her a private message and few minutes later she receives an answer. Her new friend wants to go out.

John (21)

Persona

John is now finishing his last year of Software development at university and feels kind of stressed and lonely because few weeks ago he broke up with his girlfriend. He is quite shy and do not like over-crowded places. He is looking for someone to who he can talk to and trust.

Scenario

John is in library working on his final year project when suddenly he hears a notification from his mobile. A girl he has seen in library send him a message simple ‘‘Hi‘‘. John decided to text her back. Few days and a lot of messages later they had a first date in a café which was advertised at MeetMe website. They spend a lovely time together and after a couple of weeks they started dating.

Kerli (20)

Persona

Kerli is an Erasmus student. She is from Estonia and she has come to this city for 6 months because she loves history and she studies it as well. She is kind girl but a bit nerdy. She likes reading books and visiting historic places or sites. She would be happy if she can find any other Erasmus student interested in same things and who would be interested in visiting her in her motherland as well.

Scenario

Kerli is just window shopping around the city. She decides to get a quick café in her favourite café. When she sits down and scrolls down the Facebook she can see an advert for a new dating website called MeetMe. She decides to create an account and upload her profile information. When she was examining this new website she found a group of foreign students in her city. She join them and after a couple of days she is invited to their party.

Darren (22)

Persona

Darren is studying second year of chemistry. He would like to be a teacher but he finds it challenging because of his disabilities he has a wheelchair. He spends most of his time in a school lab and after school he likes to watch films in cinema or going to Chinese restaurants. He is looking for someone he can talk to and maybe if the spark is there a bit more.

Scenario

Darren has just finished his experiment in a chemistry lab. He and his friends decided to go to the pub nearby uni. When going out he feels a bit pushed away as he is the only one with any disability so most of the time he is on his phone. In private messages he is texting a girl who is studying chemistry as well but at a different university. She ask him to go out and he agreed. At a voucher site he has found cheaper train tickets so he the money he have saved he spent to buy her a bouquet of roses.

3. Competitor Analysis

Main Competitors

We selected “Date at Uni”, “We Love Dates Student” and “Happn” as main competitors for our product.
Target users for Date at Uni and We Love Dates Student are both students; therefore, they have immediate impact on our market.
Happn does not have immediate impact on our market since their main target users are not student. However, Happn is one of very popular dating app which also opens to students.

Date at Uni (DAU)

Screenshot: Date at Uni

Date at Uni is designed for users who are the student. Website seems out dated design since it is not responsive. It can appear to be inactive since it has no active sns is available.

We Love Dates Student (WLD)

Screenshot: We Love Dates Student

We Love Date Student is a branch for students of its parent site We Love Date. Responsive and simple flat design (only for top page) make the site accessible. They have links to major sns accounts; such as Facebook, Twitter and YouTube. They use these sns actively.

happn (HPPN)

Screenshot: happn

Happn is 100% mobile app. The website is used as a station where visitors can collect information about app and download it. Website is perfectly responsive and design follows current trend which make the site to be very attractive and accessible. They have sns accounts for Facebook and Twitter which are both followed by nearly 2 millions users.

Service/Feature

Click to enlarge

Date at Uni (DAU) and We Love Date (WLD) have similar features while Happn (HPPN) has very unique features. For example, DAU and WLD provide service only online websites whereas HPPN provides mobile apps to access their service. Another differentiation between them is the way to find people. DAU and WLD use filters to set a user’s preference. HPPN on the other hand, eliminates people before applying a user’s preference by using GPS.

All of them provide some basic features such as profile page, message, quick interaction, block unwanted users and FAQ.

Strengths and Weaknesses

Click to enlarge

DAU’s strongest point is that they specified target users. It is clear for the new visitors to know what they can expect from the website; in this case, a user can expect to find students in the UK.

WLD has friendly user interface for registration which provides a step by step process. It also indicates number of steps to complete registration that reduces user’s stress.

HAPPN is designed as mobile app, which enables to a user to access to the service any time they want. The app also provides a location-based real-time experience. It shows people who across/pass trough to a user.

Both DAU and WLD are designed for users of large devices such as PCs and laptops. Therefore, their service is not accessible to the mobile users.

Reliability of account can be an issue to DAU and WLD due to lack of profile checking system. HPPN asks to register with Facebook account which can reduce number of fake accounts.

HPPN shows where users across each other and number they across. HPPN does not proved exact place but the data can be estimable which might result in causing security issues.

Market Overview

WLD has over 20.000 followers while HPPN has more than 2 millions . Followers of HPPN is 100 times greater than WLD.

HPPN has been launched over 50 major cities. It doesn’t indicate number of countries but still indicates much greater number of countries than WLD which is available in 6 countries.

It is clear that HPPN has been launched so many cities because of its popularity.

The keywords that have made HPPN popular are portability, handiness and real-time experience provided by location-based feature.

Due to the difference of their built such as web service (DAU and WLD) and mobile app (HPPN), not all the features cannot to be transferred.

However, DAU and WLD can improve their portability and handiness by making the website responsive. This should attract more student who are most likely to be a native smartphone user.

Requirements Catalogue

Register/loginenables a user to access and use the system
– email
– password
Must
Create accountNewly registered users need to fill the required fields to create account.
– profile photo
– full name
– gender
– age
– sexual orientation
Must
Home (Dashboard)The page where a user sees when they login. From here, they see update notice, navigation and search bar Must
ProfileA user can edit and enrich their profile page. some information is used filtering them.
– home town
– current city
– hobbies
– appearance
Must
User database All private information about user are held in secured databaseMust
User database-connectionInformation about users can be seen only via search/profile site
Only the secure one, not ID or other if user do not wish others to see
Must
Profile – ID verificationConnect with Facebook/provide student number certify a user as premiere member. ID information is only used to certify them and never viewable to other users.
– Facebook
– student number
– valid passport
– Driving licence
Should
Messages update User will get notification whenever he gets a new message Should
Profile – Default PreferenceThis applies to search filter. A user gets notified matching people.
– age
– gender
– sexual orientation
– hobbies
– appearance
Could
Save search User can save filters at search site Could
Message searchSearch option in messages search by phrase, nickname Could
Favourite sortSort favourites by: gender, age, city, hobbies, latest activity, recently added Could

4. Conceptual Design

Mind Map

Click to enlarge

Wireframes

HOME

Home page is a dashboard, where a user can see feed, update and notifications.

Left side: minified my profile information

Right side: Notifications, recommendation, new member and recently visited members.

Click to enlarge

MESSAGE BOARD

Left side: search box and list of members

Right side: message between a selected user

Click to enlarge

SEARCH PAGE

Left side: search box and search filters

Right side: search results

Click to enlarge

USER PROFILE

Left side: image slider

Right side: user information

Click to enlarge

FAVORITE LISTS

Click to enlarge

5. Visual Design

Inspiration

screenshot: topshop.com and frenchconnection.com

Design concept is “like a catalogue” where a user can look for a boyfriend/girlfriend. Design was hugely inspired by fashion websites. Because the objective of these websites is to ensure a user to focus on their products which is beneficial to our purpose- focus on to see other users.

According to our primary research, 92% of participant think seeing photos is important. It is therefore, we believe this image focused minimal design approach which fashion websites use is appropriate for this project.

Style Tiles

Click to enlarge

Top Page

We selected an image that shows hands to hold a flower. It can be seen as giving or sharing that creates sweet atmosphere.

Without having faces can make it easier for a user to believe that it can be themselves and their partner.

A new user need to use register button which is located in the center to create a new account while an account holder can login through login button placed on top right corner.

Home

Click to enlarge

Home displays notifications, recommendation, new users and a users favourites. PC site displays my profile which has a link to edit profile page. This space can be used to suggest a user to enrich their profile by notifying “write about yourself” or “what are your favourite films”. My profile is eliminated on mobile site.

Click to enlarge

Key difference between PC and mobile sites is design of navigation. PC site has a full horizontal navigation while mobile site has a hamburger menu.

Message

Click to enlarge

While PC messaging requires a single step, that of mobile requires 2 steps which is often used for mobile messaging apps such as WhatsUp and Messenger. Due to limited width on mobile, this is a better solution.

Profile

Click to enlarge

Edit profile page allows a user to update their profile by clicking edit button. Some information need to be updated through account setting; therefore clicking edit need to take a user to account setting or suggest to it.

While edit profile is only accessible to the account holder, a public user profile is accessible to other users. A public profile has no edit buttons or add image feature but has messaging, chat and add favourite feature.

Mobile design has no difference to profile page other than it has a single column. Simply moved text information below to the image slide.

Search

Click to enlarge

Search result should automatically updating as a user selects search filter.

Search result can be sorted by age, distance (between users address or current city), possibly numbers of matching hobbies or alphabetical order.

Mobile site uses dropdown for the filter with transparent overlay on list of users. This allow a user to see changes in search result.

Account Setting page

Click to enlarge

Some personal information is confidential while some other information is used to enrich their profile. For those confidential information has lock icon next to labels to indicate it is not available to other users.

Due to limited width on mobile site, local navigation changes its form to horizontal bar. Labels are moved to on top of each field.

6. Prototyping 

Clickable Prototype

Click to enlarge

We used InVision to create prototypes. It was easy to learn and create prototypes. This is a great solution for designers and developers before they start coding.

User Test

I tested MeetMe prototype with a friend’s daughter and her friend aged 21. They tested prototype on PC and on smartphone. I left the room while they are testing and discussing to avoid giving pressure on them.

They liked overall design which they said does not look “suspicious” and feel safe to use.

They also pointed out important facts where we need to evaluate. I have reflected some of the issues. However, I left some of the issues such as small text on mobile since it is easy to solve on coding phase and not necessary to solve on static image.

Test Results

Click to enlarge

Evaluations

Add a link to massage lists

Click to enlarge

Chat icons are replaced to Smile

Click to enlarge

Add access to favorite

Click to enlarge

Posted by Aiko Ohakoda