David Lim
Product Designer

Map the Money Maze

Education

Map the Money Maze

Project Context

Background:

App to Succeed (ATS) is a non-profit organization with aspirations to eliminate poverty in the United States by providing career, education and personal finance guidance to young adults (ages 16 - 19). They plan to accomplish this by developing a web application that presents subject-based lessons, assesses comprehension and emulates practical experiences through "real world" scenarios.

Project Goals:

Re-design existing screens to implement UX design principles and best practices. Create screen mockups/templates for future modules.

Challenges & Limitations

Planning & Strategy: Design teams were employed on a volunteer basis which resulted in a high team turnover rate; there was no continuity in planning, strategy or document management

Research: No user research, interviews or market studies were conducted or available to determine user needs, behaviors and pain points; resourcing and time was not allocated in this project

Content: Content (lessons, assessments, images, etc…) was not fully drafted and available by the time the product designs were kicked off

Map the Money Maze

Risk Mitigation

Planning & Strategy: My first task was to set up the project management structure by 1) Setting up a weekly cadence with the client and 2 other designers to monitor progress, issues and risks 2) Defining and communicating project goals, timelines, scope and deliverables 3) Documenting design decisions and keeping track of design iterations

Research: Conducted cursory literature review of Gen Z behaviors and preferences in the absence of any formal user research

Content: Created an application map to better understand the extent of existing gaps along with a style guide for future design teams to leverage; made the decision to design screen templates for ease of content insertion when it becomes available

Design Overhaul

Previous Team's Designs

Initial Observations:

  • There were 2 different logos implemented in various iterations of the design; neither logos seemed to invoke a sense of empowerment or self-development
  • It was clear that critical paths in the user flow were missing; e.g. login, homepage/dashboard, etc...
  • The color choices were jarring and, at times, clashed with one another; e.g. choice of blue against yellow
  • In some cases, legibility was an issue; e.g. white font against green buttons resulted in a contrast ratio of 1.78 : 1 and did not pass WCAG AA or AAA for normal and large texts
  • Grids and columns were not adhered to
  • Questionnaires and form designs were inconsistent

Map the Money Maze

My New Designs

Design Approach & Rationale:

  • Re-designed the logo to appeal to a younger audience (age 16 - 19) and invoke a feeling of improvement and progress
  • Drafted a critical path user flow and sitemap to determine scope of key screens that were missing; designed a dashboard/homepage, login, and in-lesson/global navigation elements that were not previously considered
  • Modified the color palette to ensure colors did not clash when used in contrast
  • Drove consistency across page layouts and buttons while maintaining clear visual/informational hierarchy

Map the Money Maze