UI/UX Case Study — Designing a UX Design Digital Learning Platform
Hi everyone! This time, I’m going to share my design process of designing UX School mobile app. This project is an individual project given from taking part to training at SanberCode Bootcamp. The design process is carried out according to the directions given by the trainers day by day align with the timeline.
Here are the details for this case study:
Product Vision: Provide the best learning platform for prospective UX designers to become UX designers
Timeline: Approx. 2 Weeks (Day 7–15)
Tools: Figma
OVERVIEW
The idea of making the concept of UX School is initiated from the mini research on a single user who often uses digital learning platforms and is also enthusiastic about UX.
In terms of designing a product that is in accordance with the product vision that has been given, there are several stages that need to be done. In this case study, the steps taken follow the basic stages in the design thinking process
A. EMPATHIZE
At the beginning of empathize stage, trainees are given instruction to do research by interviewing 1–2 people with criteria that match the target user who will use our product. The criteria of users are determined on the previous task on the making of the product vision board.
To comply the research instruction, I interview one person who meets the criteria that I’ve determined. I interviewed her directly according to the list of questions I had prepared. After that, I grouped the interview results into an Affinity Map.
- Affinity Map
The following is an Affinity Map that I created which contains the words of the user during the interview.
- Insight Madlibs
After that, I created the Insight Madlibs to learn to insights or findings that I found during the interview process.
- User Persona
As part of processing the research findings, I analyze the information that found on the research phase by creating a User Persona. This persona will contain the details of user’s goals, needs, frustrations, interests, and also other information that might useful in the design process such as user’s profile, personality, influencers (for mobile app design), and behavioral traits.
B. DEFINE
After collecting and analyzing all the information obtained from the empathize stage, the next step is to determine user problems which will then be resolved in the design of this product. The define stage that I did consisted of making a problem statement and mapping the user journey.
- Problem Statement
At this stage, I use the 5 Whys method to find the root of the problem which is then used as the main focus in designing the learning platform.
In this way, the root of the problem has been found that she likes something fun and can motivate her to get the job done.
The final problem statement becomes:
“A student who likes UX, needs a fun learning platform solution to learn to be a UX designer”
- User Journey
At this stage, I create a user journey map to map the scenario of the user journey in finding a platform that suits her needs. From here, I can find out which steps contain opportunities and what opportunities can be developed in designing this platform.
Based on the results of the user journey, the opportunity that can be taken as a step to add value to the product is to include elements that can make the platform up-to-date and provide community groups to stimulate user enthusiasm in the learning process.
C. IDEATE
After analyzing the problems and opportunities, I formulate the best possible solution to solve the problems that have been collected in the Define stage.
- Solution
At this stage, I use the HMW (How Might We) method to describe the solution of the problem.
“How might we create a fun learning platform?”
There are many answers to that question. The following are the solutions that I provide to answer the questions, as well as to achieve the user goals.
1. Community
Providing community features ranging from reading materials in the form of articles, organizing UX-related events and discussion forums related to UX. You can discuss case studies of issues that are currently being discussed, or deep down exploring processes and methods related to UX itself.
Most learning platforms are like inanimate objects, not connected to social activities. Whereas social activities are important, especially in digital learning platforms, so that users do not feel alone and get lost on the platform.
2. Chatbot
Due to a large number of users could possibly using a platform, sometimes, the human resources in the company are not sufficient to be able to facilitate all the questions and complaints from their users.
Regarding the problems, I created a troubleshooting solution by integrating the app with a smart chatbot. This chatbot has an AI figure or character that is a representation of the instructor team per certain lesson section.
The instructor team will develop answers to frequently asked questions by users. If there is something new that is not recorded in the chatbot system, the question will be held for a maximum of 1x24 hours. If the question has been answered, then the question will automatically become new data in the chatbot.
Instead of providing a FAQ feature that makes users have to find the answers to similar questions themselves, it will be easier for users if they just ask the question on the chatbot engine and gets the answer instantly.
3. Games
The developed games are related to the subjects material in the UX lesson. In addition to do couple of exercises and tests to verify the comprehension, users can continue to sharp their skills and understanding through these games.
For now, there are 4 different game designs; This or That, Detective UX, Affinity Map, and Layout Building.
4. Dashboard
In the dashboard menu, there is an information of the level, learning recap, and points collected by the user. Besides that, there are also learning performance statistics in the last week which are displayed in chart form.
- Features Matrix
After brainstormed and collected all the possible solutions, I created an impact-effort matrix to map each solution and determine the level of impact and effort. Through these tools, I can identify which features are potential to be developed and which features are better to be left.
If the solution is on the quadrant IV, it is better to be left because it has low impact to users but high effort to be implemented by the business. In this case, there’s no solution that placed on the quadrant IV, so all the solutions are okay to be implemented.
- Sketch
After find out the solutions, I made sketches using design sprint method, the Crazy’8. There are only 8 frames that portray the rough layout of the mobile app.
- Wireframe
After did some sketches, I continued in making the wireframe. I made a little changes as part of the ideas development of the rough layout in the sketch process.
D. PROTOTYPE
After finalize the ideate phase, I make a high-fidelity prototype by beautify the interface design, add some flows to make it interactive, and make the UI style guide to documented the design resources.
- Interface Design
For the interface design, I choose to put purple dominant color with different types of shades. Sites from blu mint digital, purple stimulates creativity and problem solving in the brain. I also put minty green as secondary color to give the fresh tone and the peach color as complementary to give the delicate and joyful vibes to this platform.
For the fonts, I choose Poppins as heading and Nunito as paragraph. Most of us are probably familiar with Poppins. Apart from the good of this geometrical sans-serif typeface, using this font will give the users sense of familiarity.
Nunito is another alternative for Rubik, the rounded corners type sans-serif with the slimmer style and more minimalist looks.
This typeface gives a relaxed impression so that when reading paragraphs on this platform, users don’t feel too compelled to finish them with a rigid goal. This font gives eyes and mind flexibility to finish reading in a more pleasant way.
- Interactive Prototype
The interactive prototype is on Figma. You can see it by clicking here.
- UI Style Guide
Here is the UI Style Guide that I use on the high-fidelity interface of this UX School platform.
E. TEST
At this stage, the instruction given by the trainer is only to create tasks and scenarios related to the product for usability testing. Here are 5 tasks and scenarios that I made to test the usability of this platform.
However, to find out the effectiveness of the product, I also tried to test the tasks and scenarios with the user I had interviewed in the empathize stage. Through this phase, I can get the feedback and comments on what I can improve from this product design.
Based on the test results, an error was found in the first scenario. This is because the user assumes that the progress is usually placed in the Homepage. In addition, user also considered that the icon of the courses in the Homepage is too monotonous. User gives suggestion if the icon used for each course is varied according to the course.
Considering the scenario given, the learning progress can actually be seen on the Dashboard page, precisely in the description of the learning level. But, after seeing how the user performs the scenario and encounters difficulties, it seems that it would be better if the Homepage also displayed something that projecting the learning progress.
Back to analyzing and ideating the solutions, I finally got the final solution that can be used to solve the problem.
The following is the change I made in the appearance of the Homepage.
Based on the picture, it can be seen at the top of the page that it has been replaced by displaying a learning progress chart. As for the on-going lessons, they are presented under the search column.
The information presented on this progress chart is different from the one that is displayed on the dashboard, because the dashboard only includes exact numbers for level information, recap of courses taken, and recap of points that have been collected.
The icon displayed has also been changed to suit the topic of each course. In addition, the card size has also been changed to horizontally elongated so that users can easily distinguish them from cards for sections inside the course.
After the changes were made, I tested it on the user with the A/B Testing method by giving the homepage options that she thought were better.
Based on the test results, user prefers the second display (after the iteration), because the display of progress chart on the Homepage is considered more informative and the replacement of the course card’s icon makes the interface more attractive.
CONCLUSION
Based on the results of research on one potential user, it was found that the user wanted a “live” digital learning platform to influence and spread enthusiasm for carrying out all the learning activities.
Pain points experienced by user when using the e-learning platform are that the learning process is less than effective, moreover the platform is only limited to providing material, other activities such as questioning, validating the insights gained from the learnings, etc. are carried out on different platforms.
If you look at non-digital learning platforms, you can see that many students are actively asking questions, brainstorming ideas, and even playing games to sharpen their skills in a non-boring way.
For this reason, UX School was initiated, to provide a better digital learning experience by eliminating the gap between technology and humans as the users of the technology itself.
UX School is a smart platform for learning that is equipped with Artificial Intelligence technology that can replace the role of tutors to provide direction and answers to student or user questions at this platform.
I also put a fun and social feature in order to complete the meaning of “live” of a digital platform that needed by the user.
UX School is expected to be the answer, maybe not only for the UX learning platform, but also for other learning platforms in order to adapt the concept of a smart platform that can help users to get a guidance in their learning process, just like when they are learning in a non-digital platform.
