top of page
Becase
UI/UX DESIGN
Overview
This is a project of my friend's studio. I spend my spare time creating a UIUX system of the mobile app for Becase. It is an online dating mobile app. To complete this project not only for my friends but also I created it as an exercise work and my work sample which I'm so proud of.
My Role
Sole UI/UX Designer
Duration
4 weeks
Tools
Figma, Photoshop, Illustrator, Paper & Pen
Design Process
DEFINE
EMPATHIZE
IDEATE
DESIGN
PROTOTYPE
With a focus on UI for this project, the steps I covered in my design process included initial intention, user persona, user flows, sketching, wireframing, style system, mockup, and prototyping.
DEFINE
The first step in my process by defining and answering the 5 W questions.
WHAT
A mobile app and a responsive web app to create an online dating and make-friend platform. Free and easy to find your Mr./ Ms. Right.
WHo
Users who want to date someone or make new friends. Also for the user who doesn't wanna pay too much for dating, or farm for credit for the dating.
WHen
Users can use Becase to meet someone and then date someone anytime. Especially at night for single people to sleep in the bed.
WHere
No matter where users can use Becase to connect with other single people. If they are in the same area would be the best, they can meet at off-line.
WHy
Becase encourages users to find their love with effort work. Keep finding until you met your Mr./Ms. Right is meaningful, don't put too much commercial on it.
Empathize
After defining the scope of the app, the second step is to introduce the initial intention and a proto persona to better understand my users’ needs and goals.
Initial intention
Online dating has become one of the most important ways to make friends in the world today. There are also many online dating apps, such as Tinder and Bumble. But these dating apps require you to spend a lot of money to provide you with valuable services. The team designed BECASE to make friends purer and less commercial. BECASE encourages singles to rely mainly on their own efforts to find Mr./Ms. Right, thus proving that love is priceless.
Pain-point
-
Only a high VIP fee can unlock useful functions, and basic functions can only achieve some useless functions.
-
Users on the platform are not strictly screened, and many weird users are often mixed in.
-
Users need to fill in a lot of personal information before using the app.
Goal
-
Users can get free credits by daily login into the app, which can be used to unlock many useful functions.
-
Strictly check the quality of registered users and screen out high-quality users.
-
Allow new users to try the app before registering, except for the necessary information, reducing the options for users to fill in for the first login.
proto persona
Anna has used many online dating apps. Although she went on several dates, they all failed after a short time. She has invested more than $2,000 in dating apps, which is a lot of money for Anna, who has a low income, and has not found a boy she really likes, so she has begun to doubt the authenticity of dating apps.
Pain-point
-
Pay a lot of money on dating apps.
-
Boys who met through dating apps are less satisfied.
-
Don't know how to start a conversation and have a conversation barrier.
Anna Howard
23 yrs, Restuarant waitress
A single man who has been divorced for 3 years, George is looking for a woman who can make his heart beat. George uses 3 dating apps at the same time, which he thinks will give him more opportunities. But he is usually very busy at work, and only uses dating apps on weekends or in his free time. This caused him to waste the membership he bought.
Pain-point
-
Want to make more friends and explore cultures.
-
Learning a new language while teaching her native language to others.
-
She wants to share her life with every language lover.
George Clark
45 yrs, Banking Manager
Ideate
I figured out the essential functions the app would need to make it successful and useful. Then, I created a user flow diagram to map out these features and see what kind of pages would be necessary for the app.
Essential fEATURE
-
Language partners list. Users can find a language partner here. Free and unlimited chatting for every user.
-
Explore page that for users to browse others' posting, comments, and shares.
-
Language tutor page for all users to browse language tutors and make a booking class with a tutor.
-
Tutor application. For every user who wanna become a language tutor.
-
Tutor profile. After the tutor is verified, a tutor can set up a course schedule and hourly payment.
-
Tracking course status and rating for a tutor.
User Flow diagram
Action/
Interact
System
to judge
1st level
depth
2nd level
depth
3rd level
depth
Design
After ideating the information architecture, we moved on to creating the low-fidelity wireframes and mid-fidelity wireframes. I preferred to stick to elements that were as familiar as possible, to make interaction simple.
Low-Fidelity Wireframes
MID-Fidelity Wireframes
Style system
Typography
SF Pro Text
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Category
Title
Title
Title
Title
Title
Size
32
20
14
8
6
Weight
Bold
Bold
Medium
Regular
Regular
Primary color
Primary button, Title, Body Copy, Text
Background, Selected text
Secondary color
Error, Button
Inactive text, Dashline
Navigation Icons
Feature Icons
Prototype
I continued to use Sketch to create my high-fidelity wireframes and use InVision to create an interactive prototype demo.
High-Fidelity Wireframes
UI MOCKUP GALLERY
Browse the UI mockup gallery below by swipe right or left the phone screen. Feel free to explore the gallery.
Mockup
Next
I hope to test the design with users to validate the concept so far. It would be important to find out if the app’s flows and visual design resonate with users or not. I would also like to see where there are areas of improvement because continuous iterations are an integral part of the design process.
Want to work together?
If you like what you see and want to work together, get in touch!
bottom of page