MeetMe 5 | Visual Designs | Web Development Log


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.


About Aiko Ohakoda

I'm a graphic designer and front-end developer. Love kawaii stuff and yummy cakes. Can't live without coffee or soy sauce.