Revision Dojo

Timeline: April 2023

Platform: Mobile & Web

Role: UI/UX Designer

Introduction

Revision Dojo Project - Flashcard Section

In order to improve my skills as a UI/UX Designer I joined the 'Revision Dojo' Team. Revision dojo is a platform designed to help students with free resources for their upcoming IB/GCSE exams. This platform houses past papers, question banks, model personal statements, AI generated questions and will be introducing a flashcard section which is what I was assigned to work on.

My Role

As a UI/UX designer I was given the 'Flashcards' section of the website to work on. I was provided a design system to reference and some rough wireframe/sketches to use to guide my designs.

Design System

This was the design system in place for the website. It included the color schemes and some rules regarding use and application of components.

Landing Page

Landing Page Wireframe

The requirement was an appealing page that allows users to either browse their library of flashcards/community flashcards or create their own as well as listing down some of the feature of the service.

Landing Page Design (Desktop)

For the Hi-Fi version I included some screenshots to show off the service and decided upon an 'Aurora' background for the landing page.

Landing Page Design (Mobile)

Similarly to the desktop variant, I simply scaled it down for the mobile one and included the mobile screenshots instead.

Community Library

Community Library Wireframe

Amongst the requirements were a filter and some tiles for the flashcard sets in display.

Community Library Design (Desktop)

For the design it was kept minimal as per the requirements and just displayed the flashcard sets with their title and the user who created them.

Community Library Design (Mobile)

For the mobile version I had designed two versions depending on the preference of the tech team for which would be implemented. The left one uses simple pills for the filter while the right uses a modal pop up. The left one was chosen for ease of implementation and use.

My Flashcards Set

My Flashcards Set Wireframe

The requirements for this one outlined a very simple list of tiles for the users' flash card sets which they created.

My Flashcards Set Design (Desktop)

As per the requirements, this page was kept very minimal simply displaying the flashcard set tiles and the option to create a new one.

My Flashcards Set Design (Desktop)

This screen displays the pop up when the user clicks to create a new flashcard set. The name, description and tags were the three outlined requirements.

My Flashcards Set Design (Mobile)

As shown in the desktop variants the mobile version is the same and simply scaled down.

My Flashcards

My Flashcards Wireframe

This page similar to the one before it is made up of flashcard set tiles but this page displays all the users' saved flashcard set whether created by them or saved from the community library.

My Flashcards Design (Desktop)

As per the only requirement this page simply houses all the flashcard tiles with their title.

My Flashcards Design (Mobile)

Similar layout and scaled down for mobile screens.

Flashcard Display Page

Flashcard Display Page - Wireframe

The requirements here involved an enlarged flashcard and a space to write an answer/give feedback.

Flashcard Display Page - Design (Desktop)

The design here displayed the flashcard with an option to further enlarge and navigate to the next/previous flashcards.

Flashcard Display Page - Design (Desktop)

This design shows the alternate version where the flashcard is simply to test how familiar you are with the content and not provide an answer.

Flashcard Display Page - Design (Mobile)

These are the two mobile variants for both the typed answer and confidence rating screens.

Set Management Page

Set Management Page - Wireframe

This page involves managing the users created flashcard sets. The requirements outlined an AI generated field, a notes import field and the ability to edit the front and back of a flashcard.

Set Management Page - Design (Desktop)

Within this design the empty flashcards are shown and the user can input/upload the content necessary and also flip the card to edit the back side.

Set Management Page - Design (Desktop)

This was the previous design which was changed to the one above because it was too cluttered.

Set Management Page - Design (Mobile)

The same page scaled down for mobile.

Future Steps

1 / User Feedback

As the site will leave beta soon and more users will start using the site we will receive more feedback on how to adjust, improve and iterate on the designs.

2 / Further Iterations

Once more user feedback is received and I'm able to understand the user journey further, the designs will be adjusted per the users feedback.

3 / Work on new sections

At the moment I've only been tasked with the flash card section, but once the website starts expanding with more features I will be asked to do other sections as well.