Enrichly
Connecting mentors with at-risk youth in the area.
Project Overview
During the VisionVoice hackathon, I worked as one of three UX/UI designers on a project for Enrichly. Enrichly is a platform that utilizes technology, gamification, and data to empower youth through development courses. As part of the team, I played a key role in creating an engaging and educational e-learning experience for students to increase their self-esteem and confidence.
Challenge:
Build a user authenticated dashboard for education coordinators where they will be able to login, see a map with Enrichly school locations, click on each location to see the following: school name, location, what programs are offered, when they are offered, duration they are offered and a way to sign up to facilitate that program.
With the resources provided by Enrichly, such as brand assets, program schedules, and their current website, our team was able to design a new brand guide and user-authenticated dashboard for their education coordinators. The dashboard included the primary task flow of signing up to facilitate a program, resulting in a more streamlined and user-friendly experience for Enrichly.
Team:
3 UX/UI Designers
My Role:
UX/UI Designer, UX Researcher
Duration:
4 hours
My Contributions
My achievements included collaborating with the team to create task flows, wireframing and prototyping, and conducting usability tests to improve the design.
Assumptions
Due to time constraints, we jumped right into the ideation phase with 2 assumptions about the user.
The target users are likely to be education coordinators but children and parents will also use the Enrichly platform to access classes information.
The users are likely to be tech-savvy and comfortable with using an e-learning platform, as the courses are offered both virtually and in-person, and the user authenticated dashboard will be an integral part of the platform.
Task Flow
First, we began our ideation process by taking detailed notes. To ensure that we fully understood the process of a user signing up to facilitate a class, we created a comprehensive task flow. This allowed us to visualize the user's journey and identify potential pain points, ultimately leading to a more streamlined and intuitive experience for the end-user.
We used the current website and decided to build and iterate from there instead of starting from scratch.
Wireframes
Using Figma, I translated the task flow into low-fidelity wireframes to efficiently bring our ideas to life. These wireframes served as the backbone to demonstrate the information architecture, layout, and general functionality of the platform. By focusing on the essential features and functionality at this stage, we were able to effectively communicate our design ideas and ensure that the design was aligned with Enrichly’s vision.
As I was working on the lo-fi wireframes, my teammate began bringing them up to mid-fi to nail down the visuals a bit more. This allowed us to fine-tune our design decisions in a more efficient manner, without getting bogged down in details that could be addressed later on in the process. This approach also helped us identify potential issues in the design early on, reducing the likelihood of time-consuming revisions, which we couldn’t afford to make.
Branding
We then took on the task of creating the branding for the platform. We were initially provided with brand assets that included logos, typography, and colors, but we quickly realized that there were issues with accessibility and the number of color options.
So, we made the decision to depart from the original branding and create a new design system that better aligned with the objective of creating a user-friendly experience. This involved selecting a color palette that was both visually appealing and accessible to a wider audience, as well as sourcing iconography that reflected Enrichly's purpose and messaging.
We considered factors such as readability, accessibility, and consistency with the overall brand identity when making our final choices.
Prototype
To efficiently move the project forward, the team decided to divide and conquer the task of bringing up the mid-fi wireframes. We each took on different screens, selected based on our respective areas of expertise and interest, and began working on them independently.
This approach allowed us to work more efficiently and in parallel, which saved us a significant amount of time compared to working on the screens one by one together. We could also collaborate more effectively by sharing our designs and receiving feedback from the rest of the team.
Post-Hackathon
Feedback from Judges
We presented our work to the judges, which included the Hackathon organizer, an Amazon Web Services software engineer, Enrichly's development team and the CEO and CTO of Enrichly.
Below is the feedback we received from the judges:
They would like more iconography on some of the pages with a lot of white space.
It would be better to create single column cards for the class list instead of double column, to reduce cognitive load.
They were very happy with us taking mobile-first approach. We were the only team to present our work on a mobile device prototype.
They enjoyed the playful look and felt like we embodied the brand through our designs.
We ended up winning 2nd place and won Amazon gift cards! 🎉 The team was so excited that we decided to meet together and continue our work.
Team Retrospective
After the hackathon, the team got together in a separate meeting to conduct a retrospective and gather everyone's reflections on the project. During the retrospective, we shared our thoughts and feelings about the project, including what went well, what could have been improved, and what we learned.
Afterwards, we decided to move forward with the project by conducting usability tests to identify any design problems and opportunities.
Usability Testing
We recognize the importance of user testing to validate our design decisions and ensure we were meeting user needs. We set up user testing sessions and recruited participants. During the sessions, we observed how users interacted with our design and collected feedback to identify areas of improvement. The insights we gained from user testing helped us create a plan to refine our design and make it more user-centered.
These usability tests were moderated and lasted about 10 minutes each.
Applied Solutions
Changing "Coordinator" to "Teacher" to decrease confusion
Adding Class Description screens so users can learn more about the specific course offering
Adding a Confirmation Overlay on the Class Details screen
Removing course description on the Success screen
Applied Solution 1:
Confirmation Overlay
We added a confirmation overlay on the Class Details screen to allow users to confirm whether or not they wanted to teach the class or browse other classes. This would minimize frustrations and errors due to users mistakenly signing up for a class.
Applied Solution 2:
Map Tips
Based on our findings in the usability study, we decided it would be effective to add a few tips for the map view for the first time users of this application to reduce drop-off rates due to confusion.
Applied Solution 3:
Success Screen
Through our redesign of the confirmation overlay, we were able to eliminate the need for redundant course details on the Success screen, streamlining the user experience and reducing clutter while ensuring that users are still able to confirm their successful completion of the course.
What’s Next
Adding more icons to product
Designing new brand colors and logo
Creating single column cards for class list
Designing for multiple devices