Rafter360 Insight

The purpose of this project was to create a simple way for our clients (colleges and universities) to do a cost breakdown analysis of their adopted books and find a solution to reduce cost.

Rafter Insight

Company Background

Rafter improves overall college access and affordability by making the cost of educational content a budgeted and predictable expense through a flat-rate access fee.

My role: As an end-to-end designer, I was responsible for defining the problem, creating wireframes, prototyping, organizing visual data, creating interaction and visual design, coding html & css and making the site responsive. I worked closely with the engineering team and a product manager to move the project forward, and participated in customer meetings with school's Provosts and CFO's.

1. Define the problem

The Business Challenge: When coming up with a flat fee for students, the schools had to estimate how much they should charge their students. The schools did not have a simple way to view the cost breakdown of their adopted books, nor could they find a way to reduce the cost easily.

The User Challenge: We had lots of data that we chould show, but the user wanted to see relevant data without being overwhelmed. The user wanted an easy way to reduce cost of the adopted books.

2. Explore solutions

In our research phase, we interviewed our schools’ provosts and CFOs about their current process for determining their content prices. We collected and analyzed the schools’ textbook adoptions data. We held brainstorm sessions, tried to find analogy products, and created personas.

The analogy products that we came up was FICO scores (credit karma). We wanted to rate each book and how the school is doing similar to the credit scores. The scores impacted the cost of the materials and how the schools is going to pay for their signed contract.

We also thought that comparing cars was a good analogy for the cost analysis that we can provide for our customers. We already had a dashboard where we showed the schools their guardrails and how they are doing historically. But we could show more relevant information for them.

3. Early Sketches

Insight Comic

This one example of storyboard I created for this project. The point of the story board is to get an idea how the users would use the app in an everyday environment.

If I can imagine the personas using the app and how they interact with the app everyday, I can better understand the user and make a tailored user experience.

Insight Comic

I decided to make sketches for the initial wireframes. I wanted to capture what kind of data we wanted to show to the user and have an idea of how to organize and reveal the information architecture. The wireframes also allowed us to talk about if we are going in the right direction and how we want to move the project.

Insight Comic

This is the flow diagram that I presented to the developers, so they can see how the pages are linked and organized. This was a separate Saas app. The user would land on the dashboard (or landing page), then would pick from three choices - prise estimate, audit, and toolkit modules. Each module would go the pages or information presented on the diagram.

Insight Comic

After wireframe critique and discussions, I created these medium-fidelity mock-ups. I decided to create a more fleshed out mockups because we had a component library and styleguide that I could reuse. This allowed me to quickly create mockups based on the original sketch wireframes. In this stage, I explored the type of graphs and kind of data we wanted to reveal to the users. The mocks allowed us to have more discussions about information organization and what to show to the user.

4. Design Iterations

Based on the previous mocks, I created a high fidelity mock-ups that we presented to the clients. We wanted to hear feedback if we are presenting correct information and if they understand the graphs that we are presenting.

Insight Comic

These are cost breakdown pages tailored to analyze schools data and have a top level view of adoptions that have the most impact on the cost.

Insight Comic

The price toolkit pages is our recommendation and solution page. It allowed the users to minimize the adoption costs of books by eliminating or adjust the most expensive inventory.

Insight Comic

I designed the dashboard last. It was similar to other dashboards in our system, but we wanted it to have a marketing feel to it. And, the user would have access to it before signing in into our application.

5. Final Result

Rafter Insight 01

Showing customized school's estimated quote in dollars and adoption cost breakdown.

Rafter Insight 03

Audit Page
Showing school's impact on pricing and department score comparison.

Rafter Insight 02

Toolkit Page
Showing school's book adoptions and recommendations to review adoptions.

Rafter Insight 04

Review Module
Showing school's book adoption recommendations and actions to reduce or increase cost.