Overview
MDCAPS Redesign
MDCAPs is a website that allows Maryland College students to receive state scholarships and financial aid. To improve the usability, aesthetics, and overall user experience of the MDCAPS welcome page, I aimed to create a more user-friendly and visually engaging interface that aligns with the needs of Maryland college students.
Role
UX Researcher
UX Designer
Tools Used
Figma
Duration
September 2024 - December 2024
Audience
Maryland college students seeking scholarships and financial aid, including transfer students from diverse backgrounds
The current MDCAPS website feels overwhelming, with too much text and a layout that makes it hard for students to find what they need quickly. Important actions like logging in or checking financial aid are buried, and the design doesn’t make it easy to navigate or use.
Problem Statement
The Origin Story
What Inspired the MDCaps Redesign?
My redesign of the MDCaps website began when I was tasked with identifying a website I strongly disliked for my Human-Centered Computing class: “Graphic Design for Interactive Systems”. Conveniently, I had visited the MDCaps website the prior week and remembered many issues I faced during my user journey.
October 2024- December 2024
Project Timeline
Project Details
Design Ideation
Understanding the Purpose of the Redesign
Pain Points
The MDCaps website presents several usability challenges that hinder a smooth user experience. The cluttered navigation menus can overwhelm users with too many options, making it difficult to locate specific features or information efficiently. Additionally, the lack of intuitive design creates difficulties with the navigation, especially for users unfamiliar with the website.
.png)
Outdated Design
-
Cluttered interface
-
Poor mobile optimization
Limited Feedback on Errors
-
Generic messages
-
Technical jargon
Confusing Navigation
-
Hard to find features
-
Overly complex menus
Design Goals
While conducting user research, I found that the MDCaps mission statement emphasizes making users feel welcomed and confident as they navigate the financial aid process. My main goal for the redesign is to align closely with this mission through my design choices while enhancing it in a modern way.
Mood Board
Unifying Design Choices
Color Palette
Unifying Design Choices
Design Goals
Using a color picker tool, I derived 24 colors that capture the most prominent hues from the mood board. I then grouped the colors into sets based on their relationship on the color wheel, such as analogous, complementary, and triadic. From the sets defined I chose three colors that resonate closely to my redesign goals.
Final Color Scheme
Warm-toned split complementary palette
.png)
Divergent/Convergent Thinking
Brainstorming & Refining
Before starting any user interface redesigns, I wanted to clearly define the design goals for my redesign through the logo. Drawing inspiration from the current logo and themes that resonated with the MDCaps brand, I sketched five designs in black and white. This process began by listing five words that represented the MDCaps brand, then branching off into 10 variations for each until I created a list of 50 terms. From these, I applied convergent thinking to narrow it down to the five terms that best represented the brand and illustrated an icon for each.
Rapid Iteration
.png)
Forgiveness
.png)
Personalized
.png)
Proactive
.png)
Assistance
.png)
Intuitive
Final Logo Design
Retouched with Color Added
Crafting Inclusive User Personas
User Research
MDCaps users are primarily students, parents, and educators navigating the financial aid process for higher education in Maryland.
Characteristics of MDCaps Users
Users age 16+
Age
Traits
MDCaps users want a simple, reliable platform that works smoothly on all devices. They look for clear guidance, timely updates, and quick help when needed.
Expectations
First-Year Masters Student
Meet Sophia Martinez
.png)
Demographics
Age: 22
Education: M.S in Graphic Design
Hometown: Silver Spring, Maryland
Family: Single, lives at home
-
Wants to secure financial aid for her grad program
-
Needs information on scholarships and grants
-
Aims to have everything organized before the semester starts
Goals
Behaviors
Sophia is really organized and manages her time well, balancing school, work, and personal life. She likes tools that save her time and keep everything organized.
Sophia is juggling school, work, and life, so she needs a financial aid website that’s easy to use and gives her the info she needs without any hassle. As a grad student, she already knows the basics of financial aid but needs help finding grad-specific opportunities.
Needs
Sophia has filled out financial aid forms before, but the grad school process is a bit different.
Experiences
Auto Mechanic, Self-Employed
Meet Greg Newman
.png)
Demographics
Age: 56
Education: Vocational Degree
Hometown: McLean, Virginia
Family: Married with three kids
-
Aims to secure financial aid for his bachelor's degree
-
Wants a straightforward financial aid process
-
Seeks to quickly become familiar with the MDCaps website
Goals
Behaviors
Greg tends to approach new technologies cautiously and would rather understand the technology before exploring unfamiliar features.
Greg hasn't had much experience with technology in a learning setting as he finished his high school diploma during a time when technology was not implemented in schools and he completed his certificate for Auto mechanics in trade school.
Needs
Greg has minimal technology experience as he chooses to spend more of his time focusing on his craft.
Experiences
User Journey
Understanding User Goals
Sign up/Log in for a student account
Navigate to financial aid section
Review financial aid components
Review remaining balance or expected payment
Digital Wire Frame
Login Page: Original vs. Redesign
Landing Page
High - Fidelity Final Prototype
5 Interactive Pages
Final Prototype
Solution Overview
The redesigned website focuses on the top reasons students visit: checking application status, uploading documents, exploring funding options, and learning how to use the site. Special attention was given to the welcome page, as it sets the tone for the user experience.
Skills Used
Solution Overview
During the redesign of the MDCAPS website, I developed a strong foundation in color theory and its relevance to enhancing the overall aesthetic of the website, as well as effectively utilizing the surface area of a desktop layout. I learned how to strategically reduce clutter by using navigation menus and nesting information within help menus, allowing users to have greater control over the information presented to them at any given time.
4 Interactive Pages
Final Prototype: All Pages
.png)
.png)
.png)
.png)
More Projects
.jpg)