Iteratively designing and usability testing

Part 4 of how I’ve introduced and helped to institutionalise UX strategy, research, and design at St John New Zealand

(“Minimum viable” project phase story below - full story in draft, but always ready to tell it over a cuppa)

From cut and pasted elements from competitor websites to high-fidelity wireframes with our partnered UI and front-end system vendor…

The first revamped first aid training website “mockup” that I made for our programme by simply combining different concepts and good practicess seen from our competitors and influencers that matched our customer journey plan in order to start the design conversation.

Next, I took the lead on using Balsamiq Mockups to draft up these low-fidelity digital sketches to show how each new page of our revamped website could look, act, and flow according to the user story map that we had created. With each mockup screen, I was keeping re-usability in the back of my mind as this was to be a framework that we would be able to on-board all St John NZ service and content onto in time. These mockups also served as my initial prototypes to begin user and usability testing to learn very early-on if these concepts would help both our B2C and B2B customers accomplish their training needs starting with the golden thread of booking a course.


Kicking off the much awaited design sprints

In Dec 2017, we brought onboard a UI design and development vendor to work us to make what started as my mockups and story maps a reality. While they took the lead on our first week-long design sprint since that was their speciality as a design agency, I oversaw each design that was being generated as our in-house design lead to ensure that the outcomes met our customer-centric principles, ideal journeys, and would be adaptable going forward. I also had to ensure that we would have an equally effective, efficient, and satisfactory mobile experience as our digital manager had shown our overall web traffic being ever-increasingly converted to mobile devices.

Throughout this first design sprints, I would help explain what the UI vendor and I had come up with to our product owner, developers, testers, etc to get their perspective and feedback early about what would or wouldn’t be possible along with insights into the necessary functionality that we may have missed. Flexibiliy and being open to accomodating acceptance criteria updates, scope changes, and trade-offs was key here. We have since continued with similar design processes in the releases we’ve made or are in development post go-live with the 100% new website and backend systems in Nov 2018.

Not only did I oversee all resulting website designs, I would routinely work directly with the developers and architects to design how the user interactions would need to work from a technical level, such as how the solution architect and I invented a “smart” training course search feature unlike anything else offered by our competitors to solve a Hick’s Law customer critical path problem I identified in my user research.

After completing our design sprint, our UI vendors developed high-fidelity wireframes and uploaded them to InVision App which became our online collaboration method to review and update based on comments received from myself, the team, and more service stakeholders that we continued to bring into the fold to ensure the system would meet their needs as well.

Aside from these technical and information architecture discussions, I also worked side-by-side with my the first aid training business leads and my CX & brand manager to write brand new content for the entire new website and product catalogue. I took it upon myself to learn this new EpiServer CMS system and have since been the go-to for managing all content changes as I’ve memorised nearly every word and screen. This content management responsibility though does need to be owned more by the digital experience team or individual business units


Fail fast with usability testing and iterate

InVision App quickly became invaluable to me as a way to perform more formative usability testing with real first aid training customers before any code was written. I was working in parallel with the UI designers to take their most recent screens, set them up to be clickable in InVision, and then used Morae to create realistic participant tasks for the tests I facilitated and moderated. In thanks to being a trusted charity, I found it quite easy to recruit participants for these tests, most often right before or after their actual first aid training courses at our nearby venues. After synthesising the results, I took the insights back to the UI and interaction developers and we three would iteratively re-design and test these alternative solutions until we got it right. This particular set of screens above are taken from an internal presentation I gave during an all-hands “fireside chat” demo to the wider businss to show how we’re approaching design as never had been done before at St John NZ.