Web Development Log | MeetMe
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
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
A-I am still using it: 8
B- I was using it in the past: 8
C- only registered: 22
D- never: 10
A- Name and letter: 46%
B- nickname: 54%
A- computer/laptop: 44%
B- mobile devices: 56%
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).
1 completely static – 10 completely flexible
restaurant tips: 20%
date tips/news: 18%
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 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.
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 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.
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 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.
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 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.
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
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)
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)
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 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.
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
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.
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.
|Register/login||enables a user to access and use the system|
|Create account||Newly registered users need to fill the required fields to create account.|
– profile photo
– full name
– sexual orientation
|Home (Dashboard)||The page where a user sees when they login. From here, they see update notice, navigation and search bar||Must|
|Profile||A user can edit and enrich their profile page. some information is used filtering them.|
– home town
– current city
|User database||All private information about user are held in secured database||Must|
|User database-connection||Information 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
|Profile – ID verification||Connect 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.|
– student number
– valid passport
– Driving licence
|Messages update||User will get notification whenever he gets a new message||Should|
|Profile – Default Preference||This applies to search filter. A user gets notified matching people.|
– sexual orientation
|Save search||User can save filters at search site||Could|
|Message search||Search option in messages search by phrase, nickname||Could|
|Favourite sort||Sort favourites by: gender, age, city, hobbies, latest activity, recently added||Could|
4. Conceptual Design
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.
Left side: search box and list of members
Right side: message between a selected user
Left side: search box and search filters
Right side: search results
Left side: image slider
Right side: user information
5. Visual Design
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.
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 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.
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.
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.
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 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
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.
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.
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.
Add a link to massage lists
Chat icons are replaced to Smile
Add access to favorite