TechHaven Case Study

Ryan Smith
Ryan Smith
Published in
9 min readJul 25, 2018
A Few Initial Wireframes

Overview

As time passes the percentage of roles that can be filled by unskilled workers declines. In the years since the recent recession jobs created allowing for applicants with a high school diploma or less total around 1% of all jobs created. With some simple math, we can conclude that the other 99% of jobs created require some form of skilled worker, generally with a college degree. The most noticeable growth of a field requiring skilled workers is in the tech field. Between 1992 and 2012 the number of jobs in software development has grown by over 500%, and internet jobs almost 600%. Unfortunately, the growth of the pool of skilled workers is not keeping up the with the growth of jobs requiring skilled workers. This is especially true in younger demographics (15–24), who make up roughly 40% of all currently unemployed workers in the United States.

My team and I decided to create a platform aiding in the education of teens and younger adults, specifically in areas that would help them find jobs in the tech field. Currently, most software and internet jobs require some kind of college degree. This paradigm is likely unsustainable as the field is already finding itself with a shortage of workers, and a skyrocketing demand for more employees with the skills needed to do the job. Alternatives to college feel like one of a few potential solutions to help unskilled workers find their place in the ever-growing tech industry.

Our Design Process

My Role

I worked on a team of three UX designers. I was responsible for:

  • User research and interviews
  • Persona building
  • Creation of a creative brief
  • User story mapping
  • Low and high fidelity wireframes
  • Post usability testing design edits
  • InVision prototyping
  • Usability testing
  • Critique presentation

Problems

Based on a couple of surveys as well as multiple face-to-face interviews with potential users, we were able to identify a few potential problems to solve. The most common thing we heard from people was time constraints were a big part of their decision when choosing whether or not to spend additional time learning outside of work. Often people were supporting themselves by working full time. Not just that, the hours they worked were often irregularly scheduled. Leading to only having small pockets of time throughout the day to get anything done outside of their job.

Another problem we identified was all but one of the people interviewed had little to no disposable income. The majority of people kept a small list of relatively inexpensive entertainment and physical media subscriptions but felt that any more than what they had could potentially become a burden to their financial stability. Many of them also stated an unwillingness to sacrifice their current subscriptions in order to subscribe to an education service, even if it meant a potential long-term increase in job quality.

The last major pain point which came up often was two-pronged. People were unsure of how to apply their skills in the tech field. This uncertainty seemed to manifest itself as another problem, a larger fear of the tech industry. People assuming that they “were not smart enough for a job in the tech field,” or perhaps their non-computer related skills would be of little benefit in the field. Stating often that what keeps them in their current job is a sense of satisfaction with both their skill and their confidence in employment security. It seemed that moving from their job to a higher skill, more intense job worried them and created some discomfort.

User Flow

Audience

After compiling and examining the research it became apparent the audience for our platform would consist mainly of people between the ages of 19–25 who are not satisfied with their current career path. Specifically, those who felt lost in a traditional school environment, or may not have had the monetary wealth to easily continue into higher education without accumulating a lot of debt.

Solving Pain Points

My team decided that we would work to find and create an affordable alternative to colleges and tech boot camps for those who couldn’t afford them. Students could pick specific courses, even taking multiple at once. This allowed for students to build their own education path. The quality of the content would still have to be king while maintaining a $0 price point.

Interviewees often mentioned they knew little about the tech field, but they also seemed to have skills that would transfer to some fields very well if focused in the right direction. To attack this problem, a skills survey was originally meant to be a part of our platform. While appealing in theory, we were worried that people who didn’t necessarily already have skills in certain areas might be turned off if the survey was unable to return any solid recommendations. We really felt that an image of inclusion and safe learning was important. Turning people away or making them feel inadequate because they didn’t already possess some useful skill in the field felt against the type of learning environment we wanted to create.

Our solution to this problem was to instead create an interest survey. This way people who may have little currently applicable skills could still find topics to learn about which they may be interested in. We could still give suggestions to users, without having to worry they might feel like none of our courses would be a good fit for them.

Early Landing Page Wireframe
Course Cirriculum Wireframe

