Add Work Redesign
A streamlined way to build your digital identity
Seelio is an educational technology company that offers students a better way to showcase their work via online portfolios. It’s Add Work feature is a critical touchpoint in the student experience and was the next feature, following the student profile redesign, to be updated in a post-beta improvement initiative. Following a complete redesign, Seelio’s Add Work now matches the aesthetic of the student profile, is far more streamlined, and offers students tangible examples to reference at every point of interaction.
Drawing insights from existing behavior
In understanding how students were already adding works on Seelio, we both analyzed insights from the profile redesign, and performed user testing on the current system.
From previous research, we understood that students were acutely aware of the audience to which they were sharing their portfolios and were keen on putting their best foot forward. While expressing a desire to customize their digital identities, students were also looking to peers of similar concentrations for examples on what to add and how to present themselves.
In observing eight users interact with the current system, we discovered that:
- Students were looking for more control over their work
- Adding a work was a very time-intensive task and intimidating task, especially given the current five-step process
- Students were unsure of what was professional enough and what kinds of attachments were appropriate
- “I like looking at how my team member is describing the experience. It’s a good point of reference — usually I’ll change my description a little based on what they wrote.” — Student 2
- “All these different sections are very confusing for me. I don’t know what the difference between ‘Description’ and ‘Contribution’ is.” — Student 6
create & test
Simplifying processes by reducing the intimidation factor
Informed by our user research, we developed three problem statements to reference when creating our prototypes:
- How might we make Add Work less intimidating?
- How might we help students understand what is appropriate and professional?
- How might we make Add Work customizable enough to account for different kinds of works?
We ideated over 80 concepts around these problem statements, of which we consolidated to three sets of paper prototypes.
Using our paper prototypes, we performed both formal and informal user testing with new and existing users. In additional to having students follow a specific set of tasks, we also asked students to verbally discuss how they might be describing their works and where they might be searching for supporting attachments. After each round of testing, we created an affinity wall to draw out high-level themes and to iteratively improve our paper prototypes.
- “These examples remind me of how at the career center, they hand you pamphlets on how to write resume bullets points and stuff. They’re really helpful and it’s nice that they’re digital so I don’t have to look around for them.” — Student 3
To avoid “reinventing the wheel,” we worked with our developers to find photo-editing and wysiwyg plug-ins that would help add customization to Attachments and Descriptions. With an understanding of our technology limitations, I consolidated our prototypes to a single concept, from which I created responsive, hi-fidelity mockups in Adobe Photoshop CS6.
A simplified process with more robust features
The redesign of Add Work simplifies the process from five steps to two and offers students concrete examples and tips along the way. Using an algorithm, we now automatically pull in stellar, relevant work examples in a right panel for the student to reference while building their work in the left panel.
To allow students to customize their works, we introduced Aviary, a plug-in that helps students edit and filter work attachments, as well as a cover-photo that students can select from their list of attachments. Moreover, students now have the option of selecting attachments from multiple sources, including Google Drive, Dropbox, Box, and more.
- Conducted user testing and compiled findings from testing and previous interviews to formulate problem statements.
- Using problem statements, created low-fidelity paper prototypes. Tested prototypes with new and existing users using a set of predetermined user tasks.
- Used qualitative testing data to create affinity walls, to draw out common themes, and to iteratively improve paper prototypes.
- Established visual hierarchy and designed complete set of responsive, pixel-perfect mockups using Adobe Photoshop.
- Communicated UI specifications and interaction models to development team using Trello, Google Documents, and InVision.
user experience research, user experience design, user interface design
Adobe Illustrator CS6, Adobe Photoshop CS6