Competitor analysis

While learning about teachers methods of programming, I learnt that teacher use a few tools to help do their programming job. I also researched into the scope of these tools and teachers frustrations with them, this help to map out what are our competitors products. Among many insights one that stood out was the adoption of these tools are low, because teacher often lose unsaved work, and that is why they prefer many google products simply because it auto saves their work.

Solving the right problem

It was clear from the User journey and subsequent user observations I gathered, the key to get teacher to adopt the applied learning method of programing is not to force a new behavior. It is to solve their existing problems, give them a new way to program lessons more easier and faster and by doing so we can introduce applied learning method as an embedded feature of the product. This is an important step to convince teachers adopt a new tool, otherwise they would just prefer google docs.

Workshop to narrow multiple designs

One of the key workshops I facilitated was to narrow down the draft designs, pior to one of the key workshop I produced several versions of the mocked up prototype using simple Figma screens, the mockup was based on several initial sketches from the teachers. We decided use to Figma, because we had to move very fast and we had more creative control without too many signoffs outside of our team, there was no time lost for low fidelity mockup feedback loops. It also allowed us to test a new design system that was been produced in a separate stream of work.

On the day I print out all the screens and stick them on the windows. I walkthrough multiple versions of the prototype flow on the wall with the team, the aim of the workshop is to lock in feature for an MVP build. teacher was also given opportunity to sketch their ideas, and talk through their ideas individually to the team without interruption, at the end of the session we dot vote the ideas based on user value and user urgency. These voted results was then plotted on prioritization matrix to shape out the JIRA Epics for an MVP build.

Iterate the MVP design

I revised the Edumap design based on workshop and feedbacks from the planning board testing. A new MVP version of the Figma designs are created down to UI accuracy. At this stage we also had most of the design system components designed.

This version would redefine the value proposition of edumap, it was no longer about searching for local areas on a map to support applied learning, it would be about sharing, editing and publishing high quality applied learning program. Teacher would come to the platform to find Department endorsed high quality applied learning program, they can then download them, or edit them to fit their class needs. As teacher get more confident with the existing applied learning program they can create and edit on their own. They can also share their program with substitute teachers to edit collaboratively online, all done with auto save at every step of the task. We settled on this MVP version to be built by the dev team.

Building the Catlab Design system

I had two products Edumap and Uppley that need to be produced using a single design system, so that the components can be shared, and time saved using the same design patterns.

• Each week I was consulted on new components and gave feedback on the designs so that it aligns with NSW education accessibility standards as well as branding guide lines.
• We build the pattern library out of Figma components. Producing the design system was done as a separate stream of work by a vendor team.
• From a visual design perspective the pattern library was very comprehensive down to every unique icon designed for both products, the look and feel is very consistent.

Building each component was still done by our dev team, which means time taken away from build the MVP product. Ultimate we had to stop building the components and simply use the design pattern library to quickly produce the MVP product. 

By having the Figma design component library complete, I was able to produce interactive user flows that looks like the real product really quick. This was much faster then doing a low fidelity mockup then iterating to a high fidelity UI version, because the time spent doing both version without components simply takes longer.