Get to know me Ali Imran UI/UX Designer in Sahaware, I would like to make the first case study, namely Redesigning the Etika Chat Dosen Application using the Design Thinking approach, this application will go viral in December 2020 in the Play store, can be downloaded at this link

Incidentally, the developer of this app is my friend Rio Chandra, a Developer Freelance. This case study aims to share my process of redesigning an app, as well as learn for me about the process of creating a user interface. Starting from the research process to the prototype.

Overview

The background of this application Rio Chandra explained, The background of making this application is that the number of students contacting the lecturer is not by ethics when contacting the lecturer, so I made this application to provide a format for writing messages. . A good acronym to send to lecturers, this format consists of several things, starting from the opening of the message, the content of the message, and the closing of the message.

It can be concluded that this application aims to provide simple guidelines, namely writing messages by good ethics.

So from here, I took the initiative to redesign the appearance of the ECD application that has been designed, aiming to increase the enthusiasm of student friends who need this application and not only as experimental material but this application will continue to run and be updated.

Before Design

DESIGN THINKING APPROACH

I need a framework/approach, namely the UX Method: Design Thinking, where this method aims to make it easier to produce products that really suit the user’s needs.

Design Thinking is an iterative process in which we seek to understand users, challenge assumptions, and redefine problems in an attempt to identify alternative strategies and solutions that may not be immediately apparent at our initial level of understanding. At the same time, Design Thinking provides a solution-based approach to solving problems. It is a way of thinking and working and a straightforward set of methods.

There are five stages to use this method, namely:

1. Empathize

In the first stage, namely Empathize, how to find out what problems the user actually feels, the time since this application was released has been a week. I interview users to find out about their habits, needs, and difficulties.

The method I do is by conducting remote interviews using the WhatsApp platform. For this research, I needed five users with the criteria that they were chatting with lecturers using the ECD application.

Interview

I started by conducting user interviews with five people to further validate it. Youth-centered interview questions in using this ECD application. I want to know whether my hypothesis is validated or not through this user interview.

There are several suggestions from users for developing this application, namely:

1. Clarify the greeting/opening sentence in the “Use greetings for Muslims” feature so that it is easy to understand what the context is.
2. The user suggests that the opening sentence mentions the name of the lecturer such as “Assalamualaikum bu Mawar,
3. Users suggest making regional or foreign language options other than Indonesian
4. Users are confused about the form to ask questions. It is difficult to use good and correct language what to start with and end with
5. Users suggest creating a register and login form the first time you use this application.

Usability Testing

At this stage, I test how much the user understands when he operates the application. Then each user is given the same 2 questions, but there are several factors which in my opinion are sufficient to accommodate user problems, namely:

1. Users do not find lecturer contacts if they perform a search in the search field.
2. When is the right time to chat with lecturers?
3. The user is unaware that the sample “Ask a question” and “say thank you” messages are clickable.
4. In the selection of male / female lecturers, the section is not visible.

Playstore review

In addition to the remote interview method, I took the Play store review samples that could refer to user answers. Here are some of the reviews I got:

2. Define

From the results of user findings, observations and research, it is determined what difficulties (pain points) needs, and focus (goals) of the users will be used as the basis for the next stage.

Pain Point 1: Seeking Lecturer Contact

This is where the user when typing the lecturer’s name in the search field, the lecturer contact will not automatically appear, if the tick button is clicked on the keyboard, the lecturer contact will immediately come out.

In essence, the user doesn’t properly understand how the contact search feature works.

Pain Point 2: Precise Time Warning

At the top of the status bar, this application reminds you that in the morning a warning appears “Now is the right time to contact the lecturer” if at night “It is not advisable to contact the lecturer now” well, here I will learn how users can find out the right time of these hours. How much until what time

So that users know more about the right time to contact the lecturer from what time to what time.

Pain Point 3: Not knowing some features can work

At the third pain point, there are several features developed by the developer, but the user doesn’t know whether the feature is working or not.

