YPA Responsive Dashboard
Filtering and sorting for easy pattern spotting.
The Project
Role | Responsibility
UX design, UI design, UX writing, user research
Tools
Figma, Photoshop, Google Meet, Calendy, Google Forms, Google Docs, Maze, Discord, Voice Recorder
Scope
Sprint-based design, 80 hours.
Solo UX | UI designer
About the Client
Youth Pathways of Colorado connects youth with opportunities to get back into school and also creates pathways, alongside caring adults, to build confidence and find success in school and beyond. They believe all young people can rise above seemingly insurmountable obstacles to learn, to excel in school, and to ultimately graduate.
The Problem
Backstory | This company is currently receiving a lot of information with little organization about who is donating and if there are trends and patterns with those fundraising campaigns. They also would love a simplified and streamlined version of their dashboard.
UX research applied | I will interview staff and stakeholders to determine the specific desires for their dashboard and filtering needs, creating a quick and intuitive flow to gather the needed information.
Research + Discovery
User Interviews
Through Google Meet, I interviewed a staff member and a stakeholder about the current shortcomings in their dashboard, in addition to what how their ideal dash design would function.
Insights |
Both of my users expressed a dislike for the current dash and spreadsheet system. Unorganized and messy, information is challenging and time consuming to sift through. They want a dash that can communicate information at a glance.
Desire to export entire filtered spreadsheets in addition to widgets from the dashboard.
Based off of my interviews, I built a persona to help me understand and personify an employee of YPA.
Understanding the User Flow
Designing the User Interface
After doing my pattern research and looking to platforms such as Google Analytics and Pencil and Paper, I prefer to begin my design process with low fidelity sketches, allowing myself to be loose.
Low-Fi Wireframes allow me to explore design ideas while still being able to edit and adjust easily.
Mid-Fidelity Wireframes
Dashboard design is clean, using cards and visual data to populate the page. Each data card has a filtering option, so each user can customize the timeframe and location of the information they are prioritizing. Each page features an export option, so all data can be shared at the drop of a hat.
In the patron spreadsheet filtering design pattern, I placed a series of filter buttons beside the search bar. Within these drop-downs, there are quick-set filters in addition to customizable options. When a filter is applied, you will see a tab pop up to express the added filter, that is not only easily cancelable, but easy to apply other filters onto and clearly see all of your applications.
Component Library
Unique and warm color palette helps engage users in their mission.
Highly visible hierarchy of buttons and links
Easily legible and modern typography for both desktop and mobile
High Fidelity Wireframes
User-Based Design
Taking the prototype back to the client for more user testing
Results |
I delivered my design to my same two users I interviewed in the beginning of the project, and got their feedback through Google Meet as they explored tasks within the prototype.The filtering buttons and find them easy to use, but wish there was also sorting options.
Users love the applied filter indicators.
In the date filter, a Rev Ops manager requested a “select all month” option, something that they wish existed in their previous dashboard.
The yellow on the dashboard is a little overwhelming.
The font in the spreadsheets should be a little larger for clarity.
Iterating | Listening for a Better User Experience
Based off of my feedback from user-testing, I was able to iterate on my design for increased function, breathing room, inclusivity with typography size, and gentler color palette.
The Prototype
Reflection
Main Challenge
Timeframe | My timeframe for this project was quite limited so I was only able to attend to the patrons data presentation, and given more time I would have loved to spend more time on their home dashboard in addition to other data pages.
Limited User Testing | I also had limited users to interview and a more expansive interview base could have been helpful.
Takeaways
I am proud that I was able to offer YPA an intuitive filtering option, and was able to build out a sorting option as well, during our iterating process. My prototype is easy to use and gives a wonderful idea of how the site would work after the handoff.