incSkill Library
Hack4Impact UIUC Fall 2023
Tools Used: Figma, React, Chakra, Type Script, Node JS, MangoDB, AWS
Duration: 14 weeks
Team:
Project Manager: Jocelyn Xu
Tech Lead: Vishruth Raj
Product Designer: Miranda Ma + Sidharth Hejamadi
Software Developers: Evan Jordan, Priyanka Jakka, Vy Nguyen, Daniel Moon, Lauren Hyde
What is the problem?
There is a big gap in education and employment opportunities for people with disabilities. There is also a lack of accessible resources and learning materials for people with disabilities .
Our Solution
Creating an online library full of accessible information. Allowing users to search, download, and view information from all over the world. Allowing verified organizations to upload these files for users to view.
Search
Within the download management there are two main functionalities. My team and I decided to add “(displaying 3)” to our designs, this allows users who utilize screen readers to further get a grasp on how many files are displayed.
Recent Downloads - the user can view all their past downloads, and also have access to the file details
Currently downloading - status bar visually displaying the process of download. However in further design iterations, the team decided to get rid of the status bar as it isn’t accessible through screen readers.
Users Can:
Meet the Clients
Design Language
Download
Learn
What they do: Empower people with disabilities using technology
What we’re doing: Building the largest online library of accessible information in the world, targeting audience from India. Building a new platform derived from their existing website
What we’re focusing on: Accessibility + Consistency
First and for most, it is super important that we focus on accessibility and consistency throughout the whole platform.
During kickoff, we were given a design system. Majority of these colors were given to us, however we would run into accessibility problems when designing, and that lead to us having to either adjust or add colors.
After running our designs through an accessibility plugin, we discovered that the purple color that was primarily used within the library did not past accessibility testing. We used an accessibility plugin called Stark, and there we chose a new variation of the used purple color to ensure contrast, readability, and accessibility.
Request
Let’s Get Started - Some Background
This project was created in collaboration between the non profit organization I-Stem and Hack4Impact. Hack4Impact is a student organization that partners with non profits to create digital products and solutions.
I am the product designer of this project, along side another team member, Sidharth. Our responsibilities included to implement the original design system and design language, while translating into the platform that we were building. Making sure that it fits the needs of the library. We also attended weekly client calls to gage feedback, and implement suggestions regarding accessibility, design and much more.
Moving on to the product.
User View
There are three main functions of the library.
When designing the user view, there were three main functionalities that we wanted to highlight for the user.
File Requests - where the user can request files, resources, books from the organizations.
Download History - the user can view their download history and see the status of those downloads requested
Favorited Files
User View - Includes access to the library
Admin View - Includes access to the library and the ability to upload resources
Organizational View - Includes access to upload resources to the library and to manage admins
Organization View
When designing the organization view, there were a few main functionalities that we wanted to highlight for the orginzation.
Library - organizations can also view the library
User Management - organizations can accept, reject, and remove users
Media Request - view and fulfill requests made by users
Upload Management - view, edit, and delete files
Metrics - view user statistics and trends
The user library serves as a dashboard and homepage for all the information that the library has to offer. The functionalities include..
Book request function: where users can request a book or document that is not already currently on the platform
All document and book view in one place, users can view all the library has to offer in one place
Search functionality , allows users who have specific needs to find what they are looking for
At the bottom of the page there is another module to place a book request. When designing, we made this decision as we did not want the user to scroll all the way back to the top when they are navigating the page.
This product was probably one of the most challenging projects that I have worked on. It was challenging in many ways, I definitely felt a big wave of creative burnout during the duration of this project. Balancing burnout and meeting deadlines for a client was definitely not easy, but this product has allowed me to explore lots of new avenues of design.
The most important things I learned with this project is: how to effectively communicate with another designer, and how to design with a niche user group. Usability and accessibility is always important when designing, but when there are niche user groups, certain measures have to be taken. Also learning which parts of visual design to sacrifice was also important to learn.
Overall, this product was very monumental in my career as a designer, and for a great cause.
the team :)