When faced with a challenge of organizing up to 10 choices into an intuitive interface for elementary students I jumped at the chance to not only reduce the intimidation so many choices could bring but also make it an enjoyable experience that elementary students would want to interact with. For this project, I facilitated brainstorming sessions, lead communication and design process, created the approved design and oversaw production of required assets.
Skills: Project Management, UX Strategy, Prototyping, UI Design
The challenge
Create an inviting experience for elementary students to choose the order they will interact with activities. Users would be presented with up to 10 choices, all visible while also showing progress through those options. Also, some activities needed to be completed before others could be accessed.
The idea
Based on feedback from users, we’ve learned that we need to indicate how many activities a student needs to complete to finish a level. Previously, activities have been sorted into parts leaving students wondering if they lost all of their work when progressing to a new section. So, how do we organize the activities to not be overwhelming, but gate keep activities to be completed in an order when needed? After competitor and industry research and small group brainstorming sessions, paths arose as the most straight forward solution to explore!
Skills: User Research, Competitive Research, Brainstorm session leadership
Tools: Figjam Boards
Design Process
With the idea of paths a go, we consulted with curriculum writers to ensure paths met content needs and obtained a list of requirements for information that needed to be displayed in the user interface.
With list in hand and previous user feedback ready, the challenge became designing a UI that displayed:
- separate paths
- number of activities in each path
- progress through the current activity
- progress through each of the paths
- active, inactive and completed path states
Working in Figma with an already established UI style library, I explored options to display this long list of information in a way that was clear, and not overwhelming to the user.
Skills: UX/UI Design
Tools: Microsoft Copilot for color exploration and catchy path names, Figma design and library, Confluence and Jira for specs and tickets.
The result
After cross functional reviews, we landed on a final design to be implemented including:
- Paths represented by color and iconography (including locked and completed path states)
- Number of activities on a path represented through 3 circle states (completed, active and inactive)
- Activity Name inset linked to active activity circle
- Bar meter to indicate progress through the active activity
Skills: Review session leadership, visual spec creation
Tools: Figjam for team review, Figma for spec creation