The Mindful Applicant
The Mindful Applicant is a web and mobile platform for students in grades 9–12 to guide a long-term, integrated process of self-discovery, ensuring they learn the essential social-emotional skills of reflection and introspection to deeply know themselves.  

Over the course of several months, I supported designs of the Mindful Applicant's student portal and teacher portal, across the brand style guide and three different feature releases. I collaborated with a product manager and the founder of Mindful Applicants, My role for this project focused on mid-to-late stages of the design process.
Interaction Design
UI Design
Sep-Dec 2022
Task 1|Revamping the Old

The Goal

Improve the experience of the first design by simplifying the visuals and interactions to amplify the student engagement.

Replanning the Content-heavy Layout

The homepage of the student portal contains 6 functions. As a result, the homepage needs to be more straightforward and organized. The client and I ranked all parts on the page by usage frequency and decided to take some tasks off the page to leave more space for higher prioritized functions.

Detect the Visual Bugs

After viewing the existed design, I spotted out a few UI bugs.

Identified issues
The Interfaces are card-based. All buttons and sections contain various colorful drop shadows. Visually all UI elements seem to flow on the surface instead of being coherent. The web app already has a complex and heavy information architecture. The over-usage of color blurred hierarchy of content.
I decided to simplify the UI elements.
    Bring in iconography can better specify actions and functions.
    For having a consistent style across the platform, it is necessary to standardize the design.
    I decided to bring down the sizes of title, type instead use a heavy weight to emphasize the hierarchy and thus leave more white space.
    Various Designers worked on different sections of the project in the past. Although all frames have the same design style but the UI differences are visible.
    The typography hierarchy relies on font sizes. The large titles with regular weights does not bring enough focus and reduce white space on the page.
    This is some text inside of a div block.
    This is some text inside of a div block.
    I suggested to replace the existing secondary colors with highly saturated colors to bring in some contrast vibrancy.
    The theme color has a low Intensity.
    There are labels can be replaced by existed icons
    Previous Student Portal Homepage
    Previous Counselor Portal Homepage

    Testing out and Finalizing the Design System

    After a lot of prototyping and iterating, I settled on the design system below:

    How it looks in implementation:

    Task 2: building curriculum page on student's portal

    The Goal

    The Clients drew out wireframes for student's curriculum page, where students completed their homework reflections. My work is to translate the existed work to prototype.

    Evaluating the user flow and Wireframes

    The client provided a polished user flow.

    "How do the Homework Pages Look Like? "

    The core feature of this page is the space for students to document their reflections. Currently the course is delivered in world document format and instructions are mostly short responding-based. Typography and Input field Interactions play an essential role here. For students accurately and comfortably reflect on themselves, we want to bring accessibility in the process of reflection by giving students three ways of documenting - text, audio, and video.

    Building references

    Before Finalizing the design solution, my first step was to gather as many references as possible. I focused on building a reference library from all types of e-learning platforms. Mainly, I want to see how products on the market curate the process of doing homework for students in school.

    My Solution

    I designed an experience for students with the intent to finish the most recent homework published by their counselor. This presents a dashboard of to-do works, past reflections, and confirmation of "share" status, where students can choose to keep their responses private or open to view for counselors.

    Task 3: building a assignment page on the counselor's portal

    Rewriting the userflow

    Looking at the user flow of the main assignment page on the counselor’s portal, I noticed some of the features could be reorganized for clarity and ease of use.

    To bing down the complexity, I section three features into three groups - "Viewing course content", "viewing student's statues", and "publishing assignments."

    Publishing Assignments

    To ensure that teachers effectually publish and collect homework, I generated fill-in elements based on information teachers usually need for the process. The creation process has following sequence:
    1. Selecting who the assignment is forwhat the assignment is,
    when it’s due, and the option to add a message.

    Viewing Homework Content

    Teachers check on preloaded homework content and are able to see the interfaces of a student example.

    Viewing Student Status

    To check on students' recent status regarding their homework, teachers click into each group to locate the student in mind. The usage of icons visually differentiates classes.

    Final thoughts
    Design without Research
    Entry-level Designers commonly think UX design workflow are always sprint-based. However, I learned that realistically things not go step by step. Given the limited time frame and amount of tasks , I was not able to perform a formal R&D process on each features. To ensure each feature's usability, my strategy is looking for references on the market and use fragments of time to test out prototype with mentors, colleague and friends. thus allowing me to think critically within different lenses and apply product-based thinking to the designs I create.

    If I would have more time...
    In the initial meetings with my client, Sarah, she mentioned the idea that grades cannot fully define a student. The education of Social-emotional learning and student's social-emotional skills should be as equivalent to academic education and performance. Inspired by the concept and put my own shoes into our target audience and considering how academic performance a sensitive topic for students back in high school, I realized that privacy plays a huge part in usability. If I am given a longer timeframe, I would like to discover how to embed privacy to the design system to not only make the web app a comfy and secure place for students reflecting themselves but also build a strong connection between students and teachers.

    Thanks to mentors
    Special shoutout to Sara and Russ. Thank you for taking your time out every week for critiquing my designs and providing insights in the field for me to grow as a UX designer. ☺