Tech Haven
A website to help teach technology based skills — UX Design case study
What’s the problem:
While the tech industry continues to grow the demand for tech training grows with it. As the demand for training goes up, so does the price. The main goal for TechHaven was to design a solution to help train people that are on a budget. This would allow those people from low income backgrounds an opportunity to learn the skills necessary to get a career in the tech industry.
Process to find solution:
As a team we used the IDEO design thinking process (Empathize, Define, Ideate, Prototype, Test) for this project. This process has been tried and tested and has yielded some of the best results when it comes to design. Using this process helped us keep the user in mind while still staying focused on creating a viable business solution.
Research:
For research we did three in person interviews, one over the phone interview with a UX Design instructor, and sent a survey out via SurveyMonkey. The three in person interviews were conducted with one female and two males ranging in age from 21–27 years. All were employed at a grocery store making what is federally considered low income. Some questions we asked:
- What skills do you believe you need in order to achieve your career minded goals?
- Do you find yourself with a lot of free time outside of work?
- Where do you go to learn about subjects of interest?
Those questions helped us find the following common pain points:
- Lack of time and money.
- Not knowing what they wanted to do.
- Past poor experiences with teachers.
We did our expert interview with a UX designer and design teacher. This interview gave good insight on what students go through in a tech school. We found that students usually didn’t retain information, instead students learn best when they were hands on with lessons. We learned that targeting use of all their senses caused them to learn better and become more engaged with the material.
Planning:
After gathering all of our research, we created our persona.
Keeping these goals and frustrations of our persona in mind we were able to start creating what we felt would be the best solution for our persona.
After creating our persona we started on our user story map. Starting the user story map process proved to be more difficult than intended due to having so many narratives and tasks. We struggled to determine what would be our MVP and what was not. One feature we struggled with was the option to have learning materials mailed. This would help us with our goal of offering multiple ways of learning, but would also give some a reason not to use the website. We ultimately decided to cut this from the MVP. Another feature that was debated on was a question board for each lesson. We felt we were offering a good way to receive immediate feedback with the instant messaging system. As a team we decided the message board would be a good added feature since you wouldn’t always get an immediate response on the IM system.
After much deliberation we settled on our MVP and moved onto the site mapping. This helped nail down the flow of the website. While going through this process we found there were certain tasks missing from the flow, such as error states and what would be available on the profile screen.
Ideating:
After completing the user story map and site map we moved on to sketching out each screen. We each took time to do multiple sketches of each screen and came together to decide which layout we liked the best. This method proved useful since we were able to get multiple ideas down in a timely manner and then combined our ideas into one screen.
Once we we had our sketches down we moved them over to Sketch to get a better a idea of what it would look like digitally. Once we had our digital wireframes done we were ready to move on to the testing of these screens. This allowed us to fix some issues with where the register button was placed on the screen and also the sizing of the button to register and to enroll in a course. After the testing was done we moved onto designing the high fidelity screens.
To take care of the high-fidelity screens at a quicker pace we decided to split the screens up among each member. Breaking the project screens up turned out to more of a hindrance than a benefit because it took us more effort to consolidate all the designs. When we all came back together to consolidate our screens into one file we all had different looking designs. From there we were able to set up a style guide to make sure we didn’t run into this problem again.
Design and Testing:
With our high fidelity designs consistent and ready we moved them over to InVision to create a workable prototype of the site. Once we had the prototype ready we tested it among designers, developers, and users. With these tests we made a number of changes. A change that was made was the wording on the landing page for the survey. Our main call to action was the interest survey. We would have the user take a survey and from there have them register. Some feedback we received was in regards to people never wanting to take a survey. We decided to re-word it to say “Discover Your Passion”. This would take the fear out of taking a survey, and entice the user to see what “their passion” was. Another change was the placement of the “Enroll now” and “Register” button on the course overview page. We found that people were unable to find it. As a team we decided to move the buttons toward the top of the course overview page to give a more clear call to action.
After making these changes we created an updated prototype and continued to test. Some feedback we received was regarding the opening home page and how it was not inviting enough. After some deliberation we added some graphics to make it seem more inviting.
Conclusion:
During this project I was able to pull a few things away. First, make sure to always create a well thought out style guide. Once we had this done our designs started to become consistent and fall into place. Second, User test until the very end, and then keep user testing. Once we had some solid user tests we were able to make the necessary changes to help the flow of the website make sense. Even when you think the design makes perfect sense, keep testing because there will always be more things to tweak and perfect. All in all this project helped me grow, and gave me a good insight to what makes up a good design. Thank you for reading, please reach out to me on LinkedIn and leave a comment.
Tools Used:
Sketch, Balsamiq, InVision, Framer, Pen and Paper, and Sticky Notes
