PelotonU – UX Design

PelotonU is an organization that offers students a clear, debt-free path towards a college degree. They had been getting nearly all of their clients by way of word-of-mouth and their person-to-person outreach efforts. My team — Areebah Ajani, Coy Jennings, and myself — was tasked with making their online presence a functional starting point for prospective students.

My Involvement

For this project, I created most of the initial wireframes, as well as the wire frame annotations. I drew the user journey illustrations and the prerequisite illustrations. I took part in stakeholder interviews, and I implemented changes in design iterations based on the findings from usability testing conducted by my teammates. I also put together the presentation document and helped present to the stakeholders.

Initial Findings

Early on in the process, it became apparent that the users of PelotonU’s website had two distinct reasons for visiting, so we created personas to reflect that.

We felt that the website was geared more towards the secondary persona, that of an area businessman who might help PelotonU’s cause in the form of financial support, and who might funnel students towards PelotonU. If the website was going to serve as an entry point for students, it was going to have be geared toward our “Reggie” persona, who represented a potential student.

A website for students has to be designed with students in mind.

We set about creating a workable design for students. Our research indicated that all of the young people we interviewed had access to smartphones, but relatively few had regular computer access. We decided to focus on scannability on both the desktop and mobile site designs.

User Journeys

PelotonU offers a complicated service. They provide testing, training, and one-on-one mentorship over the course of several months. During that time, they match a student with the degree program most suitable for their aptitudes and goals. Then PelotonU helps that student achieve a degree in the program they’ve been matched up with. It’s a lot to take in for a prospective student. No matter how you talk about it, the text is going to get a bit dense. We were aiming for scannability, not density. So we felt that illustrating the process would make a lot of sense. In the above series, a student goes from his job to PelotonU testing, gets 1:1 mentoring, and gets accepted into a degree program.

The bicycle here is intended to echo "peloton," which is a cycling term.

PelotonU requires that its students be employed, have reliable transportation to the facility, and have a high school diploma or equivalent. We felt like this could also be represented easily by illustration, which would enable us to remain easily scannable and to balance the design.

Wireframes

I created these wireframes in Sketch, which is a really great, intuitive tool. Within Sketch I also made adjustments to the wires based on findings from usability tests.

Style Guide

The tone of the copy in a given project directly affects the user’s experience with it, and PelotonU was no exception. The tone of the copy on the site was geared more towards geared towards academics and donors, not towards prospective students. To that end, I drew on my experience as a copywriter to create a 15 page style guide for PelotonU to use moving forward. You can check out the Style Guide here.

Annotations

We felt that it was important for our stakeholders to understand the UX design decisions we made. To that end, I produced full annotations for every page we made for PelotonU.

Results

The team at PelotonU was super fun to work with, so it was great when they were receptive to our findings and designs. In adopting our design for their website, they’ve also incorporated a lot the original copy (“Get a degree, stay debt-free”) and illustrations I produced for the project.