A Mobile Friendly Site Redesign for Loan Borrowers
Design Opportunity
Use UX best practices and user data to rebuild a federal loan website with a more user friendly, responsive experience.
Quick Facts
The Details
Role & Activities
The redesign process consisted of evaluating and updating the site's information architecture, mobile-first redesign of various pages, and redesign of aspects of the site that were pain points for users. Over the course of the redesign, our team developed a new look and feel, redesigned existing components, designed new components, built HTML prototypes for proof of concept, generated technical specifications for developers, and carried out assembly testing.
As User Experience Lead, I worked in collaboration with a visual designer, front-end developers, scrum master, and another UX designer. Our approach to the project was to create high fidelity designs and prototypes for about 30 template pages which represented the different types of pages across the site (100+ in total). We used an agile approach to complete design and development of the template pages, designing one to two weeks in advance of each development sprint. During each two week sprint, we built the templates according to the designs reviewed with the client. I led weekly review meetings within our team to discuss designs, tracked and assisted with development, led meetings to review prototypes, and presented designs and prototypes to clients each week.
Image 1: Redesigned Site
Image 2: Content Inventory
Information Architecture and Content Analysis
Our team used a content inventory and card sorting exercise carried out previously to begin mapping out the new site. We used the content inventory to generate the list of template pages we would need to design and build (Image 2).
High Fidelity Designs and Prototypes
At the start of design for each template, our visual designer would review the existing page design and we would talk through content prioritization on the page or any pieces of content that needed to be reworked in order to be mobile friendly. After she had completed mobile, tablet, and desktop designs of the template, we would review at a team meeting and discuss consistency, interactions, accessibility, and overall UX of the design. After designs were presented and updated based on client feedback, several of the developers and myself split up the pages and started building the HTML prototypes. Below are details for a few major components we updated in addition to redesigning pages for mobile.
Navigation, New Landing Pages, Footer, & Sitemap
Customer segmentation told us that a strong majority of StudentLoans.gov users visit the site only a few times per year and are not completing multiple processes per visit. The existing site had both a top navigation and side navigation, but no footer at the end of very log pages, and users had to be logged in to view them. We moved the main navigation to a slider, directed homepage links to new landing pages on the site instead of displaying limited information about a process with no call to action, added a footer which contains a comprehensive sitemap for lost users, and created a separate sitemap page.
User Dashboard
The previous landing page displayed to users had two major competing sets of links. We updated the dashboard page to eliminate the confusing side navigation and help direct the user to the process they are looking for using a clearly stated "What do you want to do?" section. We were careful to keep the list of links at the top of our content prioritization, followed by Correspondence, Your Profile, Repayment Estimator, and Your Student Aid Resources for ease of use on mobile.