Independent Study
#UIDesign #InteractionDesign
Prepped is an app that allows students taking the GRE & GMAT to improve their scores through bitesized vocabulary activities.
Prepped
Role
UI Designer
Tools
Figma, FigJam, Proto.io, Notion
Duration
1 week
Studying for the GRE & GMAT isn't exactly quick. or fun.
It requires an enormous amount of time, focus, and dedicated, deep dive study sessions.
What if we could help test takers improve their scores in more manageable study sessions?
Improving vocabulary is one aspect of the test that is most suited for quick study sessions that can drastically improve scores over time.
In this case study, I'll highlight prototypes interactions designed to make quick study sessions clear, rewarding, and effective.
Create a seamless onboarding experience for new users.
Offer well-timed hints to help users study more effectively.
Encourage progress and momentum, and celebrate new achievements.
Building momentum with smooth onboarding.
How might we set first time users up for success, and get them into their first vocab lesson while also providing an immediate sense of progress & momentum?
Click the image to view workspace details.
Outlining Interactions.
Working with an initial set of provided static screens, I outlined the following to have an idea of what interactions needed to be mapped in the prototype.
Key interactions
State changes
Required steps in the onboarding flow
Animations that enhance the clarity of interactions.
Transitions that enhance perceived progression through the screens.
Left to right transitions reinforce familiar human psychological understandings.
Skeleton wireframe loading screen before dashboard.
Transitions under 400ms to keep user attention.
Strategic use of color palette and active states.
Use of active/inactive states on buttons to indicate task status and increase overall user awareness of whats happening on the screen.
Multiple Choice Questions
How can we design quick, effective, & standardized responses to multiple choice questions?
Animations that reinforce awareness of user tasks.
Incorrect selection prompts a “wrong” animation on button, shaking back and forth horizontally, alerting the user that the task is still incomplete/incorrect.
Correct selection prompts “right” animation, a softer and more appealing shake, telling the user that their selection was correct.
Strategic use of states and color palette.
Strategic state changes to the button at the bottom of screen only changes to an active state once a user makes the correct selection on screen alerting them that the current task has been completed.
Designing useful hint interactions.
How can we provide useful, well-timed hints to users on multiple choice questions?
Click image to enlarge sketches.
Sketching potential solutions
Some initial sketches & notes were made in ideating how the hint prompt would appear and what kind of animation would follow.
Initials ideas included having the hint prompt appear after an incorrect user selection with a “shake” animation to attract the user attention and make its presence known.
Click the image to view workspace details.
Planning & User Flow
Another interaction outline was made detailing the required screens and interactions needed for this flow of the hint prompt app.
Well timed hints that enhance the learning experience.
Incorrect user selection prompts hint button near the top of the screen.
Strategic animation to attract the user’s attention.
The hint prompt appears with a visual “shake” each time a user makes an incorrect selection to alert them of the optional hint help.
Rapid feedback to improve quality of hints.
Optional thumbs up/down buttons on the helpfulness of hints that can lead to improvement of the overall learning experience.
Rewarding Progress and keeping the momentum.
Gamified animations that give sense of progression and achievement.
Correct selection triggers an appealing bounce animation on selected button.
Completion of a quiz takes the user back to the dashboard & shows the quiz progress bar fill up and convey a feeling of achievement.
Transitions and animations that inform users of the next task.
Visual “pop” animation that attracts that user’s attention informing them of where they should look next.
Following the quiz completion animation, the screen scrolls down and visually unlocks the next quiz informing the user of the next task.
Next Steps
Improve quality of copy to ensure clarity of instruction for the user.
Add additional gamified animations that appeal to user psychology to persuade user to continue progressing through quizzes.