Coding labs is the newest product at Secure Code Warrior – and the first large project that came across my desk that I designed while building & hiring a global design org. The idea was to use a VS Code IDE and allow developers to be hands on with learning, and actually write code much like the way they would in their normal working environment. Prior to this, developers would view four options and click a multiple choice button. The platform was not accessible, and many customers had to ask a few of their developers not participate in or use the product. Our enterprise customers included developers from companies like JP Morgan and Chase, Bank of America, Capital One, State Farm – how to code securely- so that hackers aren’t able to steal sensitive information, data, inject code, etc. This was to be our most technologically advanced product and a differentiator amongst our competitors.
I had inherited a one designer team upon arrival, who had been carrying all of the weight on a sole jr designer up until then, and was doing a remarkable job all things considered. The development team was in a different timezone, in Belgium and Iceland. One of the challenges we faced was designers and developers working in different timezones – so as this designer was located in Sydney, Australia, I prioritized hiring my Europe team first. I included our engineering team in Europe in the hiring process – as there was little process with hiring at the company thus far, and teams often didn’t get buy in from cross functional teams outside of their dept. I had experience with this type of work prior, and I also enlisted the help of a low cost agency to do production tasks and follow design styles I created – and to wireframe and create the figma files. I created a design that can be carried throughout the rest of the accessible redesign of the platform, and build a design system around that, so that as I created design teams in each region, they’d have a blueprint so we could maintain cohesiveness and consistency- as well as save time on the designs.
Process wise- I laid out a UX Strategy, shared it with stakeholders, and socialized it. I reached out to UserTesting.com having a prior relationship with them and negotiated a huge discount for us. UserTesting.com is a big time saver especially when I hadn’t hired a research team yet- I was able to write up tests, source participants, have video clips prepared, have metrics ready to present – a process that would take weeks to do manually. Because of some of the challenges on this project, getting feedback early in the process was key.
Another challenge we had is that the developers were designing products due to a lack of experienced designers. A lot of work was needed to repair past relationships with prior product teams and design, and that became a large focus for the role.
– UserTesting.com feedback session clip
My solutions for this began with establishing trust as a designer and past developer, bringing them into the hiring process, the design process through workshops, getting regular feedback, and involving them in the user testing process. I found myself challenged at times having never had to explain and show so much of the why we do things the way we do them, as most teams I tend to work with have had more experience working with UX designers and they value they can bring, but, this was something we had to do as UX designers in the beginning, so nothing new here, except for the time factor. Showing good process appeals to logic, so I scheduled weekly meetings with open Q&A sessions, each time reinforcing we use data to drive design decisions. User testing made that easy. I eventually transferred this process to my team in region.
EARLY DESIGN DECK – WALKTHROUGH – Live Coding Lessons – WIP
EARLY PROOF OF CONCEPT TEASER VIDEO I CREATED
(for our Marketing team – who were scarce on team members)
Some of the customer challenges we faced were that we were quickly losing large customers to not being WCAG 2.1 (at the time) Level AA Compliant. I happen to have extensive knowledge in this area so the design system I created met this criteria. I also took our dark theme, and created a light theme as well, with a theme switcher under settings in the dropdown menu of the platform. I met with customers to socialize this plan, allowing us an 18% increase in renewals in Q3 2022 that were previously written off as not possible.
KEY TAKEAWAYS
- Usertesting.com showed us earlier in the process that the navigation wasn’t intuitive – users were trying to run and commit code how they would in a traditional VSCode IDE, vs using the below the fold button below. No type of testing like this had been done prior to my arrival- so i baked a lot of platform wide insights into the testing where available, to get feedback on the design system, and other questions we had.
- The challenges weren’t as easy for all developers of all levels to solve, and there were more non-technical types of users than expected. We created leveling tags in our global search parameters and scaled this out to the entire platform.
- We created and socialized via Jira, Slack, Google Slides so many new processes out of this project which reduces uncertainty, conflict, and builds trust within the organization – much needed throughout product development.
- We established a baseline for metrics via UserTesting.com and in product with Userflow.
- I was reminded that no matter how little time we have in the day, where it lands on our priority list, there’s a constant and ongoing need to show / reinforce the value of good design process, design thinking, and be critical of how well that process worked in retrospectives, how to explain it to others so that they understand the value, and how this is key to my role – and how much I enjoy this!
