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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Showing customized school's estimated quote in dollars and adoption cost breakdown.
Showing school's impact on pricing and department score comparison.
Showing school's book adoptions and recommendations to review adoptions.
Showing school's book adoption recommendations and actions to reduce or increase cost.