Informatics Capstone
Role: UX Designer
Duration: January 2024 - June 2024
Tools Utilized: Figma
Application Type: Web
Background
According to research, Disability Resources for Students (DRS) at the UW lacks holistic resources to equitably aid students outside of the classroom. To address this, I helped design REACH, a web-application that offers UW students easy access and connection to resources both on-campus and off, connection with like-minded students through an anonymous discussion forum, and convenient answers to common questions and issues other students with dis/abilities have experienced at UW. Our mission is to empower students with disabilities by providing an online platform where they can discover a supportive community and access essential resources, tailored to their unique needs. For my capstone team, I had 2 UX designers, two back-end developers, and a front-end developer.
Problem SatEment
Market Research
Creating easily accessible resources was vital.
A lot of people weren’t part of support groups because they potentially weren’t aware of all of the benefits they could get from them.
DRS users mentioned the DRS website lacking in accessibility despite it being the official site for disability resources.
Ideation
How might students with disabilities find a community and resources comfortably so that they can succeed within higher education?
Research
My second form of research consisted of survey responses. My team and I sent our survey to DRS students, friends and family of students with disabilities, and students with disabilities without DRS accommodations. We acquired 16 survey responses which yielded the following findings:
From our market research, I identified some key findings:
From our competitors I gathered that there were countless benefits to a clearly labeled and organized website.
Accessibility was a key feature I repetitively observed.
Comprehensive resources were crucial for empowering people with disabilities to succeed by providing the necessary tools and support customized to their specific requirements.
Providing many different options for support was essential, including both in person and online options.
Surveys
From our research, I discovered that there was an obvious need for a way to provide students with disabilities easily accessible resources, and a way for them to connect with their peers. My initial thought was to create an extension for the current DRS website. One of our team members had DRS accommodations, but they was the only one who could login to their account which meant limited access. My team and I therefore opted for creating our own website where we would be able to start with a clean slate and implement our new ideas.
To begin the ideation process, I started with creating a mood board, gathering ideas and inspiration:
Keeping what I had learned from user research in mind, the other UX designer and I developed a sitemap with potential pages for our website, which we would iterate over further during the design of the low-fidelity prototype.
Design
Low-Fidelity Prototype:
Resources - I opted for a filter bar off to the left of the displayed on our resources to give users quick access to filter options. Resources would be clearly displayed and organized with visual images on each card to help with identification and browsing.
Profile - The profile page would provide the user with their bookmarked resources, upvoted discussions, and personal posts. I chose the layout above because it provided clear indication of the user’s activity within the website, and each section would be easily accessible with clear headers and navigation tabs.
FAQ - The FAQ page would have all questions visually displayed as cards for clear and easy browsing, making sure that the cards are large enough, and accessible.
High Fidelity Prototype:
Resources - My team and I created a comprehensive list of resources collected by one of our team members with DRS accommodations, and added them to our page.
Discussion - The discussion page would have a search feature at the top of the page for quick location of discussion posts. The filter to the right would provide a clear way to find the posts the user is looking for.
Discussion - Instead of having a filter component displayed to the right of the discussion, I added all categories at the top of the page to make it more clear to the user what page they were currently on.
At the end of the quarter, my team and I presented at the Capstone Gala and completed our official iSchool contribution and submission. Our final Capstone presentation is embedded below for a full explanation of our project, personas, design solution explanations, and a demo video from the perspective of one of the user personas.
Profile - The profile page essentially remained the same after high-fidelity work was completed. I bolded appropriate headings for clarity, and made the ‘selected’ background color very prominent to also aid with lucidity.
FAQ - The title of the ‘FAQ’ page was changed to ‘How-To’ for a more personal and ‘tutorial feel’.
User Testing:
After the completion of our high-fidelity prototype, I conducted user testing with 5+ users in the form of interviews. From these interviews, I gathered the following:
Making the FAQ cards clickable would be more accessible than hovering.
Adding alt text on images would be important for technology such as screen readers.
Switching the pluses on the ‘Resources’ page to toggle buttons created a more intuitive experience.
Redesigning the ‘How-To’ page to a single-column layout enhanced focus, allowing users to concentrate on one card at a time.
Final Design:
I applied the findings from our user research and communicated with our developers to implement these changes. I chose accessible colors, clear visuals, bold headings, and accessible font sizes to ensure the design would adhere to guidelines. Below is the final website our developers built based on the design
Conclusion:
The project was moved to open source so that a future capstone team could pick up where my team and I left off to develop the project even further. I would like to see the website fully functional at some point for students to get the most use out of it. The other UX designer and I would still like to continue this as a personal project since we are very passionate about the project due to it’s value and importance within the University of Washington community, and would also like to improve on the design as a personal exercise. I think that there are many changes that I would still like to make which would improve the experience of the users and make the site more accessible.
Reflection:
Considering that this was not solely a UX design project and required all members to contribute to creating a working product I still think there are many aspects of the design that could use some improvement. This aside, working with a full-stack team was so much fun, and I had such a great experience. My knowledge and abilities keep developing as a designer as I make mistakes and learn from them. I started out with a difficult time coming up with an idea, iterating over many types of websites and solutions. After a long process of ideating, my team and I arrived at the solution you can see above and I can wholeheartedly say that I am glad my team choose this solution since I truly believe in it’s impact and importance.
I tried to make my team’s website design very visual, with clear headers, bold fonts and proper font-sizes, with accessible colors for a diverse range of users. For a full view of the high-fidelity prototype, please visit the Figma.
