Hands Together is a nonprofit organization based in Santa Ana. They are dedicated to fighting multi-generational illiteracy and poverty and offer advanced early education to promote academic excellence among preschool children.
CodeLab, the student-run software development organization I was a part of, was hired to do a complete redesign of their website and branding. The new features they wanted us to implement were a donation feature, shopping and event registration, and payment methods.
One UX designer and I completely redesigned the website’s user interface (logos, color scheme, typography, layout) and created a clean and intuitive interface so that the website would be easy for our target audience (parents) to use.
My Responsibilities: My role in this project was to conduct user research, logo design, and prototyping.
The first thing I did was conduct user research to understand who we are designing for. I broke down the demographics of Santa Ana, where the organization is based to understand our target demographic.
Pain Points: We had a meeting with Ellen Mogasemi, the Vice President of Hands Together, to discuss the main aspects of the website that she thought were working and what could be improved. The 3 main things that came up during our meeting were that the website looked dated and felt clunky, the hierarchy of the website did not encourage users to take the actions Ellen wanted them to take, and there was not a way to get volunteers from the website.
We came up with design ideas based on successful children’s organizations and then created some sketches of how the website could be laid out. We prioritized a clean and intuitive interface, especially considering that the majority of our user base were parents.
Since the Hands Together organization wanted a completely new user interface, I was tasked with creating a new logo and color scheme. The first iteration of the logo I created showcases 10 hands forming a heart with the Hands Together name in the center, depicting unity. The first iteration of the color scheme includes 2 shades of pink and 3 shades of blue. Since we did not want the website to feel foreign and unwelcoming to existing users, we tried to keep the colors similar to the previous version of the website with a slightly modern touch.
After presenting our new designs to the Hands Together Board, they commented that they wanted a brighter color scheme to fit the educational theme. They also wanted a new logo because they thought the old logo resembled heart arteries. My solution was two hands that resembled hand paint with a primary color scheme to fit the family-friendly tone and voice of the organization.
First Iteration (Home Page): The first prototype we made addressed the hierarchy issues Ellen mentioned in our first meeting and set up the general structure we wanted to use for the layout of the website. We later adapted to the new color scheme after receiving the board’s feedback.
First Iteration (Volunteering & Donate): On the original website, the volunteer and donate options were either very minimal or nonexistent. As a result, we were in charge of adding a way for people to volunteer and donate at events hosted by Hands Together. We prototyped donation amounts for donators and a sign-up form for volunteers. We added more information about what the donations would be used for the final design and we also updated the color scheme.
For our final design, we added the approved color scheme and replaced stock images with photos of Hands Together students and staff. We updated all the information to make sure it reflected any updates within Hands Together since the last website was made.
Now, the new website has pages to contain information about the board, the programs, and the organization, as well as pages to better highlight the shop and encourage donations.
Since this was a client project, our redesigned website is currently live! Click here to check it out!
This was an amazing experience for my partner and I to not only improve my UX design skills but also to work with people in different fields. I had the opportunity to work with mostly Computer Science majors and I was able to witness first-hand how developers do their work. Before joining CodeLab, I never thought about how designs were implemented and coded but after seeing how difficult the process is, I learned the importance of cross-communication and understanding how your team members do work.
This was also my first client project and I had the opportunity to learn how to take constructive criticism and implement those changes into our designs. The Hands Together staff was incredibly supportive and kind and I am thankful for the experience.
Thanks for scrolling this far!If you want to reach out, check out the links below:
