Jesse Hunter
User Experience | Interaction Design
TechEase_HomeMock1_Logo2.png

TechEase

The Challenge:

  • As of 2014, there were 3.9 million people working in IT occupations. This included those employed in the computer systems design and related services industry — what we commonly refer to as the IT industry — as well as individuals doing technology-related jobs in other fields.

  • Employment of people working in IT occupations is expected to grow 12 percent from 2014 through 2024. 488,500 jobs will be added during this period.

My team and I were tasked with creating an online learning platform solution that teaches tech skills to young adults working lower income jobs in order to provide them with better opportunities.

This tech training platform should be web-based, easily accessible, and prepare our users with the understanding and confidence needed to advance in a technical career. Other factors to consider included:

  • Competing web-learning platforms

  • Exposure (marketing)

  • Providing the most up-to-date training

  • Ensuring that our feedback to the user is responsive and enlightening


Design Team:

TechEase_Team1.png

 

 

 

 




My Role:

User Research
Personas
User Story Mapping
10X10 Sketching
Mid-Fidelity Wireframing
High-Fidelity Wireframing
Prototyping
User Testing


The 5 stages of Design Thinking:

For this project, we implemented a 5 stage design-thinking strategy.

1_x_oXkj2UkskJsphIIQefcw.png

1. Empathize — To gain an empathetic understanding of the problem that we are trying to solve.

2. Define —Using information gathered, define the core problems encountered.

3. Ideate — Begin to design solutions to the core problems being faced.

4. Prototype — to identify the best possible solution for each of the problems identified during the first three stages.

5. Test — Used to inform the understanding of the users, the conditions of use, how people think, behave, and feel.


EMPATHIZE


Audience:

Our primary audience for TechEase were young adults (18–30) working in low-income jobs.

1_z1ARg9ffcpoUC9dlP5bCDQ.png

Credit: www.brookings.edu

Career advancement prospects are limited for workers with low levels of education, and the data is not promising on this front: only one-in-five of the working/not-in-school group has an Associate’s or Bachelor’s degree. The largest share of the working/not-in-school group (nearly half, or 42 percent) has only a high school diploma; another ten percent has less than a high school education. That is, 5.3 million 18–24 year-olds — 17 percent of all young adults — are done with school, at least for now, and are participating in the work world armed with no more than a high school diploma.


Creative Brief:

Together with the team, we sat down and went over our creative brief for this project. We highlighted our deliverables:

  • Tools to inform the design of the product

  • User research

  • Persona(s)

  • User Story maps

  • Sitemap and Style guide

  • Low Fidelity Wireframes

  • High Fidelity Prototype

Some of our assumptions for this project included:

  • Thinking that tech jobs require a lot of advanced math or complex degrees

  • Extremely high intelligence

  • Sitting in a dark room all day with no windows

  • Being anti-social

Success for TechEase users would be measured in the points earned while taking a course, obtaining site certifications, and employment.


User Research:

1_vWAORUqrOeiB5q8-o4vA9A.jpeg


Once we documented our assumptions, it was time to reach out to our audience. My team and I conducted several one-on-one interviews with young adults working low income mall, grocery, and other service industry jobs. We ran into a few roadblocks while trying to interview employees within their workplace. Audio recordings, pen, and paper worked well for documenting the interviews. Ultimately, we were able to interview a Macy’s shoe salesman, and retail clerks from both Pacsun and Zumiez. We also compiled a short online survey that we distributed out to various online platforms including a large Facebook group for disgruntled service industry employees.

1_y5IzfvinOG6hkmr2b8Iciw.png


Competitive Analysis:

During our research process, we began a competitive analysis on competing online tech learning platforms such as Code Academy, Team Treehouse, and Pluralsight. Some of the key issues we were able identify from this research were:

  • Very large and complex course libraries

  • Skill specific assessments that could leave poor ranking users feeling discouraged

  • Several competitors require account creation simply to view the site content and course catalog


DEFINE


Persona:

Using research data from our interviews and online surveys we were able to start shaping our Personas. Through our interviews, we found that many people considered “tech” jobs to simply be tech support. To quote one person, “I imagine sitting in a cubicle all day answering phones.” Others thought that they weren’t smart enough to pursue a career in technology. The team and I developed a male and female persona for this project. In the end, we decided to combine the best aspects of each persona into our “Trent” Persona. The “Trent” Persona was a key factor in helping us to understand Trent’s needs, experiences, behaviors, and goals.

