Usability & Interaction Design

high Tech Kids

project overview

The Client

High Tech Kids (HTK), is a non-profit organization that offers STEM programs for Minnesota’s youth. Operating as the local chapter for the international organization FIRST, High Tech Kids services tens of thousands of students through robotics programs and state wide competitions that encourage kids to learn how to work together, solve real-world problems, and gain the confidence to become the next generation of engineers, scientists, computer programmers, and project managers.

The opportunity

Improve the usability of the website by conducting research and implement changes that clearly define the organizational mission and community impact. Ensure easy access to the support, resources, and training that is available by simplifying user task flows and enhancing interaction design elements for a more meaningful user experience.

Methods

Cognitive Walkthrough

Competitive Analysis

Content Audit

Tree Testing

Usability Testing

Deliverables

Client Presentation

Interactive Prototype

research

approach

In order to understand the opportunity space, I conducted a cognitive walkthrough, competitive analysis, and content audit. After a bigger picture of the space, I recruited potential user participants to do usability testings and tree tests on the current state of the website.

synthesis

The main findings were that High Tech Kids mission and purpose were hidden from the main pages and it lacked the call to action bites that could engage a first time or repeat user. It was also found that user flows were unclear and complicated causing uncompleted tasks. Participants would often become frustrated and comment that at this point, they would contact the organization via email or phone in order to find the information they desired.

The content audit also revealed that because High Tech Kids serves not only such a vast array of user types in each category of parents, coaches, and volunteers, but there is also a wealth of information, courses, and resources they supply to each of those groups. It was particularly interesting that a lot of user flows stopped abruptly with end actions only accomplishing a very small fraction of the overall user goal without either having a simple option for total completion or leading them from one task to the next.

Design Process

site Structure

Informed by the research, I began reconstructing user flows and the information architecture in a way that would increase the visibility of the purpose of the website and the organization. Combined with the simplifying of content, increasing the visibility of what tasks a user could complete on the website will amplify task completion and direct the user from one task to the next.

informing the user

I went through a series of wireframes mimicking the simplistic design and layout of the current state of the website. While understanding the sentiment behind it, I came to the conclusion that a more in depth view of High Tech Kids, the organizational purpose, and a visual representation of a potential user could further enhance engagement, understanding, and ease of use.

prototype

engaging Home page

On the homepage, I focused largely on the variety of users that would utilize the website. I designed the content and layout to immediate provide a variety of users with answers to their questions, but entice them to further interact with the website.

The home page includes a hierarchy of information with the first thing users experiencing is a video highlighting all the amazing aspects of High Tech Kids; this could be intriguing to any individual looking to learn about what the organization is, does, or has been doing.

From there, I utilized a card layout highlighting the programs, and incorporated a brief sentence in order to give new users a sense of what to expect and to entice them to look further. I also called out the grades in a way that signified to users where to go for a more scannable approach.

Next, I highlighted the upcoming season as this might be exciting for new and existing users to have access to right away.

The final aspect of the homepage design was mirroring the card layout design for coaches and volunteers. Unlike the current website, I included a brief description and an image that allows a potential user to see themselves in that role.

Page Simplification

At the top of each page the user is given indications about what exists on the page and the ability to either scroll through all the information, or click one of the cards in order to be taken directly to that section.

One of the particular sections I added an additional feature to was the information about building teams. Here the user can find the basic overview of what it goes into building a team and is presented with two options to either start a team or search for a team.

Decreasing end actions

After entering their zip code and the maximum distance from their location they would want the team to be, clicking the search button would either populate an anonymous email contact for the coach. Or as in this case, an apology that there are no current openings.

Instead of this being the end of the users path, at the bottom of the notification is a line about the ease of starting a team and a call to action button directing them to that process. By incorporating more connections at what could be the end of a users understanding of a task or what is available on the website, they can become more engaged with the vast amount of information and resources provided by High Tech Kids.

Further clarity

A frequent area of confusion in the research was the difference between registering for First National and High Tech Kids, here I have added content and differentiated the call to action buttons that help direct the user through the separate processes with more clarity.

It was also uncovered in research that a common pain point occured when trying to download the team resources for the season. Instead of having to click on each individual document, I added another feature where the user can download all the team resources for the upcoming season with one click. Or if they need a specific document they can explore full list of resources.

deliverable

Client presentation

After completing the initial changes in an interactive prototype in Axure, I gave a presentation to the client to summarize my findings and show how the new design solution could enhance the visibility of their mission and goals. Above is a silent video representation of the experience.

VIEW INTERACTIVE PROTOTYPE HERE.

reflection

my challenge

With this project, the biggest challenge for me was absorbing the vast amount of content, resources, and perspective users on the website. The usability of the website could be approached from multiple angles and often the user flows were separate but overlapping. I overcame this by simplifying the content, increasing interaction design elements, and finding ways to converge multiple user paths.

feature expansion

As I move forward in this project, I would want to see where more features like the search for a team could be introduced and implemented to further increase the interactive elements of the website. A tracking system for where you are in the process of your coach or volunteer training program could be interesting and valuable to the users.