Initial Designs, User Feedback, and Design Decisions
Written by: Andrew Fancett, Ryan Abouchakra, Sally Jo and Young Min Park
Initial Lo-Fidelity Prototypes
After completing our storyboards, we used their contextual situations as a basis for the creation of our initial prototypes. The opening scenario is when the user is reading an online journal/blog/news article and comes across a word which he/she does not know the definition to.
On both iOS and Android, when you highlight a word that you wish to save or study, a contextual menu pops up allowing you to choose or create a list of your choice to place the word into (hypothetical situation is shown on the left from our initial prototype). After having done this, you may continue reading rather than having to opt out and search up the definition before you forget. This is because after moving the word to the Exquisite app, you can easily access it later by opening up the app whenever it is the most convenient for you.
Home Screen — The moment you open the app, you are presented with the home screen. This is where we want all the bulk of the application’s content to be displayed. We want a straight forward, clean interface that is neither cluttered nor overwhelming. The goal is to easily access and learn words that you have added to the lists.
- The elements that the home screen needs are the search bar, customized lists, subscribed lists, a study button, and settings.
Search Box — This is where you can search for words since this application is based off of a dictionary.
- The search box also lets you search for lists with the title of the word you search, and other lists that contain that word.
- Tap (+) button to add the word to one of your lists.
Customized Lists — You can have multiple customized lists or one large list, depending on your needs and how you wish to group the words.
- The list will allow you to make categories to go along with your general list idea. For example: you make a word list labeled “Science” and some of its sub-categories can be “Cognitive science,” “Chemistry,” or “Biology.”
Subscribed Lists — A subscribed list will allow the user to follow other groupings of words that the users of the application have put together themselves.
- These are public lists which means all users can edit and add or delete words.
- These are the secondary feature of the application and thus are not as important so they are displayed under your customized lists.
Study — The study button allows you to test your knowledge and reinforce your understanding of the words added to your customized list.
- There will be quizzes to test your knowledge as well as flashcards to further assist you with learning and expanding your vocabulary.
Settings — This is where the you can access and change your notification options and font adjustments.
As you can see, we had a few hand drawn prototypes running in parallel with our digitalized prototypes. This method also succeeded by revealing to us a wide range of diverse ideas.
After completing our first lo-fi prototype, we moved on to the first user testing phase where we had other classmates try out our application. As stakeholders for this app, it is absolutely crucial to put it in the hands of a user and observe at which parts they struggle and see what parts they enjoy the product. By careful observation and noticing what the user is having difficulty with, we will be able to know exactly what will need to be fixed, added, or perhaps removed altogether. Furthermore, this insight will be useful to us because since we are the developers, we may already have a biased sense of thinking.
Consolidated User Feedback
Based on the testing and evaluations made by fellow Team Puppy Squad, we were able to gather some information like what features the users liked, issues the users had, features that they thought were missing, and suggestions for improvement. The two main features that all the users liked about our app were: the essential, simple and sleek design of the app as well as the flashcards feature for studying.
These were some of the suggestions that were given from our first phase of user testing.
- If there is a login screen, be sure it remembers the credentials so you only need to sign in once (unless you logged out).
- Keep the Search, Study, and Settings all in the top bar, rather than having the Study button at the bottom. This way, the application seems more organized and easy to follow.
- Your personalized list(s) should always show up first followed by your subscribed lists that you choose to follow.
- When you open a list it should bring up a new page that displays your categories if there are categories then you can click those which will open a new page. When your list or category is opened the words should all be displayed in alphabetical order and clicking on a word will give the definition.
- Make sure there is an easy way to tell when your lists are updated with words you add with some sort of highlight or icon to know that the list has been edited. This should also apply to the lists that you follow as well.
- When the application posts notifications to your lock screen of random words from your list, make sure there is the ability to change the frequency at which it occurs the number of words that can be displayed, and an option to completely turn it off.
Design Decisions
After reviewing the insightful critiques that our users from Team Puppy Squad gave us, our next step was to go through Jakob Nielsen’s 10 Heuristics for User Interface Design. These broad guidelines served as a helpful tool to figure out what key features were missing and/or necessary that we have to make sure to fulfill in our finalized design.
First, our team members went over the list of heuristics individually and critiqued our initial prototype. Then as a group, we ordered the 10 heuristics in order of importance relative to our vocabulary app. We thought the most important was “Aesthetic and Minimalist Design” because our app strives for simplicity- it does one thing and does it well! The clean layout was what our users liked as well. So in our revised prototype, we decided to keep the minimalist design and only include the key features and icons on the home screen that we thought were necessary and important.
Below is a list of the remaining 9 heuristics with a few of our modified design decisions for each of them:
- Flexibility and Efficiency of Use: We decided to dock a Search bar at the top of the home screen because it will be a frequently used navigation tool for looking up words in the users’ lists or in the dictionary.
- User Control and Freedom: We included a login page in the beginning and realized that we needed to include a logout option as well. Also, we found that many users think it is would be a hassle to have to create an account to access the app, so we decided to offer the option of proceeding without logging in.
- Recognition rather than Recall: It would save the user time if he/she was typing a word into the Search bar and the Search feature was able to begin extracting the words from the user’s list that contains the letters that are being typed in by the user. In this manner, like how many Search features operate, the user will be able to quickly recognize the word they are looking for and can easily tap it for the definition.
- Consistency and Standards: Because some of our users were confused about the folders and sub-folders, we decided to follow platform conventions so that this would be clear. We decided to keep a Recently Added folder which would store the most recently added words and our Add/+ icon would function in allowing the user to generate a new list.
- Match Between System and the Real World: Our app should ideally mimic the structure, functions, affordances, etc. of a real world physical vocabulary list.
- Visibility of System Status: One feature we decided to incorporate was the use of badges to let the user know how many new words he/she added that day when opening the app.
- Help and Documentation: We will be including a Help feature within Settings to give an overview on how to navigate our app. A brief tutorial may be useful too.
- Help users Recognize, Diagnose, and Recover from Errors: A critical feature we should have is an alert message for when the user decides to delete a folder of words. This may be an accident and asking the user to confirm would be beneficial.
- Error Prevention: We have this at the bottom of the list because we think by addressing all the key features listed above, that should help prevent a problem from occurring in the first place. We noted that clear spacing and signaling of the buttons are important to prevent ‘mis-clicks’ and other errors related to navigation.
Final Low-Fi Iteration
This is our main home screen of the application. We collected the data from our user testing and also used our heuristics mentioned above to decide on these features. We really focused on getting our application clean and simple: minimal as possible because that is the core of our application’s strength. People really preferred its clean look and wanted it to be that way.
From our user testing, it was mentioned that they wanted to know what this application entails so we added a little slogan in the sign up page. Also, gave an option to sign up with different emails since not everyone has Facebook or google. You also have an option to continue without an account.
From one of our heuristics, it is mentioned that having the user be aware of what they are doing and where they are currently essential, so we implemented a highlight on home-page to let them know the home tab is where they are at.
We also included options that prevent you from making errors. Such as warning sign and a help page in setting which you can look and see what to do and what not to do: also including Frequently Asked Questions section. As our user tester mentioned, if there is a log in/sign up button, there should be a sign out button so we included that in our setting page.
There were mixed reviews of having notification alert to remind users to study vocabulary, but we decided that this function should remain and users have the flexibility to turn it on or off. They also have the freedom of customizing how often they want to be reminded.
Our testers loved the flashcards function integrated within the application. This way they can easily gather the vocab to their customized list and study right away with flashcards without having to spend time on inputting the words and definition from scratch. Therefore, we kept the study/flashcard.
Furthermore…
After going over our revised prototype with Professor Boyle in class on Monday, we decided to make additional changes and incorporate some new ideas that would make our app more user friendly!
- Our flashcards/study feature will have the option to be blank so that the user can choose to write their own definitions on them. We thought that this customizable option would be a great way to help students study and learn effectively!
- We will add a way so that the user can be tested on the spelling of the word.
- Features like being able to attach photos and voice memos onto the flashcards might also be a useful study tool.
- We will also add the ability to import and export CSV files to/from a Google Drive or Dropbox account.
Well, that wrapped up the design process starting from creating our initial lo-fidelity prototypes and turning that into a more polished version using Balsamiq. With what we learned from performing the heuristic evaluations as well as what we gathered from our user feedback, we will take into creating our final and Exquisite design!
