top of page
E Learning Website Cover.png

Project Overview

Duration

3 months


Scope
Responsive Site

Role
UX Designer

Team

Content Editors

Product Manager

Front End Developers

Graphic Designer

STRUT Learning is an edtech company that provides personalized academic and standards-based Emotional Intelligence (EQ) / Social Emotional Learning (SEL) materials.

 

I took on the role as the UX Designer and Project Lead. I worked closely with the CEO, Product Manager,  Front end developer and led a small group of interns to redesign their marketing website.

 

The Challenge: 

Currently, STRUT Learning is looking to redesign their website to increase user engagement and demo sign ups  for their SEL (Social Emotional Learning) products. They wanted to keep their branding but wanted to add consistency to the colors, implement new features, and make the content more informative.

Solution

I designed a website with new added features and changed the color palette while keeping the branding throughout the website. Users now have a clear understanding of the different products that STRUT Learning has to offer and clarity of their company mission.

 

  • Added consistency to the color palette when keeping STRUT Learning's brand

  • Redesigned product pages and add detailed descriptions

  • Provided definitions for SEL (Social Emotional Learning) and EQ (Emotional Intelligence) 

  • Added product testimonials to show trust within new users

  • Personalized profiles to highlight relatability with our target audience

  • Set clear CTA buttons throughout the website, many users had a confusion with previous CTA

Before and After.png

Impact

I believe there are two things that contributed to this: the marketing team helped lead people to the landing page, and the designs helped increased the demo sign ups. With their impact, our goals were reached. However, it was not clear which method was more effective, therefore next time we can test the strategies separately and effectively track whether the designs or the marketing team help increased the demo sign ups. As for this phase, I would like to say that it’s a combined effort between the marketing and design team to reach the project goal. Thank you!

Screen Shot 2022-01-18 at 12.16.03 AM.png

DESIGN PROCESS

Let's dive deep into the project!

Design Process.png

Kickoff Meeting

In this meeting, I discussed the project goals and plans with the CEO. We talked about the user and business goals for this project. He wanted to focus on the Landing and Product Pages as those are the most clicked pages.  We talked about the timeline, constraints, target audience and I suggested to look over the current site while using Nielsen's 10 Usability Heuristics. This was a good framework to understand the usability of the current website. As the meeting ended, I made a project timeline for the team and prepared my next task for the first team meeting. 

STRUT Learning Project Goals.png

RESEARCH

Understanding the Client and Users

 

To gain a better understanding for this project, I started this project by getting myself familiar with the website and reading the previous user feedback. I started to analyze the main pages (Landing and Product Pages) in detail by following the principles from Nielsen Norman Group's "Usability Heuristics for User Interface Design"

 

The team has also got together to review the website individually. We have looked at previous user feedback as well to decide on our research goals.

Research Goals

  • To gauge the audience's pre-existing understanding of EQ (Emotional Intelligence) and SEL (Social Emotional Learning), and how much support may be needed

  • To discover and understand user's pain points when understanding STRUT's products. 

  • To learn whether the audience understands the solutions that are offered for SEL. (Social Emotional Learning)

  • To uncover competitor standards and features. 

  • To introduce new features that are discovered through research. 

  • To understand whether the product pages show clarity of what they offer

Competitive Analysis

Target Audience: Parents, Administrators, Teachers, Corporate 

Through  market research, many customers rely on testimonials to trust the product and company. With that were looking to add this as a new feature to add trust with our users. 

Competitive Analysis SL.png

USER INTERVIEW

Let's dive deeper with each user 

After understanding the website, I decided to do user interviews with STRUT's target audience which are Parents, Principals, Teachers and Administrators. I decided to focus on their frustrations and goals. When conducting the user interview, I've observed the user navigating the site as a first impression first before asking further questions to get an understanding of the structure of the website as well. I also focused on asking open-ended questions about their experiences to gain a better idea of my personas. 

I conducted 7 interviews on zoom. The interview questions focused on their current experience on the landing page, and the two product pages which are called eMojo and EQ360.

CAP 1 Research Insight.png

PERSONA

Meet Jenny & Kyle!  

Base on the research findings, I decided to create two personas to best understand our target audience and have a clearer idea of who I am designing for. I also wanted the team to reference off of this persona when understanding the designs. 

Customer Journey Map  

