Application Design II / Self-Evaluation and Reflection
25.09.24 - 20.10.24 / Week 1 - Week 4
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Application Design II (DST61004)
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Application Design II (DST61004)
INSTRUCTIONS
TASK 1
Self Reflection and Evaluation
For the first task of Application Design II, we are required to perform a self-evaluation and reflection based on their mobile application design I final project. This project aims to document the issues, problems, and difficulties and propose solutions to improve the mobile app design aesthetic and user flow. However, we were also allowed to start fresh with a brand new app- which is what I have decided to do as I wanted to continue with a fresh perspective and design which also aligns with my current life circumstances.
I have chosen the app "GRE Vocabulary Flashcards" as I was inspired by a friend that will be taking the GRE soon. The GRE (Graduate Record Examinations) is a standardized test that is part of the admissions process for many graduate schools. One of its sections places a very strong emphasis on advanced vocabulary (1000+), which makes it essential for test-takers to have a solid grasp of these challenging words, meaning lots of memorization. This app aims to help users efficiently build and memorise the vocabulary through flashcard-based learning, thus why my friend had been using it- however the UI and UX design of the app could be greatly improved. I came to know of its needed improvements through the complaints my friend had regarding the apps UI and UX, so I decided it would be good to take on as a project since it also could solve a real-world problem and give a practical solution in the end.
GRE Vocabulary Flashcards Analysis
Upon entering the app, there is no formal login or onboarding feature to teach you how to use the app. One criticism pointed out by my friend that was frustrating was the fact that you had to create an account to save your progress- in an app like this, an account is not needed since progress could easily be saved locally on the device. According to my friend, as the GRE is a one-time thing, users primarily want immediate access to study materials without unnecessary barriers, and requiring an account feels like an unnecessary step for a straightforward learning tool that will only be used for a certain period of time since it is for a highly specific function (taking the GRE).
It is also disruptive to the user experience of the app- there is no way to get rid of this unless you create an account, which can be frustrating for the user if they only plan to use it for a certain period as most users of this app seem to do. Since it is in a different colour (the only other pop of colour on the page too) and at the top, its eye-catching and directs attention away from other elements that are meant to help the user learn words, which defeats the main purpose and functionality of the app. This should be removed completely as it is disruptive.
Fig 1.0 Unremovable Pop Up
Furthermore everything on the screen is cramped in together and feels constricting- there is a lack of space between elements which makes everything visually congested- the most obvious sign of this is the app name on the top and the hamburger menu almost touching the time, wifi, and signal on the phone display.
The typography is also quite boring and some of it is not that clear since the font is thin and the colour matches the background its in, like the "0 of 51 words mastered".
There is no clear visual hierarchy or organization to sort each section- instead of grouping some of them with the same name together, they are displayed individually which adds to the congestion of the app. For example, Common Words I-VI could have been grouped under one tab called "Common Words" and could have a mini menu to choose from the different sections of common words. This is the case for the other "Basic" and "Advanced" tabs too, a retractable category hierarchy for these would have worked better.
I also believe the "Fill in the Blanks" tab should be under an entirely different feature of the app called "Quiz" or a separate "Test" or "Practice" section where you can practice and test your knowledge of the words.
Fig 1.1 Common Words
Fig 1.2 Basic Words
This leads me to the next biggest fault of the app, which is that it doesn't have a navigation bar. All apps generally should include one since it is an easy and straightforward way to get around an app and its features, however, this app throws most of its content and MVP on one single page, while the rest are hidden in the hamburger menu; which is hard to access since it is cramped in the corner of the screen and it is too small, you have to click multiple times to bring open the side menu.
Fig 1.4 Hamburger Menu
The side menu essentially acts as the navigation bar for the app since it lacks one, "study" being the main homepage, "about magoosh" detailing the company behind the app, "login" to log into an account for the app, and "settings" allowing the user to adjust specific settings for the app.
Fig 1.5 Side Menu
As stated in the beginning before, an account should not be necessary to use the app and save progress, so a login page would not be necessary either.
Fig 1.6 Login Page
The "about magoosh" page is also unnecessary- it is more about information of the company itself rather than the app or its features and thus serves no purpose being there as most users will not use it.
Fig 1.7 About Magoosh
Fig 1.8 Settings
When using the main feature of the app to learn words, the UI again seems too cramped and does not utilise space properly and take advantage of it when necessary- its all squished to the top of the page which gives a tight and cramped feeling yet again- the "Back" button is also suffering from the same problem of the hamburger menu from before where it is too small and hard to access since it is cramped in the corner of the screen and it is too small, requiring you to click multiple times before finally being led back to the page.
The text "Back" is also unnecessary as the < symbol already indicates that to the user, and it is adding onto the cramped feeling since its too close to the time on the display. The text "Common Words I" is also not properly center aligned to the page which makes it visually disharmonious with other text which is properly center aligned to the page.
I also feel as though there is also a better way to design the entire UI of this page; right now it is very simple and plain- minimalistic designs can be good, but they must also be engaging and interesting enough to retain interest and attention from the user to stay to use to app, I don't think it is the case here, as the design is very monotonous, and there are already quite a few flaws that have been pointed out which seem to be consistent design flaws within the entire app.
Fig 1.9 Flashcard
There are 3 progress bars at the bottom- they are to keep track of your progress via categories; "mastered" "reviewing" and learning". When first encountering a new word, it is not yet in any of the mastered, reviewing, or learning categories, to reveal the meaning, the user must click on "Tap to see meaning" for the flashcard to reveal the word meaning- this is a mechanic I think is useful and will keep in the redesign since it helps the user to remember words and doesn't spoon-feed the answer.
When you encounter this new word, your options are to click the option indicating you know the word "I knew this word" or clicking the option indicating you don't know the word "I didn't know this word". If you click the former option, then it's a word that you already know without having studied it before, and so it's already mastered. If you click the latter option, then you're unfamiliar with the word and are now learning it, and so it goes into the learning category.
The word is now in either the mastered or learning category, which adds up to their respective progress bars.
If the word comes up again and is learning and you indicate that you don't know the word, then you still haven't learned it and it stays in the learning category. If you instead indicate that you know this word currently in the learning category, it moves to the reviewing category. It's a word you now know, but is yet to be mastered. This word then starts with a score of 0 in the reviewing category, in which it will move to mastered if it attains a score of +3 or will move back down to learning if it attains a score of -1. Indicating that you know a word in the reviewing category gives +1 points, and indicating that you don't know it gives -1 points, in which these points accumulate towards the score.
If the word comes up again and is mastered and you indicate that you know the word, it stays in mastered. If you click and indicate that you don't know the word that is in the mastered category, it moves to the reviewing category with a starting score of 0.
Although these progress bars are useful practically, they don’t stand out. The bars are too small and blend into the background, making it less efficient for users to interpret their progress at a glance.
Also, with the two options ""I knew this word" and "I didn't know this word", the text for both is quite small and thin, so the readability suffers, and the biggest issue is that both texts utilise the same colour of the box they are in, but just darker, however, this makes it hard to distinguish from the background and not as clear as they should be. These options should also be further apart from each other, as because they are so close now, it can be easy to miss-click an option you didn't mean to which adds negatively to the user experience since this also in turn affects their scoring in the progress bar with inaccurate instances.
I noticed that the flashcards keep going indefinitely even if you have mastered all the words. I asked my friend about this feature since I wondered if it really helped since there may be no sense of completion, but they exclaimed that it is a nice mechanic since they can decide when they're "complete"- they can keep going back to the cards since all of the words will show up more than once, so it helps with memory retention. With that in mind, I decided to keep the indefinite feature as well since it seems
Another neat feature is the ability to click on the sound button to hear how the word is pronounced, however, the sound icon is just too small and even I did not notice it at first since it was not immediately obvious due to the colour not standing out enough in contrast to the background, and the size of the icon.
Fig 2.0 Options
A frustrating part of the main mechanic of the app is the self-insert of this company when learning words. The reason it goes from 0-51 words is due to this, which is annoying since these words only serve to promote the company but not aid in the main purpose of the app which is to help memorise and practice words for the GRE.
Fig 2.1 Company Self Insert 1
As mentioned before, there are practice questions- however it is only for the common words section. There should be more question variety, such as multiple choice with definitions (not just fill in the blank multiple choice), given definition and asked to provide the word, or true/false questions. Furthermore, the answers are not labelled as abcd- this seems like a small detail, but can add to the clarity and separation of each answer distinguishing it from each other, especially because the answers are in the same box as the question. I think they should be separated visually in design, perhaps having each answer in its own box, or either labelled in abcd, it also helps since the real GRE also utilizes the abcd format and can help students familiarise themselves with the test format more.
Lastly, the UI here repeats the same mistakes throughout the app as well, it is not well designed, it is cramped to the top, and the title of the tab/section is truncated because of the long title and how cramped everythis is.
Overall, the screen is somewhat plain, with very little distinction between important elements. The use of a uniform font size and style for both the prompt and the answer choices doesn’t guide the user’s attention well. Other than this, the purple background and white text is also quite visually dull, and there’s a lack of variation in colors to separate sections. The design feels flat and uninspiring, which could make it harder for the user to stay engaged.
Fig 2.3 Practice Question
When clicking on an answer, it shows whether you are incorrect or correct at the top, but only the text colour changes, and the text is small. It does not provide sufficient visual feedback to effectively capture the user’s attention since they are only miniscule changes which can make it less immediately obvious to the user and it easier to miss whether the answer was correct or incorrect. The lack of clear, immediate feedback could leave users feeling confused or uncertain about their progress, especially in a learning environment where clarity is crucial.
Fig 2.4 Correct Page
My friend expressed a feature that they wished the app had, which was the ability to access vocab words outside of the flashcard decks. Right now, it is inconvenient and a hassle for the user since they have to keep flipping through the deck until they reach the word they are thinking of and want to review. To solve this, a word database could be created, where the user can search for the word manually, and it brings them to that specific word flashcard.
Another crucial feature that this app needs is the ability to create custom words and custom decks. As of right now, it does not have that customizability, which decreases the personalization of this app for the user using it.
After reviewing all the pros and cons of the app and critically analysing it, here are the main takeaways and elements to focus on for the redesign:
- Removal of unnecessary elements/features such as the mandatory account creation, "about magoosh" page + self inserts of the company in flashcards, and "back" text.
- Fix the UI of the app and work on the lacking visual hierarchy, spacing, and aesthetic appeal. Grouping sections and properly positioning, resizing, and recolouring elements of icons, boxes, text, etc will improve the visual aesthetic and organization.
- Add a bottom navigation bar to streamline navigation, and make using the app and its features more accessible.
- Add word/deck creation to enhance personalization of learning.
- Add a vocab word search functionality for quick access to certain specific flashcards users want to review.
- Add Quiz/Test feature and offer more types of practice questions—like true/false or multiple-choice with definitions as they align better with GRE formats and help users learn more effectively.
With all this in mind, I then created a figma prototype including these features along with the updated ui and functionality of the app to refer to and act as a guide and proposal for my project.
GRE Vocabulary Flashcards Prototype
REFLECTION
This project offered an opportunity to critically analyze and improve upon an existing application. I first thought of potentially doing the application I selected last semester, but i decided to go with "GRE Vocabulary Flashcards," instead as I liked the idea of working on something new, and integrating new ideas and features to an app that was lacking in many areas to create a more user-friendly and aesthetically pleasing design. By identifying key pain points, I was able to propose meaningful changes that align with user needs and even additional features like a custom deck creation and word search.
Once again my understanding of how thoughtful UI/UX design is was really highlighted, I think i learn more about that with each project, as it can really transform an app from great to bad, and when its really good, it can turn into a more engaging and efficient tool for its target audience.
Comments
Post a Comment