Sinaui — UX case study for learning apps

This project started when I joined the UI / UX Bootcamp from Sanbercode. The project work lasted for 2 weeks, where I served as a UX designer and UI designer. This project’s challenge is to create a platform that can provide the best learning for aspiring UX designers.

Creates assumptions about who the target users are and their needs

To accommodate all assumptions regarding the product, I use the Product. Vision Board.

Product Vision Board

I assume that this platform’s target users are students or the general public who desire to learn UX Design. They need a platform that is easily accessible and has good material. Besides, they also need a forum to share their difficulties, and some mentors can help them.

Assumption Validation

I conducted qualitative research by interviewing 2 participants. Participants are final-year students who have the desire to study UX Design. The interview yields several points and insights about the product that the user wants. The points obtained in the user research are then grouped using an affinity diagram.

Affinity Diagram

After the points are grouped, it is found that the user requirements are as follows:

1. User want a platform that can be accessed using a smartphone
2. Mentors are available to accompany students
3. Provide a forum for discussion between participants

While the pain points found include:

1. User cannot reach a quality place of study on a cost basis
2. Too many theories
3. The curriculum and materials offered are not continuous

User Persona

To describe the needs and characteristics of the target user, I use a user persona. A user persona is needed so that the design results do not deviate from the target user.

User Persona

Designing Solution

After the assumptions are validated through user research, the next step is designing solutions. The design of the solution is based on the insights found during user research. Solutions will accommodate the needs, pain points, and characteristics of target users.

Pencil Sketch

Pencil sketching or sketching scribbles on paper using a pencil is done before digital design. Pencil sketching helps to explore ideas faster and generate lots of variety.

Pencil Sketch

Wireframe

The results of the pencil sketch are then digitally executed. The design hasn’t been given a touch of color at this stage, and the elements aren’t too detailed. This is useful so that designs can be done faster and get faster feedback. Here are some of the wireframes I created:

Wireframe

High-Fidelity Mockup

After designing the wireframe, then proceed to add the details of the elements and colors. Here are some high-fidelity mockups of the UX design learning platform:

Registration

Users can choose between registering using a Sinaui account or using a Facebook / Google account during the registration process. When a user can register using a Facebook / Google account, the registration process will be faster and easier.

Registration

Home dan Notification

The Home page features several features such as:

• Search: Users can search for the class they want more quickly.
• My Course: Users can access classes that have been or are being attended.
• Explore Category: There is a class categorization so that users can search for classes based on categories.
• Popular Course: Users get recommended classes that are currently popular.
• Notifications: The notification page will appear when the user taps the bell icon. Users will receive notifications when other users respond to posts made by the user.

Home

Accessing class

Users can access the class after registering for the class. Then the user will be presented with several chapters of material. In the material details, users will be given material in the form of articles and learning videos.

Course

Community

To accommodate user needs in sharing information or problems at hand, a Community feature is provided. In this feature, users can create posts, respond to other users’ posts, and interact with each other in a post.

Community

Other Pages

Apart from the several pages above, there are also several other pages such as:

• Settings page: On this page, users can manage personal data, view certificates, and read FAQs.
• Personal Data Page: On this page, the user can set name, place & date of birth, profile photo, and bio.
• Bookmark page: This page is used to access some of the articles that the user has previously bookmarked.
• Explore Category page: This page will appear when the user taps “see all” on the Home page.

Other Pages

Prototyping

After the high-fidelity mockup has been completed, a prototype is made to make it more similar to the live application. So it will be helpful when doing user testing.

You can access the prototype of this design here.

Things I Learned

This case study is far from perfect, and there is still much that I can improve. Starting from research at an early stage, maybe I should invite 5 participants for a user interview or add quantitative research to increase the insights obtained.