A Lauched Website
Design Team
Alison Hagen, Andrew Nguyen, Emily Paterson, Sophia Straub, Noah Veenstra
Methods
UX best practices / iterative design
Tools
Sitecore / Canva
The MSU Finance Office exists to oversee the use of institutional resources and manage six administration units responsible for tasks such as accounting, investments, payroll, loan management, and more.
The resources provided by the Finance Office are crucial for those interested in doing business with the university, fiscal officers, employees, students and their parents. To best communicate this information, we aimed to create an efficient website using Sitecore to reflect their updated written content and indicated design choices.
Adjusting Content to Fit Wireframes
When beginning this project, we were provided with a collection of written text documents and low-fidelity Canva wireframes that represented the Finance Office’s intended content and design choices. Working as a team, our main challenge involved adapting this pre-written content to fit appropriately within the wireframes. As an added caveat to this process, we wanted to ensure that these translated layouts would display information in a manner that was effective, efficient, and satisfying for users.
Goals for Improvement
- Streamline the existing information for optimal efficiency and navigation
- Maintain a sense of visual cohesion to embody university branding
- Expand our team's proficiency and skills working within Sitecore
What We Worked With
Wireframes and content documents for the following pages:
Home | Streamlining Information
Originally, the home page looked a bit different in the client’s Canva document. Through different iterations and conversations with the client, we landed on a layout that more dynamically used content types to make scrolling and digesting information easier and more enjoyable.
About | Merging Pages
At first, we had two separate pages for Lisa Frace (CFO) and Rebecca Barber (VP), plus two additional pages that directed to their full bios.
To streamline this section, we decided to merge the two wireframes provided onto one “About” page that then could direct to their individual pages.
Reporting Units | Eliminating Clutter
Before we had their Canva wireframe, this page was organized into three-columns for six units. Each unit redirected to its own individual page.
We then realized their preference for a tab format to represent each unit and streamlined from 6 pages down to one.
Strategic Priorities & Initiatives | Improving Readability
Priorities and initiatives of MSU Finance are streamlined into bullet points and sub points for optimal readability. The link to the strategic plan is easy to identify.
Resources
Before access to Canva mockups, we were unsure how to structure the page. We copied and pasted links from content document provided, resulting in a long scroll of hyperlinks.
After access to Canva mockups, we knew to implement a side tab content type and organize links by group nested within each tab.
Financial Strategy
Original Design
- The text in each column is squeezed
- Chunky flow
- Aesthetic issues
- Content from columns now takes up more width with tab design
- One of three points is highlighted as main
- Toggle between tabs to focus on other two
Our Redesign
What I Learned
Balancing client wants and usability best practices can be challenging, especially within the constraints of a content management system with specific components. Clear and frequent communication is crucial in order to create deliverables that truly satisfy your clients and justify your design decisions.