Student Loan Website (Navient Redesign Challenge)
Student Loan Website (Navient Redesign Challenge)
This project began as a design challenge to demonstrate my approach as a UX designer across various industries and subject matters. The first challenge was to redesign single existing Student Loan Account Summary page. Key design considerations include information hierarchy, visual hierarchy, and a modern UI to create a more effective, user-friendly interface for student loan website users.
The full Figma project file and case study deck could be found here.
This project began as a design challenge to demonstrate my approach as a UX designer across various industries and subject matters. The first challenge was to redesign single existing Student Loan Account Summary page. Key design considerations include information hierarchy, visual hierarchy, and a modern UI to create a more effective, user-friendly interface for student loan website users.
The full Figma project file and case study deck could be found here.
ROLE
UI/UX Designer
TEAM
Solo
TOOL
Figma
DURATION
2-3 days
THE TASK
THE TASK
Redesign the UX/UI of the Account Summary Page
Redesign UX/UI of Account Summary Page
To begin with, I didn't have strong understanding of what a student loan page is, as I have never personally used it or have seen my friends use it before. Given the unfamiliarity of the subject, I first did a short preliminary research on student loan websites and their account summary pages. I guided this research using three key questions that helped me understand their purpose and underlying intentions.
To begin with, I didn't have strong understanding of what a student loan page is, as I have never personally used it or have seen my friends use it before. Given the unfamiliarity of the subject, I first did a short preliminary research on student loan websites and their account summary pages. I guided this research using three key questions that helped me understand their purpose and underlying intentions.
SOLUTION
SOLUTION
More intuitive loan details through visual hierarchy and better UI
More intuitive loan details through visual hierarchy and better UI
More intuitive loan details through visual hierarchy and better UI
Simplify content and enhance visual and information hierarchy for more intuitive loan details
Streamline alert system for heightened user awareness
Simplify content and enhance visual and information hierarchy for more intuitive loan details
Streamline alert system for heightened user awareness
INITIAL APPROACH
INITIAL APPROACH
Let's define
Let's define
I first identified details that I already have knowledge of, or could find within the screenshot of the account summary page. Furthermore, designers are often required to make practical, research-backed assumptions when complete information isn’t available. With only a screenshot of one page provided in the design challenge, I made a few informed assumptions to guide my design decisions.
I first identified details that I already have knowledge of, or could find within the screenshot of the account summary page. Furthermore, designers are often required to make practical, research-backed assumptions when complete information isn’t available. With only a screenshot of one page provided in the design challenge, I made a few informed assumptions to guide my design decisions.
USER AUDIT
USER AUDIT
Self user audit
Self user audit
I first performed a self user audit on the page to discover major, minor, and cosmetic problems that could be enhanced during this design challenge.
I first performed a self user audit on the page to discover major, minor, and cosmetic problems that could be enhanced during this design challenge.
USER RESEARCH
USER RESEARCH
Peer user testing
Peer user testing
I asked peers to identify confusion or frustrations to uncover pain points, set clear goals, and research user needs.
Each of these peers has recently finished college or is currently in school.
I asked peers to identify confusion or frustrations to uncover pain points, set clear goals, and research user needs.
Each of these peers has recently finished college or is currently in school.
OVERALL INSIGHTS
OVERALL INSIGHTS
Key Insights
Key Insights
PROBLEM STATEMENT
PROBLEM STATEMENT
Users are overwhelmed with excessive information, poor visual hierarchy, and an unintuitive navigation structure.
Users are overwhelmed with excessive information, poor visual hierarchy, and an unintuitive navigation structure.
DESIGN APPROACH
DESIGN APPROACH
Persona and User Journey
Persona and User Journey
Persona and User Journey
I began by developing a persona and user journey to not only represent the target users but also to build empathy with the actual user group on their goals, pain points, behaviors, and motivations. Mapping the user journey has helped me further identify key pain points and determine which features should be prioritized. This approach reflects my intent to design for the right user, at the right moment, with the right solution.
I began by developing a persona and user journey to not only represent the target users but also to build empathy with the actual user group on their goals, pain points, behaviors, and motivations. Mapping the user journey has helped me further identify key pain points and determine which features should be prioritized. This approach reflects my intent to design for the right user, at the right moment, with the right solution.
HOW MIGHT WE
HOW MIGHT WE
How might we better visualize the current user's loan data and provide a more intuitive experience?
How might we better visualize the current user's loan data and provide a more intuitive experience?
DESIGN IDEATION
DESIGN IDEATION
Low-fi Wireframes
Low-fi Wireframes
Low-fi Wireframes
I created low-fidelity wireframes to explore a range of interface design ideas and approaches.
My key goals were to:
Improve visual accessibility for primary information
Provide clear contrast between loan tables to enhance readability
Present content in a concise and easily digestible format
These objectives guided my design decisions and ensured a more user-friendly experience.
I created low-fidelity wireframes to explore a range of interface design ideas and approaches.
My key goals were to:
Improve visual accessibility for primary information
Provide clear contrast between loan tables to enhance readability
Present content in a concise and easily digestible format
These objectives guided my design decisions and ensured a more user-friendly experience.
Loan Tables
Loan Tables
Loan Tables
Each loan tables are represented as tabs
Improved data readability as tables are not competing against each other
Ample space for all data to be displayed without the need of additional user step
Each loan tables are represented as tabs
Improved data readability as tables are not competing against each other
Ample space for all data to be displayed without the need of additional user step
Each loan tables are represented as tabs
Improved data readability as tables are not competing against each other
Ample space for all data to be displayed without the need of additional user step
VISUAL IDENTITY
Style Guide
Style Guide
Style Guide
To achieve a more intuitive user interface that feels both modern and organized, I designed a new style guide to guide the redesign. This style guide helps maintain consistency in visual elements and supports usability by reinforcing clarity, readability, and accessibility across the platform.
To achieve a more intuitive user interface that feels both modern and organized, I designed a new style guide to guide the redesign. This style guide helps maintain consistency in visual elements and supports usability by reinforcing clarity, readability, and accessibility across the platform.
TAKEAWAYS
TAKEAWAYS
What I learned
What I learned
This challenge has taught me to navigate ambiguity while making thoughtful design choices.
Importance of designer to identify relevant information to make informed decisions in shaping user experience.
This challenge has taught me to navigate ambiguity while making thoughtful design choices.
Importance of designer to identify relevant information to make informed decisions in shaping user experience.
If I had more time…
If I had more time…
Validate assumptions
In-depth user research with student loan website users
Explore more ways to increase information visibility for Alert notifications and Auto Pay options
Conduct usability testing on final design wireframes
Validate assumptions
In-depth user research with student loan website users
Explore more ways to increase information visibility for Alert notifications and Auto Pay options
Conduct usability testing on final design wireframes
APTNER pass v2.0
APTNER, an IT company based in South Korea, focuses on enhancing residential convenience within apartment complexes. I improved the user experience of its service, APTNER pass, which allows residents to reserve communal spaces and amenities.
ROLE
UI/UX Designer
Design System
TEAM
Solo
TOOL
Figma
DURATION
2-3 days