Branding and Visuals

A quick branding exercise was conducted to establish the identity of OPTNOW, a name that plays on the acronym O.P.T. and the phrase 'now.' This clever wordplay also evokes a sense of urgency and action, as in 'opt-in' or 'choose now.' The design system strikes a balance between professionalism and playfulness, reflecting the transition from student life to the working world.

The color palette emphasizes reliability and responsiveness with shades of blue, complemented by splashes of yellow to provide contrast and highlight key elements. The font, Koho, was selected for its modern, rounded sans-serif style, softening sharp edges for a more approachable aesthetic. This rounded design is echoed in the minimalist, flat style of the Feather Icons.

Landing, sign-in and Dashboard

With a new product, it's essential to ensure that potential users are introduced to the experience in a way that clearly communicates its value and builds trust in the processes. The branding and design system play a key role in achieving this by providing subtle visual cues that guide users seamlessly, even with a simple landing page. These elements work together to reassure users, making it easier for them to understand what the product can do for them and feel confident navigating it.

Eligibility quiz and tool tips

One key stressor was the uncertainty of application times and the criteria for application. The eligibility tool allows for students to visualize their status and also utilize that knowledge to make decisions on when is the best time to apply.

Throughout the design process, numerous iterations were made to refine the user experience. One particularly challenging aspect was determining how to present additional important information to users effectively. For the information icon, various colors were tested to ensure contrast and visibility. Additionally, different display methods were explored, including an index page and a popup overlay.

While these approaches showed potential, user testing and feedback revealed key drawbacks. The overlay option, for instance, resulted in excessive unused space and diminished its “attention-grabbing” effect due to frequent interactions throughout the flow. Similarly, the index page was discarded because it diverted focus away from the immediate task, as features like a search function or library of terms were unnecessary for users’ immediate progression on a specific screen.

Ultimately, a banner emerged as the most effective solution. It utilized the available white space efficiently and aligned seamlessly with the visual language of the flow, delivering critical information without disrupting the user’s experience.

Checkpoints, progress and review

Given the length of the application, it’s common for students to step away or take breaks during the process. To address this, the design prioritized breaking down the application into clear, manageable steps. This approach included implementing friendly 'pickup' and 'continue' points to provide students with a clear indication of their progress and the tasks still pending.

Single-page inputs were used to ask the critical questions required, with the information subsequently grouped to streamline the process and make it more relatable for first-time filers. To further enhance efficiency, repetitive questions were minimized, particularly for users who had already completed the eligibility tool.

As users progress to the revision pages, clear indicators mark each completed section. Additionally, a feature was introduced to allow users to download a sample for review on a different device before submitting. This addresses the challenge of reviewing long documents on mobile, enabling users to view a PDF sample on a larger screen if needed. These refinements, achieved through iterative usability testing, ensure the application is both user-friendly and supportive of students’ needs, helping them navigate the process with confidence.