top of page
DITSAY
UI/UX DESIGN
Overview
This is a project of my friend's studio. I spend my spare time creating a UIUX system for the mobile app for Ditsay. It is an online language-learning community. 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 language learning community. Work according to your own schedule and adjust your tuition fee you want.
WHo
Users who want to learn a new language and make new friends, post to share their life, or teach their native language to other people.
WHen
Users can use Ditsay to learn a language or communicate with others. To schedule whenever you want to teach language to earning money.
WHere
No matter where users can connect with other language lovers worldwide. Also, setup schedule and teach language in different time-zone.
WHy
Make full use of your own language to communicate with the world and create wealth. To break down language barriers and connect you with the world.
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
Since COVID-19 spread all around the world, COVID-19 change the world and change human being's life. Some people lost their job and some of them chose to work from home. People are willing to work for themselves rather than work for company organization. According to the team result of research, people are more willing to communicate with foreigners to make up for the regret of not being able to travel abroad. And also there are thousands of million language learners or language lover all around the world.
Pain-point
-
People hope to communicate with foreigners or explore more different cultures during COVID-19.
-
Language teachers are locked by the academic institutes.
-
Many online language tutoring apps or platforms cost high commissions from a language teacher.
Goal
-
To create a language community social platform. Users can share their life or ideas by posting.
-
Free chatting for all users. They can learn or teach language exchange among users.
-
Language tutor receive 100% of your tutoring commissions with no commission cut.
proto persona
Paul is an ESL tutor working in a linguistic institute. He is also a 6 years father. During COVID-19, He has to take care of his 6-year-old daughter at home. Business at his language institute has been down during COVID-19. So he is looking for an online language teaching platform that suits him.
Pain-point
-
Stay at home, can't get out for work.
-
Most of the time, the tutor must follow the schedule.
-
The high commission cut from language tutor.
Paul Goodwin
5 years ESL tutor
Joanna is now studying from home for 2 months. She was planning to have a graduation journey with her friends in 2021. But she has to stay at home until COVID-19 passes away. Now, she hopes to make friends and learn Korean on the internet, also exploring more different cultures.
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.
Joanna Liu
College student
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
In order to structure the new app, starting from the architecture of the information, a card sorting was carried out with students. to identify the contents they considered necessary in their university life, and their possible location.
Widget Didn’t Load
Check your internet and refresh this page.
If that doesn’t work, contact us.
Start/
Lanuch
Sign in/
Sign up
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
Widget Didn’t Load
Check your internet and refresh this page.
If that doesn’t work, contact us.
MID-Fidelity Wireframes
Widget Didn’t Load
Check your internet and refresh this page.
If that doesn’t work, contact us.
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 Action, 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
Interactive Prototype Demo
Try the interactive prototype demo below by click or tap the phone screen. Feel free to use it as a mobile app.
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