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
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!
DESIGN PROCESS
Let's dive deep into the project!
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.
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.
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.
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.
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.
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.
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.