Torus provides a way for teenagers to find after school, weekend and summer programs based on their interests.
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.
Building the Site
Several key areas of the site required extensive UX and development efforts.
Search
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
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
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
Search
Program
User Profile
