This week saw a lot of prototyping work done within Figma to create accordian menus as well as a new quiz component created.

Accordion Menu

An accordion menu was created using several tools within Figma including auto-layout, components, and variants. These features helped to create a web of prototypes that create a function menu for users to select which module they would like to jump to. Final product is pictured below.

Prototyping

Additional prototyping was completed to connect the other course pages within figma and features a new horizontal scrolling list of various items needed for the course.

Quiz Component

Newly added this week was the quiz component of the course. Each module will feature a quiz after completing all submodules before the user can advance to the next module. Users will the opportunity to earn badges as they complete modules/quizzes.

Within the quiz itself, users can view which choice they are selecting via a hover state change from light pink to peach color. The state change also includes a prototyped enlargement of the button and text size change for accessibility purposes.

A total of five questions for Module 1 were fully prototyped with functioning selections and error states for incorrect choices. Still left to complete would be the badge component and scoring function.

Punch list for next week

I aim to continue user testing the app to test my changes. Also I would like to finish revamping the overall main app screens that I haven't created yet within figma from last summer. These would be the screens the user would see upon opening the app. Still a work in progress is my coding my capstone page.