Bloc

The early days

I started mentoring at Bloc part-time in October of 2014, as a mentor for the front-end modules of existing web development tracks. Along with HTML, CSS and JavaScript, I taught students how to set up a project to use AngularJS as a framework. Breaking down the patterns of an MVC was always interesting, and I found that once students got over Angular’s learning curve, they loved it!

In mid-2016 the design director for Bloc’s Designer Track reached out to me and asked if I’d like to join his team. Designer Track is a mixture of design and development, and he was looking for a new mentor to provide some knowledge and direction regarding the current front-end technologies being used by the design program. I agreed and in August 2016 I joined Bloc as a full-time mentor teaching students about UI, UX and the front-end.

As a mentor, I..

• Work with students through Bloc’s curriculum, meeting with them via Skype
• Encourage atomic design
• Help debug the student's code, and teach them how to do it on their own
• Learn new frameworks/libraries/software etc. outside of curriculum for students
• Give feedback on work, while showing alternative solutions that offer better performance

Process

When teaching about user experience or user interface design, I follow a rigorous design process that includes research, analysis and iteration based on user testing and client feedback. This teaches students not to jump head-first into visual design! Here's the process I outline for my students:

Research

Starting with research: send out user surveys, research existing studies, perform a competitive analysis of products in the same space, analyze survey data to make business decisions and find the key demographic, and build user personas to ensure I can advocate for users from all walks of life. Talk to the client or stakeholder about their product, their ideas, and ask questions about how the product will be used.

Information architecture

Next up, determine features for an MVP based on data from the research process, including personas, and write out user stories, build out user flows, and create a sitemap all before starting the visual design process.

Wireframing + user testing

Now that the research and IA are complete, start with sketches, a few alternates for different pages, and talk to the client and users to receive feedback on the preferred page designs - then, move on to building wireframes (usually in Figma). Wireframes are built using horizontal and vertical grid systems to prevent spacing issues earlier on, and to make it easier to transition into high-fidelity mockups.

Text content is added to the wireframes before wireframes are put into a prototype, usually via InVision or Marvel. Determine the tasks to include in usability testing, and create a usability test script. Once a prototype is ready, test it as much as possible with users who fit into our chosen demographic; conduct preference tests, navigation tests etc. either locally or remotely to determine what functionality should be changed before moving into branding. Update documentation (user stories, flows, sitemap etc.) to reflect any user story/flow additions or changes made as part of this phase.

Building a brand experience

Work with the client to determine brand direction - colors, logo, brand voice, typography and so on. From there: create moodboards, and do some mind-mapping to dig deep into potential options. After initial sketches of the logo are shared and revised with the client, conduct a preference test with digitally-refined logos to determine what logos perform better. After testing, put together a style guide and/or brand guidelines that includes colors, logos and typography to be delivered to the client.

High-fidelity mockups + user testing

Once the style guide is approved, begin adding color and image content to wireframes to create high-fidelity mockups. After the high-fidelity mockups are put into a prototype, perform user testing on them and iterate the design based on feedback; taking note of features that may need to be changed or added before release of the MVP.

Delivery!

Send deliverables to the client: style guides, brand guidelines, mockups, IA documentation. Present the deliverables and illustrate the process that was followed from conception to completion. If requested or necessary, begin coding out the front-end architecture of the project.

By ensuring that students follow this process, their work is consistent, well-documented, and professional!

When teaching about the front-end, I discuss..

• How to turn a design project into code
• To have an understanding and documentation regarding the scope, features and pages/screens of the project.
• Best practices for HTML, CSS and JavaScript (naming conventions, DRY code and such)
• That unnecessary, bloated frameworks and/or libraries should not be included in projects
• If libraries or frameworks are used, they must understand the documentation, best practices, and know how to troubleshoot issues with that technology
• To leave thorough commit messages, and to follow a process similar to Gitflow to keep their work logical and to teach the concept of a “release cycle”
• If interested, how to build E2E or unit tests
• How to utilize AngularJS, D3.js, React or Vue.js in their project

Mentor → Squad Lead

In January 2017 as our team of design program mentors grew, I was promoted to Squad Lead. Squad Leads mentor students, and also report to the program director and oversee other mentors in the program. I currently oversee all full-time Designer Track mentors.

Squad Lead responsibilities:

• Hold weekly internal meetings for the mentors I manage
• Supervise a remote team, and track the progress the students they mentor
• Conduct assessments for Designer Track students to critique projects and give feedback
• Assess job-readiness of students based on their projects and design process
• Research and present 1-hour of front-end-related content for students (most can be found here!) each week, such as CSS Grid vs. Flexbox, using ES6 to build a todo list, and discussing the basics of CSS preprocessors.