sharon dayoung lee
banner.jpg

Carnegie Learning Help Center Rebranding

Summer Product Design Internship at an EdTech startup, Carnegie Learning

 

Carnegie Learning Help Center Rebranding
Summer Internship 2019

 

Skills —
UI/UX design, product flow, wireframing,
visual system, branding, illustration

Advisors —
Madison Kalo and Sara Kozelnik

This summer, I joined Carnegie Learning for a 10 week product design internship. The first project I worked on as an intern was the redesign of the help center. The marketing team wanted a new visual for the help center with clear hierarchy and branding elements to create a cohesive experience for users.

 

Project Overview

The project started off with a short meeting with the product manager, Sara, who explained the core requirements and strategy for the help center rebranding project:

  1. The marketing team wanted to use help center as a way to increase engagement of first-time users.

  2. Delightful and engaging experience for first-time users as well as returning users.

  3. Incorporate Carnegie Learning branding yet minimalistic and clean design.

The main challenge of the project came from delivering a visual system that addressed the requirement from the marketing team (such as content hierarchy) that also successfully engaged the viewers to revisit the new help center/release notes page.

 

Process

Brainstorming —
I started out my process with brainstorming layouts for help center landing page. With responsive HTML/CSS implementation in the future, I worked with a 12 column layout.

 
 

Iterations —
Starting off with a grayscale design, I came up with four hi-fi concepts to present to my first meeting with the product manager and the marketing team. Based on their feedback, I iterated till we arrived at a design that all three teams were satisfied with.

 
 

In addition to the rebranding of the help center website, Carnegie Learning marketing team wanted a fresh look for their set of icons. All icons were created using Adobe Illustrator.

 
icons

Final Design

All wireframes were created using Adobe XD. The XD file was shared with the web developer for implementation. Below is a recording of a click-through interaction from the index page to the child pages.

 
 
Macbook 01 Copy 3.png
 

 

Click through interactions from index page to child pages.
Prototyped using Adobe XD.

 

 

Hi-fi prototypes of index page.

 

Artboard Copy.png
 

Hi-fi prototypes of child pages.

 

Takeaways

This project really helped me to understand the timeline of end-to-end process of product implementation in a corporate setting. Especially, I thank our front-end web developer, Tony, who was very kind enough to take me through a step-by-step process of help center implementation from sharing assets files for web to explaining the logistics of the back-end content management system. Overall, the help center rebranding project taught me that success of the product comes down to clear communication and collaborative effort.