Chrysalis
UX / UI Design

My junior year was my second year as a designer for USC's Code The Change, an organization that creates free digital products to non-profits. This year, our client was Chrysalis—a company that aids newly homeless individuals in finding employment. Working alongside one other designer, six engineers, and one project manager, we created a solution to automate Chrsyalis' process of job-matching. This involved both a client and employee-side webpage.

Client-Side.



The need for our client, Chrysalis, was to automate their process of receiving weekly availability from those who are seeking employment. Their current system is done through their clients leaving weekly voicemails that are manually sorted through at the beginning of the week.

Overarching solution:

Create a client-side webform that is optimized for mobile, and an employee-side secure webpage that automatically updates client availability, adds clients to their database, and handles job-matching.


Features:

For client-side we identified the necessary features. We wanted to make it a simple and easy process for clients. Stemming from the features identified, my partner and I created wireframes for both mobile and desktop. They were low-fidelity because we used Google Draw as a collaborative tool.


Log-In Page
  • Prompt user to enter ID & DOB
  • Input field to enter this
  • Button to continue
  • Edge case: user enters incorrect info, text to inform them to try again
Availability Input
  • Welcome text
  • Allow user to input from Mon-Sun, 12am-11:59pm
  • Button to input availability from last week
  • Button to clear calendar
  • Submit button
Thank You Message
  • After submitting, confirmation message
  • Allows user to return to form and modify schedule


Visual Identity:

Our client was open when it came to visual specifics. We thought it would be best if we mimicked the same visual identity as their public website, and then adjust it based on the needs of the client.

Client-Side Mockups: After a few iterations, we came to this final mock-up design, using the original logo and color palette of Chrysalis’ main site. We designed subtle interactions and motion design along with the static viduals. Software: Sketch and Zeplin.

I also had the opportunity to do front-end for the desktop side, which we coded in SCSS alongside React.


Employee-Side.




After meeting with client several times to understand their process, we ideated the most efficient way to automate it. After clients leave voicemails, the employees manually search these availabilities as well as certain “attributes” to be able to match the clients. The most important feature for the employee-side was ameliorating filtration through their clients availabilities/attributes so they could easily match their clients with employers.

Wireframes:

Since filtration was the most complicated part of the design process, we started ideating ways of approaching this. Our wireframe process consisted of brainstorming the best ways to filter. We began with the right side dual filter idea for wireframes, but we evenutally updated it in the mock-up process.



Below is the first iteration of wireframes. We wanted the landing page to be familiar for the employees: colors are the same as their spreadsheet, but also correspond to the color palette we chose for the visual identity. We also automate their client information so that the process is paper-less and saved in a database. We also needed to create an Approve Page for employees to use their website.

After creating the first iteration of wireframes, we realized we had these three elements as a sub-header. For ease of use, we experimented with the idea of a sidebar. Can we implement sidebar for all the pages for a clean, organized, concise design?

Wireframes 2:
Employee-Side Mockups: We purposely made the homepage similar to their google sheet structure in order to ease their change of process. We added a client page so that they could see the specific times when they are available, mark them as booked, and also be able to edit availability for the clients who don’t have access to Internet. The sidebar was used to display their basic information. Their weekly schedule follows a similar design to the client-side availability input.
In addition, we discovered a new technology called Figma, that we could use to collaborate on the design as well as share real-time up-to-date designs with the developers.
At first, we wanted the client information directly editable in the client detail page, but we learned this wasn’t feasible for our timeline. Instead, we had the edit button redirect to the add client page, except with the fields already filled out. For the add client page, we implemented the sidebar by dividing information into easily digestible sections. Because we wanted to implement the sidebar on every page, we realized we should add a feature to view existing users and delete them if they leave the company. We clustered this as the Employee Page.


Parting Thoughts.




Working with an actual client was an educational experience for both me and our entire organization. We were able to get real-world experience, find what processes worked best, and also have an impact on the community. Through our work, we have helped a team of over 30 employees who support hundreds of job-seeking individuals per week. Coding experience made designing more effective. There were many iterations I had to make that would ease the development process as we approached deadlines. Taking it further, it would be awesome to have the opportunity to integrate our service across all the three Chrysalis offices in LA.