Next, we focused on the layout and structure of courses. Our research indicated students taking courses online prefer lessons which have multiple methods of completion. Some people learn quickly and don’t require a lot of examples. For these students, most lessons could be completed just by reading through a passage similar to something you might see in a textbook. For other students who learn better when given more guidance through an experience, we would create video lessons that would attempt to more actively engage students. Helping to keep their attention, as well as walking them through the more difficult concepts. We also created an interface for interactive lessons. These would be required to be completed as intended. We made this decision because it served as a checkpoint of understanding for a user. A student would be given tasks with examples which they would be expected to complete in order to continue through the lessons. This combined with periodic skill assessments throughout the course is designed to give students a feeling of understanding. This understanding is aimed to help students feel confident in what they learn, and themselves.

Managing student anxiety was always kept in mind when making design decisions. Making sure students felt they understood content was a major barrier to making sure they felt comfortable, however; it simply isn’t possible to make sure all students immediately understand all course content. This problem is amplified by students time constraints because if a student doesn’t understand something, they won’t be able to continue in a course. Being unable to continue in a course twenty minutes into a lesson, after potentially only being able to set an hour or two aside, leads to frustration and time waste.

Newer online education sites have been implementing some kind of inter-site messaging system as a way of circumventing this issue. We decided something similar would be a nearly mandatory addition to our website. So we created an instant messaging system that would allow students to message an instructor of their course directly. This way if a student had any questions they could get them answered as quickly as possible, but didn’t completely solve the problem. Some of our users would be working all day, and only have time to work on courses late at night. During those hours its generally pretty hit or miss if an instructor is immediately available to answer questions. Our workaround for this was to create a lesson specific forum. A place for students stuck on a certain lesson to find or post questions and answers at any time. The answers would be moderated by both students and teachers. A student has the ability to up or downvote an answer to a question based on whether or not they answered the question. A teacher can go into the forum and answer questions, or if the question is already answered they can mark it as a teacher-approved answer. A star was chosen as the glyph to represent both of these.

Framer Prototype of Instant Message Interface

Visual Design Process

We started the high-fidelity design process by creating a loose style guide. We decided that we wanted the majority of the site to be highlighted with an Aquarius blue. It’s a calm color that wasn’t likely to be distracting in lessons and helped convey the inclusive and relaxed feel of our website and courses. Montserrat was the font-family that we decided to use for all of the website. It is simple, legible, and not overly formal. We also decided that almost all of the above the fold real estate on the home screen should be reserved for a graphic containing what we felt was the most important part of the site for new users, the interest survey. We knew we wanted it to be accessible pre-login and post login. We also guessed that someone creating an account without taking it was likely uninterested in taking the survey at all. This is why we decided to allow students to dismiss the survey during the post logged in experience.

Mid Fidelity Video Course Wireframe

Prototyping and User Testing

Once we had finished our first round of high fidelity designs we created a prototype on InVision which would allow us to test our user flows. Afterward, we began having people in our potential demographic sit down and run through some tasks. We identified some problems with the website being flat, our main call to action being a bit unclear, text sizes were too large, and a weak hierarchy. All of which led to a bit of trouble navigating parts of our website. In our remaining time on the project, we began to tackle some of these issues. Call to actions were too flat and too similar to the rest of the site to be clear. Our workaround was to find a complimentary, high contrast color that could be used to pull them off the page as much as possible. We settled on a dark red which showed a beneficial addition with further testing. Users were able to identify them as points of action significantly faster.

Landing Page Post User Testing Edits

Conclusion

We distributed our all of our work, from research to final prototype, over a six week period. I believe that our research helped inform a lot of the decisions we made and helped us solve pain points potential users might have had with our platform.

Given more time, I would like to have refined the visual design of the website a lot more. We managed to fix some of the aspects of the landing page that made it feel flat, however; a lot of the other screens still feel too one dimensional. I think it would serve the usability of the site if we could’ve fixed that through a refinement of hierarchy. Both color depth and clear visual pathways through the site felt like problems we might address to solve this.

It would also have been useful to get more rounds of user testing done. We only had the time to complete one full round, and a quick second round of user testing. From each, I felt we were able to extract a lot of good, actionable information. Simply that we lacked the time to implement and then test as much of it as I would have liked.

This was a tough project, and a useful learning experience. I couldn’t fit all of the relevant information into the case study, so if you have any questions or comments feel free to message me at Ryan.Smith.UX@gmail.com or on my LinkedIn.

--

--