Victoria McKenzie
I hope you're having a lovely day!
GIRL GUIDES
TIMELINE
2 months, ongoing
ROLE
Product Owner
PROJECT TYPE
Implemented Project with GGV HQ
Overview
THE PROBLEM
Girl Guide Leaders are required to record and submit attendance records for which Girl Guides were present at each weekly unit meeting. Currently, there is no standardised process for this - leaders submit photos of paper, Word documents or Excel spreadsheets with attendance each Term. This creates inconsistent records, difficultly for leaders during reporting and could raise child safety issues.
OUR SOLUTION
A simple, easy-to-use web app that allows leaders to either mark attendance in real time, or quickly submit their attendance reports after unit meetings. This React app will create standardised attendance Excel sheets uploaded directly to the Girl Guides Victoria HQ Sharepoint site.
The Brief
While speaking to my old Girl Guide leader early this year, she mentioned to me how difficult the process was for marking and reporting attendance for her unit meetings. Girl Guides is one of my biggest passions, so I immediately saw an opportunity to use my skillsets in Product design in the real world, and create a solution to improve her experience.
Understanding our Problem Space
To understand more about the problem, I interviewed five guide leaders across multiple different units as well as the head of Guiding Victoria and Girl Guides Victoria Head of Child Safety. They showed me their current processes for reporting attendance, and I noted down their biggest pain points. I've highlighted the biggest three below:
1.
Live Attendance
The current system most units use is paper, but that doesn't let leaders sort to see who theyre still waiting on, and adds more work to firstly record attendance, and then submit it separately later.
2.
Reporting
Headquarters requires copies of all unit's attendance for the Term, which adds another thing to do for leaders at an already busy end-of-term time.
3.
Child Safety + Visitors
There are regulations in terms of how many times adults can volunteer before registering as a volunteer, as well as WWCC cards. This is difficult to enforce with the current system.
Ideation
After understanding the problem and current processes, I discussed options for a solution. We discussed multiple different approaches, including an app for parents to check-in their child, a single-device solution for a check-in iPad, as well as the final solution; an app for the leaders to mark and report from their end. The discussed potential solutions are below:
Parent-facing
Potential to integrate with messages or permission slips for parents, but requires the same person to drop children off - and may create issues if non tech-savvy people drop off girls one week.
Single-Device Sign-In
Would make attendance and reporting entirely synonymous, however requires an iPad or appropriate device for each unit, which is not expected.
Leader-Facing
Versatile as could be used either in real time as girls arrive, or just as a reporting tool after the meeting ends. Process remains same for parents, making adoption of app easier.
Click here to view our brainstorming on Figma
Once I had a rough idea of how a digital solution might work, I began sketching specific layouts on paper. I then transferred this to lo-fi digital wireframes on Figma. I talked through my ideas with my direct contact at Girl Guides Victoria HQ (GGVHQ), then finalised a layout I was happy with.
Prototypes
For the user interface, I chose to utilise Bootstrap. I hadn't worked with Bootstrap before, so wanted to use this opportunity to teach myself. I knew this would simplify my development in React down the track too - so wanted to prototype using the existing Bootstrap UI kit. The design is deliberately minimalist so any guide leader, no matter their experience with technology, can use it. Some guide leaders rarely use technology, so it is important this app is as clean and simple to use as possible.
MOBILE PROTOTYPE
I used a mobile-first design approach, so the app was designed to be easy for leaders to use on the fly.
DESKTOP PROTOTYPE
Speaking to leaders it become very clear, and was specifically mentioned, that this app needed to be fully responsive and accessible from any device. Some leaders wanted to be able to use the app in real time, others are only comfortable using the internet on their laptops.
Implementation
OUR TECH STACK
As a Product Designer, my experience with code was mostly using HTML/CSS/JS for major projects, as well as dabbling in Flutter and C. To truly have an impact in the Girl Guides organisation I knew I needed to push myself and drive the development and implementation of this web app. For this, I taught myself React, and linked to Firebase, to bring this to life.
React
React was a great option for this project as it is based on JavaScript - the language I am most familiar with. It's real time updates and adaptability made it the prefered choice.
Bootstrap
Bootstrap was used to simplify the implementation as well as keeping the UI minimal. React-Bootstrap work well together, so it was an easy decision.
Firebase
I had some experience using Firebase through my 'Doorbell' hackathon, and its low-cost structure, easy to understand and integrated authentication and hosting made Firebase a great addition.
WEB APP WALKTHROUGH
Learning React was one of the most exciting parts of this project. When I started I was completely overwhelmed - functional components and the React way of thinking were so foreign to me, but after many weeks of consistent work I've ended up absolutely loving the front-end development process. To have turned my prototype into a real React app has been crazy to me - I haven't made a real app for people to functionally use before, so I'm ridiculously proud of this effort and the first MVP result.
Reflections
MY LEARNINGS
Although this project is still in progress I have already learnt so much, and been so grateful to work on such an exciting task with an organisation I adore. It has been an invaluable experience to lead the project entirely, and put my degree and personal skillsets to use in the real world to solve a real problem.
NEXT STEPS
I am incredibly excited for the next steps of this project. After finishing the development of the app, I will now lead a pilot roll-out with five selected Guiding units. This will then lead to a feedback session, with any iterations made before expanding to more units state-wide!
