My Role

UX Designer

Graphic Designer

Tools

Figma

FigJam

Overview

MarkUp: Your personalized study assistant. Enhance your learning

experience with tools to mark key content, generate tailored quizzes,

and create concise summaries. With a customizable color-coded system,

MarkUp makes studying efficient and engaging.

MarkUp: Your personalized study assistant.

Enhance your learning experience with tools to

ark key content, generate tailored quizzes, and

create concise summaries. With a customizable

color-coded system, MarkUp makes studying

efficient and engaging.

MarkUp: Your personalized study assistant. Enhance your learning experience with tools to mark key content, generate tailored quizzes, and create concise summaries. With a customizable color-coded system, MarkUp makes studying efficient and engaging.

Objective:

Design an AI-powered study tool to help students streamline their study process. The app provides customizable content markup, auto-generated quizzes, and AI-powered summaries to make studying more effective and personalized.


User Research:
Our user research focused on identifying the challenges students face during studying and uncovering opportunities for improvement. We combined qualitative and quantitative methods, including interviews and surveys, to gather insights into their study habits, pain points, and preferences.

Key themes emerged, such as the importance of customizable tools, efficient content summarization, and interactive features like quizzes for self-assessment. These insights directly informed the design decisions, ensuring the app meets the diverse needs of its users.

Concepts & Sketching
Based on the insights gathered during the research phase, we created initial sketches and wireframes to define the app's structure and functionality. These sketches served as the foundation for exploring ideas and refining the user flow. The wireframes focused on the core features, providing a solid framework for building an intuitive and user-friendly experience.

High-Fidelity Prototypes

Using the initial wireframes as a guide, we developed high-fidelity prototypes to bring the app’s design to life. These prototypes focused on translating the core structure into a polished and visually engaging interface. Key features, such as customizable highlighting, summarization, and quiz generation, were
designed with attention to detail to ensure they felt intuitive and functional.

The high-fidelity prototypes incorporated branding elements, clean typography, and refined layouts, offering a near-complete representation of the final product. This stage provided a realistic look and feel, enabling meaningful user feedback and validation of the design.

Clickable Prototype

To validate the design and ensure a seamless user experience, we created an interactive, clickable prototype. This prototype allowed users to navigate through the app's core features, such as uploading study materials, customizing highlights, and generating quizzes.

By simulating real interactions, the prototype enabled us to test user workflows and gather valuable feedback. Insights from usability testing helped refine the navigation flow, improve feature discoverability, and ensure the app met user expectations before development.

© 2024 Abdulaziz Alsaeed