Product DesigN

K-5 portfolios

My Role
Lead Designer
Timeline
04/23-05/23

Overview

The problem

My clients needed a way to allow K-5 students to create portfolios of their school work. The catch? The feature had to be designed in three weeks and in a way that students with limited reading levels could easily use. In addition, with little development time, I had to use our existing design system (intended for 6-12th graders) for the product.

The solution

I designed a creation flow that enabled K-5 students to showcase their work on their profiles. No typing is necessary to complete the flow, taking into consideration students' education levels. 

Define Phase

As the lead designer, I made sure to map out any overlooked requirements with the product manager, ensuring a deep understanding of the intended user and our client's goal.

In addition, I convinced the product and engineering manager to expand the requirements slightly to design a more elementary-friendly flow than they had originally planned.

Key Requirements:

Ideate Phase

Lo-fidelity

I created a page for portfolio creation with a progress visualization. I initially experimented with a modal for video and picture-taking but discarded the idea due to its complexity. Instead, I used a stepper approach to chunk each step and keep the student-focused.

Once I had gained consensus from the program manager, engineering manager, and CTO that we liked the direction I was taking, I moved into hi-fidelity.

Hi-fidelity

I concentrated on fine-tuning and prototyping the feature to ensure it was not just functional but also engaging and enjoyable for our young users.

portfolio flow
  • My first iteration used a modal to launch a video recorder. I scrapped this idea early on because it was too complex.
  • The second iteration was better. However, buttons were in different places depending on the step the user was on and there were too many buttons in general.
  • The final iteration used buttons outside the video recorder so buttons were always in the same place and reduced the amount of clicks needed to complete the flow.
POrtfolio display
  • Initial iterations used small buttons and the carousel controls felt hard to see. The other profile elements like multiple headlines, profile sharing, and additional tabs were suitable for older grades but not for younger students.
  • I made the buttons bigger and the carousel controls more obvious.
  • I advocated for simplifying the profile in general for K-5 students which you can see in the final iteration.

Evaluate Phase

After multiple rounds of design reviews, it was time for input from the product manager and developers. To streamline the review process, I created videos, providing a walkthrough of the more complex design flows and ensuring alignment with the team's vision. The response was overwhelmingly positive.

With the whole team's approval, we showcased the prototype to our client, who responded with high praise. They embraced the new feature, touting its potential to help students showcase their work on their profiles with pride.

Client response

“We received so much positive feedback from our initial training. We even had several rounds of applause.”

Deliverable

This case study highlights my journey designing a user-centered solution for elementary students, meeting deadlines, and receiving feedback from team and clients. To take a closer look, view file below.

View file
Let’s talk now!

All cartoon images used in this portfolio are from StorySet.