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.

  1. Recent Downloads - the user can view all their past downloads, and also have access to the file details

  2. 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.

  1. File Requests - where the user can request files, resources, books from the organizations.

  2. Download History - the user can view their download history and see the status of those downloads requested

  3. Favorited Files

  1. User View - Includes access to the library

  2. Admin View - Includes access to the library and the ability to upload resources

  3. 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.

  1. Library - organizations can also view the library

  2. User Management - organizations can accept, reject, and remove users

  3. Media Request - view and fulfill requests made by users

  4. Upload Management - view, edit, and delete files

  5. 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..

  1. Book request function: where users can request a book or document that is not already currently on the platform

  2. All document and book view in one place, users can view all the library has to offer in one place

  3. 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 :)

Final Takeaways