Real World Classroom

Insights

Client: Real World Classroom (Educational Inititative partnering with a legitmate client)

Team: 2 Designers, 2 Developers

  • Myself

  • Austin Wright

  • Matthias Bedgisoff

  • Alexandra Arvisu

Length: August 2018 - Early December 2018

Audience: High School Administrators and Parents

Tools: Sketch, Adobe Illustrator, Eye-tracking Program

My Roles: Research, Design, Testing, Documentation

The Problem

Our client was seeking to maximize the traffic to their website, which in turn would create business for them from schools opting into the financial education model that Real World Classroom provided. While the website was designed nicely, there were parts of the site that needed reviewing and changing in order to present the information to the viewer as quick as possible and help the audience gain interest in Real World Classroom. The site was receiving views, but they were not converting into clients. On top of site views, the client wanted to branch out into social media channels.

...parts of the site needed reviewing and changing in order to present the information to the viewer as quick as Possible

img4.jpg
img1.jpg
img5.jpg

Screens of the website as it looked at the start of this project

The Process

Research

As with most projects, we first took to researching what specifically was fueling the client's issues. We created a heuristic markup of the website and called out areas where design principles were being broken or not being used.

Eye-tracking: In addition to the review, we arranged for a couple of individuals to participate in an eye-tracking test with the existing website. This was a great opportunity as it allowed us to pin-point exact areas of the site where a person was looking as they viewed the site. We found that much of the text was being glanced over and not actually read, while the viewer was spending more time gazing at graphics that had little to no relevance in terms of providing information. With this test, we were also able to see what interactive sections of the site were difficult for viewers to use, so we could plan better when re-designing.

In the images below, the orange circle represents where the user is looking and the size of the circle depends on how long they were focused on the item on the screen. In the largest image below, it can be seen that the maze animation was an issue as it detracted the viewer away from vital information on the page

We found that much of the text was being glanced over and not actually read...

img8.jpg
img7.jpg
img9.jpg

Screens of the eye-tracking test showing where and for how long the viewer looked.

Surveys: We also reached out to high school administrators and parents of high school students in the state of Utah and had them participate in a survey about their experience with financial literacy in schools and what is offered. The purpose of this survey was to determine the current state of financial literacy in high schools, what parents and administrators wanted, and how they could get new curriculum in their classrooms.

Personas: Personas were created so that we could create based on results we received from our survey. We based one on a high school teacher and another on a parent of a high school student. Each persona showed a greater interest in their students/children succeeding as much of our survey results were parents and teachers agreeing that financial literacy is not taught effectively, and that they would want a more effective curriculum if available.

DGM_2240_project_brief_V3_Page_08.jpg
DGM_2240_project_brief_V3_Page_09.jpg

Personas created for the project

Surface Comps

Once we had gathered qualitative research data, we used the results to create mockups and surface comps that improved upon the existing website. We removed much of the copy on the site and coupled the existing copy with relevant images, making it shorter and easier to read at a glance. We also expounded on accent colors throughout the site to draw attention to particular areas of importance and re-worked the “unit” menu, so that information selections weren’t hidden.

threed_mockup.png
threed_mockup (2).png
threed_mockup (3).png
threed_mockup (1).png
threed_mockup (4).png

Mobile screens for the updated site

PIVOT Session

Just after the surface comp stage, we were informed by our client that the survey portion didn’t fit their expectations and that they were hoping for research conducted in states such as Texas, Alabama, Virginia etc. as these were focus areas for the product. We took this time to clarify the outcome that the client was wanting and how we as a team would deliver. While the surveys didn’t affect the surface comps a great deal, we needed to get correct survey information for our client so that we could provide a solution that met their needs. We reached out to high schools through the states listed above, and this time, focused on high school administrators and specifically financial literacy teachers. Although it set us back on our schedule slightly, the pivot allowed us to re-focus our efforts and make sure that we were heading in the right direction. It gave us the means to be able to deliver a product that our client was happy with.

Although it set us back on our schedule slightly, the pivot allowed us to re-focus our efforts...

The Solution

Having rebuilt from our pivot, we presented our findings to our client along with a marketing strategy that would help drive traffic to the site and accomplish the goal of educating parents and administrators about Real World Classroom and in turn, nudge them to sign up for the curriculum. We explained the elements creating difficulty in the existing site and backed up the claim with the eye tracking test, as well as our heuristic markup. With these areas of research, we were able to convince our client that changes were needed to the site, as well as clearly show where the changes needed to happen.

As for the marketing strategy, we took data from the surveys to determine what platforms teachers, administrators, and parents use most to find out about curriculum. We found that Twitter and Facebook were the most used for updates, so we based our strategy around these platforms. As a solution to cut down on copy for the site, but still maximize awareness and social content, we proposed that the client use the content that we cut from the site to make social media posts, in turn, driving traffic to the website and product.

Outcome

After presenting our solution to our client, they decided to make certain changes to their site such as removing visual clutter on pages and re-working interactive elements so that they are easier to use or present information better. The site was updated from being very copy heavy to having effective bite-size pieces of information for viewers to take in and digest easily. Although some elements remained on the site that we recommended be removed, the client was able to use our guidance to improve those elements to where they could be relevant to the site. With this being an educational initiative, we were not able to receive numbers on the site views to compare but as the client using our case study, we assume that it benefitted the client.

the client was able to use our guidance to improve elements to where they could be relevant to the site

What I Learned

Simply, I was able to experience rejection from a client and it was an opportunity to reflect on soft skills in terms of understanding what was missed during the initial meeting to determine the project. It was also an opportunity to clarify and listen to the client further and really understand what they wanted so that we didn’t lose more time on our research. The pivot was overall a humbling experience that I was able to learn from. 

...an opportunity to clarify and listen to the client...