Torchy’s Family Foundation Portal
Creating an online presence for the Torchy's Family Foundation
Challenge
Torchy’s Tacos is a restaurant chain, based in Austin, Texas, with restaurants across multiple states and more than 5,000 employees.
The aim of this project was to create a website for the Torchy’s Family Foundation. This foundation allows employees and their families to make donations to Torchy’s employees who have been impacted by any tragedy.
How might we create an online presence for the Torchy’s Family Foundation?
Scope
The scope of this project included UX design, UI design and iterative development.
Constraints
We had 8 weeks to complete the design, development and quality assurance testing.
Implementation
The project manager worked out a timeline to complete the design, development and implementation of a Spanish version of the website and integration of GiveWP with Stripe for accepting donations.
Our Goal
The goal of this project was to create a simple, seamless portal for those who wanted to donate to the cause or apply for assistance.
Our Solution
We needed a website that was able to scale with time to show the stories of people who have been helped by the foundation while achieving the other project goals.
The intention of the website was to allow employees to learn about the Torchy’s Family Foundation.
What was necessary:
Members of the community needed to be able to make a one-time or recurring donations to the foundation.
We needed to link to an internal website where employees could sign up for payroll deduction.
We also had to consider what the website should look like, as we needed to incorporate the Torchy’s brand while differentiating the new website.
Results
The Torchy’s Family Foundation website was launched end of February 2021.
The Torchy’s Team launched a campaign to make its team and the community aware of the opportunity to give.
“Thank you for you and your team’s amazing work!” – Torchy’s Team Member
Our Process
Understand
We started by meeting with the Stakeholders to understand requirements and to identify the audience.
Defining Success and Business goals
The Torchy’s Family Foundation website would act as a resource for the foundation. It would be public facing, yet help guide internally by providing resources for customers and employees.
User Profile Types
The target audience was defined by research completed by the client’s internal team. Based on our conversations with the stakeholders, there were two audience types we would be targeting in our design.
Primary Audience:
- Team members who needed to request support.
- Team members who wanted to support the cause.
Secondary Audience
- Friends and family members of Torchy’s who wanted to support the cause.
Explore
Sitemap
We needed to think through how the user would interact with the website before we could design their experience.
A sitemap is a hierarchical diagram showing the structure of a website and defines a website’s taxonomy. The sitemap below shows the structure for the Torchy’s Family Foundation’s website.
We had to consider the ways in which the different user types would be interacting with the website. The team members would need to access specific resources for their experience, so we needed a page dedicated to those. All user types needed a way to donate and learn more about how the Foundation was benefiting the Torchy’s family.
User Flows
A user flow is a diagram that displays the complete path a user takes when completing task. While there are many flows that a user could embark on while navigating through a website; the user flow should portray unique user interactions.
These flows were chosen based on the website’s main goals which were defined during the kickoff meeting with the client.
The user flow diagram focused on the following user motivators:
- A team member who wants to donate
- A team member who wants to request assistance
- A team member that wants to enroll or unenrolled in payroll deduction
- Anyone who want to donate; one time or recurring
Create
Creating the digital experience; implementing a new-look while respecting the current brand.
Mid-Fidelity Mockups
We used the information architecture as a guide to explore varying layouts which enabled the users to reach the goals explored through the user flows.
Six, simple mockups were completed to explore how the user might interact with the pages and to determine how content should be presented.
Style Guide
Using Torchy’s as an inspiration, the Torchy’s Family Foundation look and feel was created.
We decided to use GoogleFont to improve speed and usability, but selected a font that was similar to the brand standard. We also wanted to use the same colors, patterns, and undertones as Torchy’s so the website would be easy to recognize with the brand.
The style guide would also assist the developers in building the project.
Check out the full style guide here.
High-Fidelity Mockups
Visual styling was added to the existing mid-fidelity components to create a detailed design. All typical interface elements, spacing, and graphics were added to create a realistic preview of what the developed website would look like.
Prototype
We needed to verify that the new look and feel complemented overall usability.
Being that we were on a tight deadline, we needed to ensure that the components would be quick for the developers to build.
We created an interactive prototype with the high fidelity mockups, so it could be tested internally to gauge development difficult and with the client to receive iteration feedback.
Validate
Based on rounds of feedback, we decided to tweak a few of the components to improve the visual hierarchy and to allow for quicker development.
The follow iterations were made:
- More images were added to create a sense of community
- Images were also increased in size
- ‘Damn Good’ SVGs were added to the banner to add dimension
- The mission layout was adjusted to improve the speed of development
- The featured ‘Success Story’ was iterated to display more character
Compare the iterations made to the homepage below and check out the final clickable prototype here.
