

College Credit Hub for Students
Client:
Study.com
Role:
Research, UI/UX Design, Visual Design
Project Type:
Product Feature Design
Duration:
2 Weeks (Sprint)
Study.com
Study.com is an education platform with thousands of hours of course-based, short-form video lessons that offers test preparation, college credit and more.
The Project
At Study, I was tasked at creating a “credit hub” for their College Accelerator product. Study.com offers video courses that when completed, would earn students real college credit. The hub doubled as both a promotional tool, and and informational tool for students to check that their school would honor the credit earned through the platform.
Project Goals
- Help Students confirm their school would accept Study.com credit.
- Help amplify existing schools Study.com had a relationship with.
- Straight forward and easy to find information for busy individuals.
- Changes should not effect search engine page ranking.
The Process
01
Research
- Project Goals
- Customer Personas
- Development Requirements
02
Architecture
- Sitemap
- Initial Sketches
03
Interaction Design
- User Flow
- Wireframes
- Design Patterns
04
Interface Design
- High Fidelity Designs
- User Testing
05
Development Hand-off
- Asset Export
- Design Documentation
- Iteration
Research & Data
Information & Research
Being an all new feature type for Study, we met with existing credit seekers and existing users to get a better sense of the information they might be looking for, and where they may naturally go to look for it.
The current user experience was a lot of back and forth with customer support and college teachers to try and confirm credit acceptance.
Pain Points
No automated flow or central location existed for this type of information.
Customer support was tasked with trying to track down and answer this information manually.
Third party schools had no location to refer students to for this information.
Desires
Give credit seekers a quick tool to find their school and the courses they could take that would transfer.
Alleviate customer support team from being constantly asked this information.
Create a “hub” or mini-site that can scale and feel self contained from the parent site.
Sitemap & User Flow
Based on the user needs and developer requirements, we uncovered additional pages that we would like to have the hub scale up to. To save some time within the team sprint, I doubled up the user flow with some very basic wireframes. From here it became even quicker to mockup the high fidelity page comps the development team needed to get building.
At this stage we also identified ways to update the menu structure and navigation to keep the information self-contained and away from the additional noise of the main website. It allowed users to focus on the information they were looking for.

Wireframing
With pages that needed a bit more fleshing out, I produced rapid, lo-fi comps where users, devs, product owner(s) and I could double check information. We use this time to identify any missing information, gather feedback and double check SEO requirements.
Also at the stage, I take the time to write in basic marketing copy and headlines to speak to the viewer and fit the tone of the brand. When writing my own content at this stage, it saves the copywriting team time to get a feel of what we’re shooting for and to word-smith into a final state.

Page Comps
Using the established design system, the high fidelity page mockups could be completed for the dev team to reference for build.
Along with full page comps, some sections or modules were isolated and given a design pass to help speed up the dev process further.
In some cases, we needed additional iconography and supporting assets. Those items I produced while designing the full resolution page mockups.
Results
The Credit Hub saved multiple hours of searching on all sides. Credit seekers could find credit information very quickly, and had pages they could send their instructors and teachers to double check and confirm.
The customer support team saw a huge decrease in credit & school related questions and support tickets they would have had to field.
These pages also received great page rank on search engines which led to more organic traffic and new customer sign-ups. Over time, this hub or mini-site was easily scaled up to accommodate more schools and information.
- Tags: Adobe, App, Design System, Figma, Mobile, Product Design, UI, UX, Web