The Michigan Daily
Helping Students Reach Their Full Potential
In September of 2018, The Michigan Daily's web team created a tool that would help students visualize the grade distributions of classes at the University of Michigan. The goal is to help students reach their full potential by providing them with the information they need to make smarter choices about their academic futures.
I was a part of the founding design team that conceptualized GradeGuide's initial designs and created new features upon its launch.
Identifying Opportunity
Course planning is a stressful process for students
In September 2018, The Michigan Daily's web team was brainstorming ways to assist their community beyond the TMD's web and mobile content apps. We identified courses as a uniting factor for the community. Therefore, we decided to focus our attention on pain points relating to class experiences at the University of Michigan.
Being a student-run web team, we shared similar experiences with course planning. Our team felt the course planning process was long, tedious, and stressful. The process is high-stakes and requires students to process information from multiple sources.
Upon this consensus, we realized there was no course planning tool for students. We believed a dedicated resource would reduce stress caused by searching multiple sites for course information.
Overview
My role
For the start of this project, I was a product designer responsible for creating the branding, concept designs, and iconography. Additionally, I assisted in conducting user research.
At the end of this project, I was the product manager responsible for conceptualizing and developing four new features.
Since its release, GradeGuide has driven over 250,000 uses and a 5 percent revenue increase for The Michigan Daily.
Duration: Sep 2018 - Dec 2019
Team: 4 designers, 6 engineers, 1 PM
Skills used: branding, product design, product management, product strategy, user research, visual design
Our process
User Research
Focus group
Validation
Heuristic evaluation
Design phase
Branding, iconography, concept designs
Launch!
User Research
Affirming our initial sentiments
We wanted to affirm our feelings towards course planning by conducting a focus group with other University of Michigan undergraduates. The focus group was optimal because it could lead to spontaneous reactions and a good group dynamic. We wanted to understand:
-
What do students find frustrating about the course planning process?
-
What factors do undergraduate students consider before registering for a course?
Focus group reenactment
We identified the following:
-
Other students found the course planning process stressful and tedious because of its high stakes and information overload.
-
Students consider their degree requirements, timing, difficulty, professor, and reputation of the class before registering.
-
A laptop is the most common device used for course planning because it enables students to have multiple screens open for comparison.
Our Solution
A web-based course planning tool providing data visualizations of course data and sentiments
Our goals for this product were:
-
Help students reach their full potential by providing them with the information they need to make smarter choices about their academic future.
-
Be transparent about data sources.
-
Have a design that would work well with other universities.
-
Earn money for the TMD from advertising.
Branding
GradeGuide's branding needed to express utility, honesty, minimalism, and aesthetics to be understandable.
GradeGuide's brand started with a color scheme. The Michigan Daily is independent of the University of Michigan. Therefore, our branding strives to be reminiscent but not identical to the school's brand. For example, we avoid the colors maize and blue because they are a prominent part of the University's branding. Additionally, we wanted to reserve GradeGuide's potential to be leased to other schools.
Colors to avoid
To keep the design inviting but minimal, we decided to use bright neutrals and avoid straight black. We avoided transition gradients because they did not appear in every data set.
The final color palette
Then, I created a set of icons for our sentiment data so users can interpret information quickly. I tested the icons' functionality with my design team. Icons were approved if our team unanimously voted. This ensured the likelihood of other users understanding our icons.
Workload
Interest
Understanding
Graph
Expectations
Desire to take
Design Phase
Expressing the Daily's mission in a new light
I was responsible for designing GradeGuide's homepage. My main goal was to create a functional and efficient user experience.
1
2
3
4
Homepage wireframe
1. Goal: Be transparent about data sources.
Placing resources about data sources at the top emphasizes GradeGuide's commitment to honest data.
2. Goal: Provide an efficient user experience.
Searching is the primary function of GradeGuide. Placing the search tool at the center means users don't have to spend time searching for this function.
3. Goal: Provide an efficient user experience.
Course-related content by TMD writers gives students without a specific course in mind a starting point.
4. Goal: Make money for TMD through advertising.
Advertising above the fold allows TMD to charge for sponsored content.
Once the structure of the home page was settled, it was time to add visual design. I wanted stressed students to feel at ease when they opened GradeGuide. Therefore, I opted for minimal and playful concepts.
High-fidelity concept designs
The biggest challenge I had while creating concept designs was balancing functionality with visual design. I overcame this by prioritizing functionality. Our research found the target audience will be stressed when visiting our site. Too many design elements may cause information overload and overwhelm our users further. Therefore, I removed potentially distracting visual elements like background color and images. Instead, I opted for a minimal design adding visual elements essential to GradeGuide's functionality or brand representation.
SPONSORED
The final home page design
New Features
Improving usability and furthering GradeGuide's mission
After GradeGuide was launched, I became the product manager. My goal as the product manager was to:
-
Improve the usability of our site
-
Further GradeGuide's mission by providing more data based on the considerations we discovered from the focus group session
I accomplished these goals by collaborating with engineers and designers to create the following features:
Multiple ways to search
GradeGuide's initial search tool only afforded users to search courses by number. However, a usability test revealed some students prefer to search by name. Therefore, I decided to work with engineers to make GradeGuide's search function accommodating to both search styles.
Course title
If students know the title of their course, they can enter it, and they're on their way.
Searching by title
Course number
If students can't recall the course name, they can search by subject code or course number to browse potential options.
Searching by number
Course comparisons
Our focus group revealed students have multiple tabs open to compare data while they plan their courses. To relieve some of the pain that comes with moving between windows, I designed a course comparison feature. Students can now compare up to four courses.
1
2
3
The course comparison feature
1. Add or remove courses
Having this function on the side offers the shortest task flow.
2. Results
The results panel answers common questions asked when comparing courses. This makes an efficient user experience because users don't have to calculate the data.
3. Summary
The summary cards interpret the data visualizations. Verbal affirmation makes the data faster to interpret.
Course information with sentiment summary
Our focus group session uncovered students consider degree requirements, degree requirements, timing, difficulty, professor, and reputation of the class before registering. At this point, GradeGuide only accounted for course difficulty. We accommodated for difficulty and reputation by designing a panel that displays student sentiments from semester surveys. I collaborated with TMD's data team to create a scoring system. We found listing percentiles to be the most consistent display.
The course sentiment panel
Course information with sentiment summary
Our focus group session uncovered students also consider the professor's reputation. The professor card aggregates data from historical course ratings and internet sources to provide greater insight into the quality of teaching.
Professor reviews
Build and Launch
Prioritizing new features based on impact and effort
With a live site and small team, I had to prioritize which features we would design, engineer, and launch first. I used a matrix method determine the effort and impact each feature would have.
1. Multiple ways
to search
2. Course comparisons
Impact
3. Course sentiments
4. Professor reviews
Effort
1
1. Multiple ways to search
This feature had a high impact on usability. Its implementation only required a backend adjustment by engineering. Therefore, it was given priority.
2. Course comparisons
This feature had a high impact on usability. However, it would require more effort because the design and engineering team would have to create new pages. Our design team began constructing wireframes while engineering adjusted the search tool.
3. Course sentiments
Course sentiments would require the most effort because data, design, and engineering had to collaborate to make a cohesive panel. However, it would have a high impact because of the data it would provide our users.
4. Professor reviews
Professor reviews have a low effort because it would follow a similar model to the course sentiment panel. It does not provide as much information relating to courses, so its impact was the lowest.
Results
250k +
Sessions
In the first release cycle (3 months) Grade Guide hit 250k + uses. Users came back to our site week after week as class registration progressed and people's circumstances changed
$
+ 5%
Revenue Lift
Generated a 5 percent increase in revenue year-over-year for the business overall
4:50
Avg. Session Time
Users spent almost 5 minutes per session diving into course details and comparing courses across the university.
