Sharon Dayoung Lee – Carnegie Learning Help Center

Responsibilities

Concept iterations, prototyping, and developer hand-off

Team

Individual project

Duration

2 months

Tools

Adobe XD

Help Center empowers teachers to make the best use of Carnegie Learning content materials.

Carnegie Learning Inc. is an ed-tech startup based in Pittsburgh that specializes on AI-driven math tutoring software for secondary education. At the end of the internship, I shipped the redesigned help center with a focus on improved usability and visual language inspired by the corporate branding guideline. The rebranded help center website resulted in a 200% increase in unique page views and an increase in average session duration. You can view the help center here.

Problem space

The marketing team wanted a new visual for the help center that aligns with Carnegie Learning branding.

The help center is a platform where the teachers can have their inquiries answered and discover other Carnegie Learning products that they may not be aware of. However, the current help center suffered from unintuitive navigation, outdated visual language, and poor usability.

Approach

I started the project with a survey of the corporate branding guideline and the visual language of the current Carnegie Learning website.

The initial help center website was a rudimentary form of plain HTML, which lacked hierarchy and usability. I started with a survey of the current Carnegie Learning website for reference. From the branding guideline, I noted the repetitive use of shapes, and four color variation based on the primary blue contrasted with the deep black color used through out the content materials.

Screenshots of the Carnegie Learning homepage

Approach

Concept exploration based on HTML/CSS structure with consideration for future implementation

Based on the findings I delivered lo-fi wireframes to play around with core functions on a rough skeleton layout. Since I had a working knowledge of HTML/CSS, I drew myself a mental model of how my design would be implemented from a web developer's point of view while coming up with the lo-fi wireframes.

Lo-fi flow exploration of different page categories within the help center

Once the skeleton structure was fleshed out the marketing, product manager, and I got together as a group to brainstorm on a direction for the help center. From this meeting, both the marketing team and the product manager gave me various constraints, such as information hierarchy, for me to work around. During the process, I suggested a new iconography system for the website that better aligns with the visual vocabulary of Carnegie Learning.

Concept explorations through double-diamond approach

Final outcome

As a result of the project, I delivered a completed wireframe for the redesigned help center. As the users first land on the help center website, they are greeted by an eye-catching blue background with minimalistic and intuitive set of icons of the six products. This way users can easily navigate to the product of their inquiry as well as are acquainted with all the Carnegie Learning products at once.

Impact

The final wireframe was refined and improved through collaboration with a front-end web developer. Through the collaboration process, I was able to learn more about how CMS works in a real work setting and how designers can design accordingly for a smoother hand-off process.