LEARN
Date
May - July 2024
Role
UI/UX Design Intern
Project Type
UI/UX Design
LEARN is an educational web platform that aims to bridge the gap between education and career for high school and college students. The platform helps students develop critical workplace skills through real-world projects and uses a game-like environment and structure to improve student engagement.
My role was as a UI/UX Design Intern. My main tasks were to assist in redesigning or innovating certain features of the web application to improve user experience and usability of the platform. I worked with the wireframe technology Figma to develop improved designs and work on ensuring that features of the platform are as intuitive as possible for the students and teachers that would be interacting with the application.
Tools
Figma
FEATURE
Introductory Informational Carousel
The Problem
Users were often confused about the app-specific language, and what they were meant to do for each kind of task within the app.
Solution and Design Process
-
The informational carousel gives a brief introduction to many key aspects of the web application and takes students that are joining the app for the first time through what many of the main features of the app are and what they need to do at each step.
-
The informational carousel is something users are likely familiar with, as it is a common way to introduce them to a platform. As a designer, you want to consider what your users are familiar with from other sites on the internet.
-
Each card contains a clear title for each aspect of the app, images to show what it will look like when users perform that task, and a small description for additional information.
-
The carousel presents tasks in the order users are likely to encounter or complete them, helping to establish the expected sequence of actions.
-
"Next" and "Back" buttons are placed according to user expectations: "Back" on the bottom left and "Next" on the bottom right, making it easy for users to understand how to navigate through each card in the carousel.
-
The colors and text used align with the established branding of the application.
FEATURE
To-Do Flow
The Problem
There were points duirng the first round of beta testing with real students where they got confused as to what their next step should be at times in the platform. Some users experienced confusion as to what to do next in order to keep completing the work aligned with that week's milestone.
Solution and Design Process
-
In this redesign of the My To-Dos section, a clear timeline has been introduced with the 4 overarching kinds of tasks to complete each milestone: Modules, Reflection, Quests, and finally the Milestone will be complete, with a pointer indicating where the student is at in terms of what they need to accomplish.
-
Tasks are broken down into each exact activity with its corresponding due date to the right, listed out in the order that they can follow and complete the work for that milestone.
Expanded To-Do List View
Completing a To-Do Item
FEATURE
Mentor Navigator
The Problem
The Mentor Navigator is a feature that students will unlock after they earn a certain amount of points. Students will be matched with an employee at a company aligned with the student's career interests and they will be able to set up a quick meeting with that employee to connect. Building your professional network is a very important part of starting your career journey as a student and there is no current way to connect students with experienced career professionals within the app.
Solution and Design Process
-
The Mentor Navigator provides a solution for students by letting them connect with successful career professionals and giving them the opportunity to connect face to face, and form professional mentor relationships and get career advice, and build relationships that will help them bridge between the academic to their future career.
Introductory Carousel
Scheduling a Meeting
Mentor Navigator on the Dashboard
Mentor Navigator - Creative Presentation
The Task
Come up with a creative way to introduce the Mentor Navigator to users. It should be related to the overall space theme of the application.
Solution and Design Process
-
My design is inspired by the concept of mission control, similar to those used in space missions.
-
I aimed for a minimalist and simple style, portraying a user seated at a supercomputer with multiple screens.
-
The design resembles a mission control setup that users might already be familiar with.
-
To enhance the experience, text animates on the screen in a terminal-style font, typing out the message that they have unlocked the Mentor Navigator.
-
I used the Pen Tool in Figma to create the scene while ensuring the coloring and style remain consistent with the rest of the application.
FEATURE
Progress Report Form
The Problem
Students will be prompted to complete a Milestone Progress Report Form at the end of each weekly milestone to encourage reflection on the work they have done in their teams. Students did not have any way to reflect deeper on their work and progress and developing skills, and additionally, they had no standardized way of recording the progress they were making each milestone.
Solution and Design Process
-
This Milestone Progress Report Form allows students to qualitatively and quantitatively reflect on their progrss made during the completed milestone in a standardized way and teachers will be able to track their progress across milestones using the responses submitted in the reports.
First iteration
In my first iteration of the progress report form, users were redirected from the dashboard to a separate page dedicated to the form. The design featured dark gray cards on a black background to align with the application's branding standards. Users navigated through the form by scrolling. The information hierarchy was organized so that each question was presented on its own gray card. For questions with multiple parts, each part was clearly separated, and short-answer responses were entered in black text boxes. For the final question, I designed a red upload icon in the shape of a cloud with an arrow pointing upward through the center. This commonly recognized upload symbol effectively indicated where users could upload project materials associated with the milestone.
Improved revision
After receiving feedback on my initial design, I made several improvements to the form:
-
I added an introductory pop-up to explain the purpose and goal of completing the report.
-
The form now appears as a pop-up over the dashboard, with the background grayed out, rather than redirecting users to a separate page within the application.
-
The styling of the questions and answer boxes was refined to be cleaner and more consistent, using simple white text and white outlines for ranking bubbles and short-answer sections.
-
I added a scroll bar on the side to help users see their progress within the form.
RESULTS
Reflection and Takeaways
My internship with LEARN provided invaluable hands-on experience in user experience and interface design within a professional setting. Working at a fast-paced startup, I quickly adapted to a flexible and iterative environment, learning how to navigate evolving priorities while ensuring that my design work aligned with business and user needs. One of the biggest challenges I faced was working within an existing, branded product—unlike my previous projects, where I built designs from scratch. Maintaining design consistency while implementing usability improvements required careful attention to detail and adherence to established design systems. Through this, I strengthened my Figma skills and developed a deeper understanding of scalability in design. Additionally, I gained experience working in sprints, mirroring the workflows of most technology companies. This helped me refine my collaboration and communication skills, ensuring that my designs met both user expectations and technical feasibility. Overall, this internship was a fantastic opportunity to make a real impact, grow professionally, and build both my technical and soft skills in a real-world setting.