Overview
Duration: 2 months
What I did: User Research, UX/UI Design, Front-end Coding
Platform: Web, Mobile-Web
Team: Retention and Engagement
During Course Hero first major rebranding, I was in charge of redesigning the global header and the site wide navigation. The new header focuses on easier content discovery and better search experience (the end result was overwhelmingly positive, a 37.5% increase in internal search rate).
Problems
- Old brand styling
- Low engagement
- Not responsive
Design Process
Card Sorting
As of 2016, Course Hero offers more than a 8 different products for a variety of different types of users (students, tutors, and educators). In order to visualize the information architecture of the site and set priorities, we labeled the different products and services on cards and had a card sorting activity with the stakeholders as well as users.
Low-fi Prototype
After information architecture is sorted out, I started creating the layout of the navigation. Some critical decisions had to be made: is it going to be a one-decker (where everything is on a single bar? Or is it going to be a double-decker (where the search bar is on it’s own row)? How many layers of drop-downs should we have?
Final Solution
Better Micro-interaction
Micro-interaction was another key part of this project. We tested several variations of the animation with our users to make sure we craft delightful, yet not distracting micro-interaction. Feel free to check out Course Hero’s website to see the final implementation.
Search bar
Navigation Drawer
More Actionable UX Copy
The most difficult aspect of this project is perhaps the copy of the navigation. Our data shows that over 30% of our daily users are first time users. Thus, our navigation should also cater to those who know nothing about our site — communicating what we offer at a glance, but not overloading them with tons of information.
Responsive Design
Last but not least, to account for the short comings of previous navigation (which is not responsive) we designed the mobile-web experience of the navigation, so that it’s mobile and tablet friendly.
Impact
The new header had a significant impact on users’ behavior. We have seen major wins on various important metrics such as conversions, internal searches, and mobile-web usage.