To visualize the end to end customer experience, I decided to make a customer journey map after creating the personas.

Customer Journey Map.png

SITEMAP

Reorganizing The Website Structure 

​For the website structure, we mainly wanted to focus on the "Products" section for this project. On the current website, they have a "demo" page and after discussing with the team, we decided to remove that page to replace it with a new feature called "Profiles". In this section, there will be three different profiles consisting of "Teachers, Principals, and Administrators/Corporate". In these pages, we wanted to focus on the benefits of why STRUT's products are here to help. 

process-deliverables-by-emily-hu-5.png

01. EMPATHIZE

02. DEFINE 

How might we improve user experience on the marketing website to increase customer engagement?

03. DESIGN

Rough Sketches & Low-Fi Wireframes 

I sketched low-fidelity wireframes on paper to get an idea of how I wanted my screens of the landing page and product pages to be laid out. After finishing my paper sketch, I've transferred the designs over to Figma as low fidelity wireframes

UI Kit 

The CEO wanted to keep the branding but also consistency. Through user testing, many users stated that the colors were harsh and loud. To improve the experience, we wanted to focus on making the website "friendly, calm, and easy on the eye".  I designed the color palette with the keywords in mind. It took a few iterations before settling on this color palette.

The UI Kit included the typography, color palette, photos and icons that I've used in the designs. 

UI Kit.png
LOW F.png

ITERATION

Design is never linear 

When transferring the designs into mid fidelity, the team went back and fourth of what features we wanted to keep, and the CEO had additional ideas to add to the designs. There were multiple versions before settling onto one. 

I decided to do a round of testing and made a couple of iterations that included: 

  • ​Adding a sentence above the products section to give a short introduction 

  • Moving the "profiles" to the top of the page 

  • Adding consistency to the CTA 

04. PROTOTYPE & TEST

HIGH FIDELITY PROTOTYPE

Let's dive into the design details 

Based on the feedback from the initial usability testing, I created the high fidelity prototype.

POST LAUNCH USABILITY TEST

What do users think?

For this part, I asked the same users I've interviewed during my research phase, with additional new users. There were a total of 10 participants. The usability tests were run remotely on Zoom and Discord. They were all recorded for further viewing. Participants shared their screen with me and were given tasks to complete and to navigate through the site freely as I observed.

View Usability Script

Four Main Tasks:

Task 1: Without using the navigation bar, how would you get to the eMojo page?

Task 2: Without using the navigation bar, how would you get to the EQ360 page?

Task 3: On the product page (EQ360 or eMojo) show me how you would want to learn more about the teacher profile.

Task 4:On the landing page, if you didn’t know the meaning of EQ (Emotional Intelligence) and SEL (Social Emotional Learning), how will you find the definition?

 

I also asked the participants about their first impressions of the website, and any feedback to improve the designs. I wanted to know how easy it was to navigate through the website as well.

 

Usability Test Findings:

  • All of the users were able to complete their task 100%

  • All of the users stated that this was an upgrade from the previous design

  • 8/10 of the users felt calm and neutral using the website

  • 3/10 of the users went to the navigation bar first to get to the product pages, however the navigation bar is not clickable (This was my error and for the remaining usability tests, I had to give a disclaimer before the question)

  • 7/10 of the users enjoyed seeing images of the products to know what they're going to be potentially purchasing/using

 

Overall, all the users had a positive experience and was really excited to use this website when it's live.

FINAL THOUGHTS

What I've learned 

With the final revisions, I'm really happy about how this project has turned out. I got to accomplish my project goals, and the designs are ready to be handed off to the engineer!

  • To recruit users early! It surprised me how fast the days go by, therefore recruiting users early is a must.

  • PRACTICE PRACTICE PRACTICE, when presenting my designs in front of the CEO and team, it's always best to have a run-through 1-2 times before the meeting. Write down all your thoughts, questions, and agenda so you're more prepared. It's totally okay to feel nervous.

  • Your first design is never the LAST design. 🙅🏻‍♀️ There's going to be multiple iterations along the way. Don't fall in love with the first design because you're gonna be heartbroken.

  • Your client is never going to agree with you 100% and that is okay. We learn from each other. 

  • DOCUMENT, omg. PLEASE document EVERYTHING. Documentation is so important. You get to see the growth, and sometimes you might resort back to your old ideas to think of new ideas. 

bottom of page