Heather Finn

Torus

Torus provides a way for teenagers to find after school, weekend and summer programs based on their interests.

Homepage

Research unequivocally shows that young people participating in out-of-school programs demonstrate cognitive, psychological and social gains, as well as improved academic and career success. However, there are few ways for teens to access information about these programs without the help of counselors, teachers, or other adults.

Torus aims to bridge this gap by offering an easy, searchable, and filterable list of programs. In addition, they can apply to multiple programs through one site. Organizations can easily submit and maintain their program listings, ensuring up-to-date and comprehensive information.

My Contribution

I focused on the UX and design with some front-end development.

Design

I defined the design of the site, as well as a style guide to make it easy for the site to grow over time.

Development

I wrote CSS and JavaScript to bring the design to life, including bringing in a JavaScript library and framework to speed up future development.

Data

I set up Google Analytics for the site and included custom scripts to track key information, such as what visitors filter by.

Creating a Design System

To decrease the amount of time spent designing and developing new features for the site, I consolidated all design patterns into a style guide. The guide contains details for branding, code conventions, elements, and components. In addition, I included code samples to make it easy to copy and paste starter code and modify the labels, descriptions, and other content. Importantly, we reuse particular patterns in various contexts so they needed to be robust and adaptable.

Example of one of the personas created for this project, featuring a family of travelers

Example of pages from user research report

Building the Site

Several key areas of the site required extensive UX and development efforts.

Search

Style tile with photos of volunteering and pink and turquoise pastel palette

As the place teens would spend most of their time, creating an experience that is fast and works well on mobile was critical. We also wanted it to feel responsive to every input by the user as they narrowed down the options available.

Applications

Various design elements with gradients and hard edges

We want teens to return to the site and use it as a hub for organizing and applying to programs. Wishlist and application features provide invitations to sign up on the site. The added benefit is that it makes it much faster to apply to subsequent programs.

Converting to React

Photos with white boxes and text overlaid in a clean grid

As the site needs grew more complex, we determined that using a JavaScript library and framework would speed up future development efforts and reduce bugs going forward. I started with our most complex page, converting the jQuery to React and Redux.

Completing the Design

The final design included a combination of public-facing pages, areas for registered users to manage their applications, and a place for organizations to list their programs.

Homepage

Homepage

Search

Log in

Program

For travelers

User Profile

Traveler sign up form

View website