UX Case Study: Smartee an Educational Learning App
Learning is a process that almost all of us go through in our lives. So, finding a great source of knowledge can be extremely valuable and useful in the process of turning us into better version’s of ourselves. That is basically what Smartee is all about, an app that people can use to access the knowledge they want through video courses specifically designed to their needs and wants.
Goals
The first thing I did in this process is clearly identify what my goals or objectives are gonna be. I do this so at any point in the process, if I get confused on what the next step might be, I can always refer to these original goals as a guideline on what to do next. These objectives are:
- Create a UI that’s simple yet intuitive for whoever is using it
- Make sure that the process of completing a task is as relatively simple as possible
- Don’t make guesses. Do the research and carefully think about each decision that I make.
This is my first time doing a UI/UX project by myself so I had a lot to catch up on and these next steps are the steps I took to ensure the end product was good enough.
Team Roles
For this project we were originally put into groups of 3 to brainstorm ideas up until the process of designing the actual application. The actual designing process was done on an individual basis.
The members of the group were:
Muhammad Raihan Armon (Me)
Muhammad Ravinda Putra
Feliana Annisa Nur Utami
These two really helped me solve some issues I had when it came to thinking about user problems and also how to solve those issues. They were mainly super helpful during the Define and Ideate stage of this project.
Problem
Creating a good UI is all about understanding the user from their perspective and most importantly, listening to them when they have issues. In this step of the process, I sat down and thought about all of the issues a user might have with an educational application. To make sure my answers aren’t biased or one sided via my own perception, I made sure to ask as many types of people as possible whether they were mentors, friends, family or other UI designers.
The group and I finally came up with some “pain points” or what we may know as aspects of an application that might be troublesome for new time users. We did this by using the sticky notes feature on Figjam, we wanted to make sure that every one of us had a clear and honest discussion on what ideas each of us had. If there was a good idea, I didn’t want anyone to hesitate to post it with a sticky note. Here were the results:
Some of these issues that we came up with were:
- Too much information on screen
- A flat layout that didn’t add excitement to study
- Typography/writing that is too complicated for the average user
- Lack of contrast that hurts the user’s ability to read text clearly
- Lack of rewards/motivation to help motivate the user to study more (a points system)
Note that some of these ideas may or may not make it in the final cut but that’s what this process is all about which is trial and error. We discuss and get creative as possible until we finally evaluate everything and decide on what is best for the app. Finally we came up with some suitable problems and issues that users might have, we can move on to the next step which is finding the solutions to these issues.
Solution
The next time me and my team had a meeting, we decided to make a affinity diagram to make sure the solutions that we came up with are in clear and separate categories of issues. This was done so that it would be much easier to identify which solution is best for which type of specific problem. We discussed for some time and this is what we came up with:
After looking at the problems that we created we identified that we can categorize the solutions into 4 different types which were:
*Side note some of the solutions that we found can fit into more than one category
Info : These are solutions regarding issues with too much or too little information for the user on one page.
- Examples of solutions:
- Only show IMPORTANT info on each page for the user
- Use language that’s simple and not too complex to avoid confusion
- Give clear indication when the user has completed a task
User : Specific issues that involve the user interacting with the product whether that’s features/buttons or just the experience in general.
- Examples of solutions:
- Make sure that the user can easily/cancel or reverse any decision
- Make sure that each step to completing any task are as time efficient and quick as possible.
Tampilan/Appearance : Issues regarding the color palettes/typography, in short every issue that involves a mostly visual/design related aspect.
- Examples of solutions:
- Colors that contrast well with the text for maximum user readability at all times
- Use language that’s simple and not too complex to avoid confusion
- Give the user’s a percentage indicator as to how much of the class have they completed.
Reward : Issues regarding the system that was going to reward user’s for completing a course.
- Examples of solutions:
- Give the user a reward or a reminder that they achieved something good after completing a course or something similar
In the end of this process, I believe that we as a group had a strong foundation of solutions that we can finally start thinking about the design process and how we might implement these ideas in a more interactable form.
User Flows and Wireframes
The design process starts with the creation of the User flows and Wireframes. We use the user flow to imagine what are the logical steps a user will take when it comes to completing a certain task/feature on our application.
For the user flows we decided to create 3 different user flows for 3 different features/tasks. Those tasks are:
Course Details (How the user might choose a course that they want to learn)
For this User Flow my group and I really looked for references of other successful educational apps such as Coursera and Duolingo for inspiration. I wanted to start off a new user with a recommendation of our best/most popular classes so they can choose for themselves what they want. But if they already have a specific idea in mind then they can just use the search bar that I plan on implementing. Whether they find the course from the recommendations or through the search bar the end result is still a further detailed look at the class. I even made a couple of wireframes just to give a little bit more clarification on what the end product might look like.
Homepage (How the user will login/sign up to access the homepage)
This user flow was pretty simple because almost every application these days has some type of login system. For inspiration we literally just looked into the most popular apps in Indonesia such as Tokopedia or Gojek and implemented the formula from there.
Transaction (How the user will purchase or enroll into a course)
This user flow was mostly based on already existing payment applications and the main one that I drew from was how you pay for a Netflix account. I wanted to make sure the user has as much payment options as possible and every step has a clear indication on what payment they have chosen and a clear and concise conformation on when the payment has been completed.
UI Styleguide
From here on out the project has been turned into an individual assingment. Our mentors wanted us to individually design our own apps with our own logos as to gain experience in creating UI’s for the future. So this process is all about how I chose everything from the fonts, colors and other aspects to the end product.
Logo
For the logo I wanted something simple and clean, so I quickly came up with a name that was simple to pronounce and remember.
Colors
From the very beginning of design process after choosing the logo, I really wanted to design an app with the main color being orange. I think the color is colorful enough to give an interesting appearance and if I tone it down a bit can still provide enough contrasting colors as to not overwhelm the user when looking at it. So I researched online on the colors that would compliment the primary color of my app which was orange and got several ideas.
I compiled a collection of colors that in general were meant to compliment the orange palette that I have chosen fairly well. At the time I saw this as a list of options that were available to me if I eventually wanted to switch up some of the orange colors. I perhaps didn’t plan to use all of them exactly but keeping an open mind on possible additions of color here and there were gonna be much easier now that I had a clear color guide. The main thing was that I had my range of primary colors which was orange.
Fonts
I researched all about hierarchies in fonts and also consulted with some UI mentors on how exactly do I decide which size of text would be appropriate. Their responses were generally that the process of knowing good sizes were based on experience and just looking at successful apps and how they use font sizes effectively. With that in mind I chose a sans serif font for a more modern and cleaner look, made sure the font sizes went in hierarchical order and saved them to my Figma UI kit so it will be much easier to access them quickly rather than just copy pasting every single time I need them.
Buttons and Input Fields
For the Buttons I made at least three different types which were one default version, a hovering version, and also a disabled version. This also applies to the input fields where there was a disabled, idle and filled response field. Didn’t wanna try and make something super different because most people know what a good button should look like and all I had to make sure was that the colors were contrasting enough to the text as to make sure that they were readable.
Prototyping
Now that the components have been made I could finally start creating a prototype based on the user flows and using the UI kit that I’ve made. Here’s what the end product looks like.
During this prototype phase I tried to make sure that the animations that I implemented where in line with the whole aesthetic for my app. I wanted it to be sleek and modern but also very friendly with the neutral orange tone in the background. I implemented user flows for logging in, signing up, buying a course via a chosen payment, using the search bar and also what a purchased course would look like in detail.
Here’s the link to the prototype.
Now that the prototype is finished I needed to do some testing to see if any more changes needed to be made from a new user’s perspective.
5 — Testing
Creating all this was lots of fun, but if the end result is a confused user than all that work would have been for nothing. This is exactly the reason why I needed to do some usability testing.
For this section I used the Single Ease Question to properly rate the user’s experience with my application with the score of 1–7 being the possible scores.
What ended up happening was that the test went well but the user found a lot of improvements could’ve been made. Main thing was that she said that the transaction user flow needed to be in only one main page instead how I did it which was separated into different pages. This really helped me kind of get out of my own head and improve the things that are really important. I ended up combining them into one whole page which turns out resulted in a much more user friendly experience.
Next was the recommendation that I more clearly differentiate the difference between a course before and after I buy it. I fixed this issue by adding a whole new page where the user can see all of the classes that they have ordered. A lot of things that really ended up improving my app were from this interview so this was a really helpful and priceless experience.
Summary
I learned a lot about what it takes to be a UI Designer from the very beginning to the end. Learning the importance of listening to the user and making sure that you don’t take criticism too deep is an important part of learning how to be a better UI designer. I learned a lot about how user’s tend to think about certain features and general tendencies that in the future would really help me in my projects.