top of page

ACE IT

Education app for exam preparation

Case Study

ACE IT is an end-to-end mobile application that helps users effectively prepare for a test. It creates study blocks and practice tests from user notes and other sources. In addition, ACE IT uniquely aims to give learners a deeper understanding of topics so they feel equipped to ace their test.

ACE IT Mockup Screen
ACE IT Mockup Screen
ACE IT Mockup Screen
ACE IT Mockup Screen
PROJECT TYPE

Case study

DELIVERABLE

End-to-end mobile application

AUDIENCE

Exam-bound learners

TOOLS

Figma, Zoom

TIME

80 hours

ROLE

UX Designer

THE PROBLEM

Scholars and experts agree that just taking notes and rereading them isn't effective for long-term memory when studying for exams. Many popular study apps use flashcards, which rely on short-term memorization. This leads to learners struggling to prepare effectively for exams because they lack creative and impactful study methods that promote understanding and retention.

This project aims to understand exam preparation struggles, gather learner needs, and develop a mobile app with impactful study methods for improved retention and learning.

RESEARCH

I started by looking at 3 well-known study apps that are powered by new AI features. By defining their key product features, differences and AI capabilities, I aimed to get better informed about potential gaps in the available AI features out there, as well as any common pain points. I then interviewed 6 people between 20 to 44 years old who had experienced preparing for a test in the last 12 months. Questions were focused on things like their preferred study methods and how well they worked (or didn't).

edapp logo.png
CHARACTERISTICS
  • Mobile learning platform

  • Gamified activities (leaderboards, awards...)

  • AI features: teacher's course builder, adaptive quizzes, adaptive spaced repetition exercises

STRENGHTS/WEAKNESSES
  • Actively engaging tasks and social aspects
  • But AI features don't always work properly and need improvement (for ex, nonsensical questions)
  • Business subscription focus
Mask group.png
CHARACTERISTICS
  • Community platform
  • Turns user-created study sets into flashcards and questions
  • AI features: summarize notes, generate practice essay questions
STRENGHTS/WEAKNESSES
  • Plans to introduce more dynamic AI features, even with current inaccuracies

  • Reliance on flashcards (limits active engagement)

  • Can leverage popularity alongside growth - active methods, social learning etc.

knowt logo.png
CHARACTERISTICS
  • ​Converts imported notes into flashcards and quizzes

  • Pre-loaded AP exam study guides

  • AI features: summarize notes, generate practice essay questions

STRENGHTS/WEAKNESSES
  • A flashcard foundation but tries to create engagement (Q&A, fill-in-the-gap...)

  • AI limitations like nonsensical questions

  • Library could grow far beyond just AP

Interview analysis.png

INTERESTING INSIGHT

50% of interview participants highlighted a distinction between exam content and exam demands.

 

Ideally, exams should accurately and fairly assess proficiency. However, candidates often lose marks due to test constraints, like missing keywords or formatting essays incorrectly based on grading criteria. These hurdles result in lost marks.

 

Therefore, interviewees stress the importance of understanding test expectations to ensure deserving marks are given.

RESEARCH TAKEAWAYS

  • Flashcards as a study method are OUT; spaced repetition and practice questions are IN.​

  • The effectiveness of AI depends on the breadth of its knowledge, highlighting the importance of providing sufficient feedback to enhance its accuracy.

  • Serious learners desire a thorough grasp of exam content and requirements, suggesting that integrating feedback features into the app could be advantageous for enhancing knowledge and comprehension.

MEET BRIAN

AGE
OCCUPATION
LOCATION
INCOME

25

Junior IT Assistant

Vancouver, Canada

$48,000

Brian works as a Junior IT Assistant for a local Vancouver company but is keen to continue his career in the cybersecurity field. He recently enrolled in some part-time online classes at a local college and attends after work.

These classes are important to Brian because he really wants to advance his knowledge on cybersecurity topics in preparation for his future career. However, to pass the classes, Brian needs to take a few tests. Naturally, he gets pretty busy nowadays as he tries to juggle work, study and everyday life.

He’s looking for a time-saving app that will help him confidently prepare for the upcoming tests, pass with flying colors, and learn valuable knowledge along the way that he can take into his future career.

busy bee

forward thinker

knowledge seeker

Group 67.png
GOALS, NEEDS & WANTS
  • a solid understanding of topics

  • automation that saves time

  • actively engaging study methods

  • spaced repetition or study blocks

  • sharing resources (preferred)

FRUSTRATIONS
  • flashcard learning

  • not receiving explanations for incorrect answers

  • having to learn specific tricks and keywords for exams

Mask group.png
knowt logo.png

FURTHER ANALYSIS

Despite having gained some insights, the lack of a narrowed focus and a well-defined problem made it difficult for me to generate compelling innovative solutions. Therefore, I conducted additional analysis by phrasing 'Point of View' statements based on the persona of Brian, followed by some 'How Might We' questions to produce a more refined framework for idea generation. After this exercise, I then had two unique How Might We questions that I would use to help solve Brian's biggest problems.

POVs and HMWs.png

MOVING FORWARD, THIS PROJECT AIMS TO...

  • Create a revision app that involves active learning and practice.​

  • Ensure users get a deep grasp of topics and exam requirements, and have a chance to practice them.​

  • Use AI to help users like Brian save time, get varied exercises and enhance their understanding.

IDEATION

I brainstormed solutions for Brian's main issues, guided by key 'How Might We' questions and the influence of artificial intelligence. This led to the emergence of two distinct product features: a study mode for interactive revision exercises and an exam mode to educate users on exam requirements, both enhanced by AI for deeper understanding.

STUDY MODE

- Brian swaps flashcards for diverse and engaging study exercises.

Simple flashcards are not in-depth enough for Brian to sufficiently learn the material and feel confident applying his knowledge on test day. Therefore, Brian needs more engaging and more complex study methods that help him properly understand topics.

Storyboard 1.png
Storyboard 2.png
EXAM MODE

- Test-centric app features that allow Brian to practice realistic mock exams, see test day tips and tricks, and get detailed explanations for incorrect answers. 

Brian needs exposure to real test questions to understand the test's expectations, including required keywords and formatting tips, to avoid unnecessary mark loss due to misunderstanding question requirements.

PRODUCT ROADMAP

USER FLOW 1: GET STARTED WITH AN EXAM

This flow guides users through adding their first test in three optional steps: entering the test name, uploading notes, and selecting textbooks. Users can skip these steps and explore the app, which will remain empty until a test is added.

Get started flow.png
USER FLOW 2: COMPLETE A STUDY BLOCK

The study section of the app includes AI generated study blocks, each featuring a diverse compilation of study exercises such as fill-in-the-gap questions, knowledge "dumps", recall exercises and more. After each exercise, the user gets immediate feedback before proceeding to the next exercise in the study block, until all exercises are completed.

study flow.png
USER FLOW 3: PRACTICE WITH MOCK EXAM QUESTIONS

Users choose a mock test, start it with a countdown timer, answer questions, and can review their performance, including incorrect answers and explanations after the test. Completed tests are saved for later review if the user skips the post-test review part.

test flow.png

WHY ARE COMMUNITY FEATURES NOT A PRIORITY?

Some interview participants expressed a preference for collaborative learning, whether through community involvement or expert tutoring. However, upon analysis, it became evident that community features weren't essential to addressing Brian's needs.

 

Focusing on a minimum viable product, AI-generated study blocks and practice materials offer sufficient understanding and feedback. Hence, the decision was made to forego community integration initially. Nonetheless, recognizing the significance of community learning, it remains a potential future feature to be considered.

WIREFRAMING & TESTING

TEST SETUP

I incorporated a feature allowing users to supplement AI-generated content with information from their own notes and textbooks, ensuring more reliable and comprehensive content generation for realistic mock tests and diverse test preparation scenarios. For their first time using the app, users could add notes and textbooks during the initial setup screens.

I initially presented users with two ways to upload notes in a single step: taking photos for the app to scan and interpreting pre-taken photos. Based on peer feedback, however, I divided these steps into two screens for better clarity on the different options available.

 

Usability testing revealed continued confusion, prompting further improvements. I added more screens to introduce options, reorganized content for a logical process, included icons, simplified buttons to "back" and "next," and color-coded and labeled steps for better navigation.

Test Mode.png
USER DASHBOARD & SEARCH

In early versions, the dashboard included various components organized by importance and frequency of use. However, in higher fidelity versions, I streamlined the design by removing clutter and redundancy. This involved eliminating quick links to study and test modes, condensing the search bar into an expandable information tool serving more purposes, and adopting a horizontal scroll layout for recommended activities. Test tips were also relocated to the Test Mode section for better organization. 

 

In response to feedback from usability testing, I modified some of the dashboard elements to prioritize recent improvement over general activity history, as suggested by users.

Dashboard and Search.png
STUDY MODE

The study section features spaced repetition study blocks, with pre-testing wireframes a simpler answer and evaluation structure, with a countdown timer and AI feedback on answer relevance, content coverage, and improvement suggestions. Users can highlight feedback for a deeper understanding and refer back to relevant study notes.

Based on usability test feedback, I improved the answer evaluation screens by adding more detailed feedback in separate pop-ups and changing the study mode timer to an upward counter for a less pressured experience.

Study Mode.png
TEST MODE

In test mode, users complete mock tests with a countdown timer and progress bar for realistic conditions and to help them manage their time. In higher fidelity mockups, test tips were relocated from the dashboard to the test mode section.

 

Following user feedback, I boosted the visibility of actions and exam tips, enhancing hierarchy and achieving a cleaner look. Users can now easily access and benefit from exam tips, thanks to the improved secondary color palette. Additional refinements, like consistent active states for tabs and buttons and full-width popups, were implemented here - as well as other screens - for a cohesive user experience.

Test Mode.png
REVIEW TEST RESULTS

Research showed that learners benefit from understanding their incorrect answers, so the test review screens show a results overview as well as more specific explanations for each answer. Initially, users received simplistic feedback confirming the correct answer in conjunction with a supporting explanation. Usability test feedback prompted the inclusion of more detailed explanations and additional test tips.

 

Furthermore, the overview page included performance by topic within the test, however, to match its removal from the dashboard and to ensure compatibility with all kinds of tests, it was removed after testing.

Test Review.png

BRANDING & UI

The design aimed for a sleek, focused, and engaging UI with important activities and buttons highlighted by vibrant colours. This was based on the concept of the bright highlighters, sticky notes, flashcards and other stationery commonly used when studying for an exam.

UI Kit.png
VALUES

Charisma: The app engages the user, injecting colour and fun into learning to keep things engaging.

Insight: Branding should reflect the goal for knowledge and understanding. 

Focus: Branding should encourage users to stay focused, keeping in mind a typical learner might be studying on their work commute or late in the evening. The visual design should offer simplicity and elegance.

TYPE

I selected the Rubik typeface for its contemporary look and excellent readability, especially important on a dark theme. Its clean lines and balanced proportions convey professionalism, while its geometric shapes align with the structured approach needed for effective studying.

SECONDARY COLOURS

Secondary colour palette. Inspired by the bright colours often found in study stationery like highlighters, flashcards and sticky notes. These will help engage the user by pulling focus to important activities and tips.​ 

Neutrals. A dark background with off-blacks and greys to keep users focused during study and testing sessions, preventing distractions.​

BRAND COLOUR

Bluish purple is the chosen brand color for its calm, creative, and modern-professional appeal. Unlike red, which can be perceived as a warning, and turquoise, which may have accessibility issues, bluish purple strikes a balance. It suits users like Brian, fostering focus amid daily responsibilities and distractions.

Group 851.png
APP NAME

EdTech naming research highlights a preference for short, memorable names tied to the product or USP, often using misspellings or combinations. Considering Brian's need for simplicity, names like Zaam, KnoBoost, and Flunk were shortlisted. Initially, 'Ace' was chosen for its fitting connotations of excellence and exam success. However, due to its commonality, it evolved into 'ACE IT.

Name 2.png
Name 2.png
LOGO

Symbol sketches included trophies, medals, brains, rockets, and upward arrows to convey progress. Options were narrowed down to the concept of a circled letter 'A' - a nod to a student receiving a grade A for excellent performance on a test. This fit well with the name 'ACE IT' as it also starts with the letter A. Out of these final options pictured on the right, I chose the centre one as it best fit the concept.

Logo sketches.png
New Ace logo.png
Light Bulb.png

VISUAL DESIGN ITERATIONS

Following the feedback from usability tests, I adjusted the color scheme. Some participants found the hot pink too harsh, expressing concerns about its impact on the eyes. To address this, I softened the colours and replaced the harsh pink to create a more harmonious and welcoming appearance, still keeping the original concept of colourful and engaging stationery in mind.

Secondary Colour Palette Iterations.png

WELCOME TO ACE IT

ACE IT is a mobile education app tailored for test takers seeking effective study methods.

 

Powered by AI, it promotes deep understanding of test content, identified as a user priority in research. The app automates dynamic study exercises, saving users valuable time.

SET UP THE FIRST TEST AS A NEW USER

Users initiate the app through a setup process, offering details about their upcoming test. Additionally, they have the option to enhance AI accuracy by adding photos of their notes or textbooks, providing valuable supplementary material for realistic study tools.

Name Test.png
ACE IT Mockup Screen
ACE IT Mockup Screen
ACE IT Mockup Screen
STUDY IN CHUNKS DESIGNED FOR ENGAGED LEARNING

AI-generated study blocks are designed for optimal learning in spaced repetition sessions of 15-40 minutes, a proven and preferred method for effective test preparation. Within these sessions, users actively engage with diverse exercises, learning from their mistakes through detailed feedback and test tips provided by the app.

GET EXAM EXPOSURE WITH REALISTIC AND GRADED MOCK TESTS

Users have the opportunity to practice realistic test questions through timed full-length tests (and mini tests for those with time constraints). This helps them familiarize themselves with test requirements, such as format and timings, which was identified as crucial during user interviews.After completing a test, the app marks it, allowing users to track their improvement. In the post-test performance review, users can delve into their results, including individual answers, to gain insights into any incorrect responses.

ACE IT Mockup Screen
ACE IT Mockup Screen
Dashboard 1.png
Search 2.png
MONITOR PROGRESS ON THE DASHBOARD AND SMART SEARCH

The dashboard provides test takers with recent test results, aiding them in monitoring their improvement. Suggested activities adapt and learn from the user's progress, recommending the most beneficial activities for better results. Additionally, a smart search feature enables users to ask questions about their progress and create dynamic study sessions for effective test preparation.

REFLECTIONS

As I delved into the architectural and wireframing processes, I realized that the possibilities and decisions were endless, leading to numerous questions about user preferences.  "Would users want a separate section for test tips?" "What will users want on the dashboard?" 

In hindsight, something that would have made this easier is awarding more time to research, testing, and iterations, which I realize (even more) now is essential for new products without an existing architecture.

Therefore, doing this project again I would streamline the initial wireframing stage or simplify the prototype to allocate more time for gathering valuable user insights. In other words, I'd get to know typical user Brian even better, so I could feel more confident about making the best decisions for him.

OTHER PROJECTS

AMTRAK SEARCH REDESIGN
New Macbook Pro Mockup Front View.png
iPhone 12 Pro Mockup Front View (3).png
NETFLIX SOCIAL
iPhone 12 Pro Mockup Front View-1.png
iPhone 12 Pro Mockup Front View.png
iPhone 12 Pro Mockup Front View-2.png
bottom of page