In the example column “Ask a Question” and Say Thank You “if the sample is clicked, the sample text will be filled automatically, but the user does not know whether the sample text can be clicked or not.

Use a Call to Action to direct the user to use several features.

Develop.

Then from some of the problems from users can be summarized with the developer from the developer. The following developments will be carried out are:

1. Repair Staff and EYD
2. Fixed a bug with the clock detector allowed by chat
3. Add sidebar feature, Fill sidebar menu.
   a. Settings
   b. Lecturer Chat Tips (content)
   c. History
   d. Application Guide
4. Select the number feature for contacts that have more than one number.
5. Good day/night/evening greetings for Muslim greetings
6. Add sharing feature
7. Send the button for WhatsApp business.
8. Options for Copy messages (such as templates)
9. Settings
   a. Class name and setting
   b. Opening greetings arrangement
   c. Closing speech settings

3. Ideate

Enter the Ideate stage which is part of the design view, which is a place to find as many ideas as possible from the solutions that have been discussed.

Information Architecture

I use Information Architecture (IA) as a tool to organize application features, making it easier to use. The tool I use is whimsical.com

The developer will develop several features, and it is possible to take reviews from users so that I can be summary a solution. This is IA that I designed.

Wireframe (Low Fidelity)

Moodboard

Moodboard is a collection of design inspiration, there are several items that I put in Moodboard such as Layout Design, Color, Icon, and Illustration. To find inspiration, it is taken from various platforms such as Dribbble.

The mood board was created using the inVision tools so you can see my work board, which can be accessed here.

Layout Design Inspiration

Color Scheme

Illustration & Icon Design Inspiration

Visual Design (High Fidelity)

After finishing gathering ideas and completing them, then I designed the User Interface for all the pages that will be needed. The tool I use is figma. Before starting to design, I made a design first to make the HI-FI process faster. The details for each page are as follows:

Design Solution

1. Homepage

2. Sidebar

3. History

4. Settings

4. Prototype

The tool that I used to make a prototype is Figma, the prototype can be accessed here

5. Test

Once finished creating Visual Design and Prototype using Figma. I did a test to validate the major pain points. The user has successfully completed a task flow that I created which aims to design a better user experience, here are the results of the questionnaire task flow I gave to five participants using the Google Forms platform:

Conclusion

The results of the interview using google form show that the user is easy to operate the ECD application compared to the old design. But I still have a lot to develop and improve the User Experience and User Interface. For further development of the ECD application using Design Thinking I would reiterate the analysis and not just stop here but there should be further evaluation to the development of this application.

Closing

Thank you for reading my first case study, if my designer friends have criticism about my writing, please correct me.

Greetings from Designer Indonesia 👏

Thank you
Was This Helpful?
Stay Tuned For More Article

Follow us :
Instagram | Dribbble | Medium | Linkedin

Credit

Link Playstore https://play.google.com/store/apps/details?id=com.ken.chat_dosen_helper.release1

Illustration Coming Soon https://www.figma.com/community/file/883778082594341562/Free-75-illustrations---Surface

Illustration Section Gender
https://dribbble.com/shots/6629534-Age-Selection?utm_source=Clipboard_Shot&utm_campaign=easonz&utm_content=Age%20Selection&utm_medium=Social_Share

Icons https://www.figma.com/community/file/902916014302207596/Unicons

Design Systems https://www.figma.com/community/file/807688557354960949/Android-UI-kit

Medium Reference
https://medium.com/@kaleb.yodi/studi-kasus-donasi-barang-online-b1c68d2ed4b3
https://sharenalicia0602.medium.com/studi-kasus-ux-merancang-pengalaman-pengguna-lebih-baik-aplikasi-seluler-adidas-9c6b3b52754

Tools

1. Visual Design & Prototype= figma.com
2. Moodboard = invision.com
3. Wireframe & Information Architecture = whimsical.com
4. Reference = dribbble.com
5. Writing = medium.com
6. Taskflow = googleform.com
7. Interview = whatsapp.com