Hands Together
Winter/Spring 21 Spark Project
Introduction
Our client was Hands Together, a non-profit located in Santa Ana dedicated to fighting multi-generational illiteracy and poverty. They offer advanced early education to promote academic excellence among preschool children. Hands Together wanted a complete revamp of their website and rebranding. The features they wanted to be added to their website included: a donation feature, shopping and event registration, and payment methods.
Our Team
Timeframe
We began this project in January of 2021 and continued until May 2021 for a total of 16 weeks.
Tools
The tools we utilized were Figma, MongoDB, React, NodeJS.
The Project
View the completed project at: https://www.handstogether-sa.org/
Design
User Research
The first step in our process was to conduct user research. We first broke down the demographics of Santa Ana, where the organization is based.
Population breakdown
- Other (Hispanic) — 40.8%
- White (Hispanic) — 33.8%
- Asian (Non-Hispanic) — 11.4%
- White (Non-Hispanic) — 9.42%
- Black or African American (Non-Hispanic) — 1.4%
Pain Points
We had a meeting with Ellen Mogasemi, the Vice President of Hands Together, earlier this year to discuss the main aspects of the website 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 didn’t encourage users to take the actions Ellen wanted them to take, and there wasn’t a way to get volunteers from the website.
Ideation & Low-Fidelity
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 to support the goals.
Modernizing the UI: Typography and Color Schemes
First Iteration Logo (left) and Final Logo (right):
First Iteration Color Scheme:
Final Color Scheme:
After the Midterm presentations, the Hands Together Board reviewed our designs (logo, color schemes, fonts). They commented that they wanted a brighter color scheme to fit the educational theme. They also wanted another logo because they thought the old logo looked too much like heart arteries After hearing this feedback, Sienna proposed three new color schemes and they ultimately chose the red, orange, and blue one. As for the logo, to fit the family-friendly tone, we drew two hands on Adobe Illustrator with the new chosen color scheme. These hands are supposed to look like hand paint.
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 Hands Together website, the volunteer/donate options were either very minimal or nonexistent, so we were in charge of adding a way for people to volunteer and donate at events hosted by Hands Together. As shown on the right-hand side, we prototyped donation amounts for donators and a signup 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.
Final Designs
In our final design, we added the approved color scheme and replaced the stock images with photos of real Hands Together students and staff sent to us by Ellen. We updated all the information to make sure it reflected any updates within Hands Together since the last website was made.
Now, the new site 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.
Development
Authentication/Authorization (JWTs)
The front-end for the admin dashboard is protected behind a simple authentication system that makes use of an external database to store and validate admin credentials. The backend connections and routes made use by the admin dashboard are also secured through the use of JSON Web Tokens (JWTs). Upon successful authentication, access and refresh tokens are stored in the site administrator’s browser cookies. These tokens are then used to validate all future backend requests (database queries, access/update orders, etc). This system prevents unauthorized users from accessing sensitive information and functionality made available through these backend connections, providing the site with an added layer of security.
Shop and Checkout
The shop page and the admin dashboard together allow Hands Together to list items for sale and process payments through Stripe. When viewing the shop, site visitors can view all items available for sale and add items to their cart. Carted items are stored in the browser’s local storage to allow items to stay in the cart even after leaving the site and returning later. Once a visitor is done shopping and prior to checkout, they are asked to provide a shipping address which is passed into Shippo to calculate shipping rates for their transaction. The carted items and corresponding shipping rate are then passed to Stripe for checkout.
In the Stripe checkout session, site visitors are able to provide billing and contact information (email address). Once Stripe verifies the billing information and successfully processes the transaction, the visitor is redirected to a page acknowledging the completion of their transaction and NodeMailer is also used to send the visitor an email confirmation. Meanwhile, the backend makes the appropriate database requests to update the shop’s inventory.
A similar transaction sequence is implemented to handle donations.
Image Hosting
With the numerous photos on the site that change as items are sold or events come and go, the site needs a way to dynamically store images. As new items and events are created, items are stored in an Amazon S3 bucket, with unique links for each. These images are pulled from the database for display on the site using their unique identifiers.
Volunteer Signup
One of the objectives for the website was to introduce an easy way for visitors to become involved with Hands Together and volunteer. To that end, we built a page designed to introduce upcoming events and allow users to sign up. At first, the vision was to allow users to sign up to specific events, but after further discussion with Hands Together, we have decided to register volunteers as individuals and allow Hands Together to reach out as needed. The website would make a call to the database to sort through the existing events, pull the 3 most upcoming events, and then display them as the highlight on the page. At the bottom of the page, users are able to register their information and it is then posted on the database for future admin access.
Front-End
All of the pages on the website were designed using a combination of React elements, bootstrap, and a plethora of media queries to create a responsive experience that translates across all screen sizes. Naturally, many pages and layouts were redesigned to provide a friendly user experience that continues to emphasize the action items of each page (objective of the organization, donation button, displayed volunteer events, etc). We wanted to ensure the accessibility of the website across all devices to maximize the engagement of users.
Takeaways & Challenges
Applying Newly Learned Concepts
The majority of the developers working on this project had no prior experience with web design and this was their first opportunity to apply newly-learned skills. This meant that some difficulties and challenges required more effort to troubleshoot and some features took more time to implement than they would have for a more skilled team, but with the help of considerate meteors and access to the internet we successfully accomplished all of our tasks and gained a deeper understanding of the tools we used.
Responsive Web Design
As we worked on adapting our website to various screen sizes, we discovered that our design did not translate well on certain displays. We had to re-think the composition of content on our pages to retain the intended emphasis of each page while still providing a smooth user experience. When acting independently, we quickly realized that the proportions of elements on different pages did not match, so we began consulting our designers and coordinating with the other developers to maintain consistency. For some pages that meant creating a new wireframe, for others, it was resizing the elements or changing the spacing between them. Either way, it required thoughtful implementation and teamwork.
Cross-Functional Teams
Working on a project with significant design and development components made communication vital to our success as a team. For many of us, this was our first time working in a cross-functional team on a web project, so it took time to determine how to best work together. We found it was especially important to have meetings between both the designers and developers at the end of each sprint, so designers could provide feedback on the progress of the frontend components and so developers could seek clarification on how each component should be implemented.
Closing Thoughts
As a whole, our team learned to apply the skills we learned during the boot camp to the real world. We learned to use different techniques like Bootstrap and media queries to format our pages. We gained a stronger understanding of software development as a whole and how the integration of design, development, and client communication come together to form a final product. We’re extremely grateful for Hands Together for allowing us to have this opportunity to learn and refine our skills to create a product that will positively impact many.