Trent_PersonaGraphic1.png

 

  • He wants a career that makes him feel valued

  • He desires more time to travel like those people he follows on Instagram

  • He’d like less financial stress over all of his bills


User Story Map:

Our team conceived the idea of a skills assessment to gauge the users proficiency in different technical areas. The thought process was that assessing the users skills could help us place them at various stages within our course curriculum. We quickly realized that forcing a user with zero aptitude for technology into a skills assessment and returning poor scores could prove detrimental to the user.

TechEase User Story mapping

TechEase User Story mapping

We instead decided on the concept of using a short personality assessment based on multiple choice questions to help determine a creative vs more logical interest and personality. Through these assessment results, TechEase can help steer users down either a design path or code path course curriculum.

 

TechEase_DiscoverGoal1.png

Through many slight disagreements and pivots, we were able to hone in and finalize the flow of how the user would navigate our platform. It was important to make sure that we always kept our focus on the user and their goals while building out the user story. We frequently referenced “Trent” to accomplish this goal. Building out our user story piece by piece allowed us to see scenarios we previously may have overlooked and helped us clearly define our MVP.







IDEATE


Wireframes:

Once we had finished up our user story map, we were ready to start visualizing our design. We each started with pen and paper sketching. Our team individually did 10X10 sketches of our platform screens.

We then split up the work of recreating mid-fidelity wireframes using Sketch App. I was in charge of creating our Homepage, User Dashboard, The course screens, and pop up modals.

1_m-bJADHeAzCJe3IHUsXeyQ.jpeg
1_QzUBOerV9segjlE2-eWGFQ.png

PROTOTYPE

After creating our low fidelity wireframes using Sketch, we plugged them into and interactive prototype using Invision. There were a few struggles with imitating modal popups and other overlay interactions within our Invision prototype. Eventually, we were able to work those small details out. We were then able to create a series of task’s based on our persona’s goals in order to start our user testing process.


TESTING

We quickly discovered several issues within our platform flow after conducting our first user tests.

  • Lack of dummy text for most input forms (Users kept trying to type into blank forms that were inactive)

  • No clear visual hierarchy on the homepage (cluttered content)

  • Slightly confusing main navigation

  • No way to maximize coding and code preview windows


High Fidelity:

After our first cycle of testing was complete, we needed to go back and make changes to our platform. After creating a very simple style guide, we split up the work of creating high-fidelity wireframes in Sketch. The lack of having a specifically defined style guide caused a few big issues.

Once we began consolidating our screens, we found many inconsistencies in design style, colors, layout, and size. Teaching us that, despite a few underlining style rules, three designers are capable of creating very different visual work.

Another issue involved content that was far too large for the web browser.
These consistency and sizing issues caused a lot of redesign and wasted time on an already tight project deadline.


Final Results:

1_BUve9AEoLRi0xnfjGCEyrA.jpeg
1_WAef5I55nf6dFQ3Iz67p4Q.jpeg


Wrapping it up:

Our second round of prototype user testing conducted using Silverback went well. Small concerns that users had included:

  • Knowing that TechEase was a learning platform, but not positive that it was a tech website based on the homescreen visuals

  • One user wanted to immediately see job listings which he expected to be in the footer. Instead, our platform forced the user to enter our community forum first

  • Another user found the code editor in the course screen “over-overpowering and a bit intimidating”


Project Takeaways:

Overall, we found users responded positively to our use of separating our curriculum into two distinct paths: “Design Path” and “Code Path”. They also enjoyed the implementation of the personality assessment.

That said, there are several aspects of TechEase that given more time, we would have liked to address.

We felt that the way that the user takes the assessment and how the results are displayed could both use more testing and refinement.

We would have liked to dive deeper into the design of the course coder / design lesson interface. Trying to consolidate all of the information and controls needed within the interface without a lot of clutter was challenging. It would be good to brainstorm different iterations, while still implementing some of the core features that it requires.

Finally, we’d expand more on the course curriculum and the future monetizing opportunities and limitations of the platform.


Conclusion:

My team and I discovered many valuable lessons from our work on TechEase. We discovered that the information planning stages are crucial in understanding the flow of how our users will use the platform. We learned that good communication among our team is the grease that keeps the gears of productivity turning. Lastly, we learned the value of referencing our style guides and live previewing our designs regularly to design the most consistent experience for our users.

Thanks for reading!

Read more about me and my user-centered design approach by following me on Medium or connect with me on Linkedin.