UW Blueprint is a student-led organization at the University of Waterloo that develops technological solutions for non-profit organizations.
What is Focus on Nature?
Focus on Nature (FON), a client of UW Blueprint, is a non-profit organization founded to inspire young people to connect with nature through photography. Since its inception, FON has hosted over 773 workshops and camps reaching over 20,000 children from grades 3 - 11.
First, let's define our problem
PROBLEM DEFINITION
Current Workflow
The existing workflow for camp registration involves manually checking for Interac e-transfer payments. Camp cancellations and last-minute openings must be manually monitored for, making camp administration tedious for staff and admin.
How might we create a scalable, flexible, camp booking system with integrated payment flow and waitlisting logic to manage overbooked camps and last-minute cancellations?
PROBLEM DEFINITION
Success Metrics
Quantitative
100% adoption
$20/month budget
Qualitative
Intuitive (shallow learning curve, easy to maintain)
Reliable (able to adapt to changing conditions of data)
Next, let's conduct some research
PRIMARY RESEARCH
User Interviews
To begin the design process, we first conducted a series of user interviews to better understand who our users are and what pain points they face.
Wants to save time on camp registration management
Motivated to expand camp offerings to new regions and impact more students
Pain Points
De-coupled registration forms and Interact payments are creating confusion about who is registered for camps
Waitlist management and cancelling overbookings is tedious and paints Focus on Nature in an unprofessional light
Motivations
Wants to have easy access to a camp roster with each student’s registration form details
Wants to have aggregate camp information for planning purposes
Pain Points
Has to go through each entry on the response sheet to figure out how many cameras are needed, which allergies are present, etc.
Motivations
To instill a love for nature in their children through family activities and camps
Pain Points
Having to register on a Google form, and then pay by Interac e-transfer is inconvenient
Finding out that their children are in overbooked camps and having their spots cancelled is frustrating
SECONDARY RESEARCH
Competitive Analysis
As a part of our secondary research, we conducted competitive analysis to explore some existing user experiences. Through the research process, we posed as clients and discovered many pros and cons of each application we tested.
Management Experience - Research
Management Experience - Key Takeaways
Consider using tooltips / icons with more info for complex interactions
Camps ordered in chronological order (by start date), separate tabs for camps in the current year and past year for easier navigation
Camp list should include search and filter (location, dates, age range, full vs. available)
For camp creation date & time interaction: calendar (pros: visualization, easier interactions) or text field (pros: less dev work)
Include steppers for camp creation navigation
Registrant Experience - Research
Registrant Experience - Key Takeaways
Filtering: single-column structure with filtering options at the top would be best (consider sticky filtering options for easy access)
Split up registration form so that parents could add multiple children in one section and have shared info for their children
Use steppers to see progress of registration
Status indicators to show users how many spots left, and if full, and how many on waitlist
Information hierarchy should follow order of importance / relevance for parents when registering their child(ren)
Now, let's get to ideating!
IDEATE
User Flow Diagrams
Using a list of feature requirements given by our clients and our competitive analysis, we began to create user flow charts.
IDEATE
Low/Mid-Fidelity Wireframes
Due to our initial timeline, we jumped straight into mid-fidelity wireframes (after a brief on-paper sketching session).
Design Decision #1: Nav bar
Below are the iterations we went through before arriving to our final navigation.
Version 1
Version 2
Lots of text, no icons
Repeating "management" over and over again seems redundant and unnecessary
In version 1, it is difficult to tell which tab is selected
Version 3
Version 4
Easier to distinguish between selected and not selected tabs
Design patterns are inconsistent with the rest of the tool and may end up looking awkward when put together
Version 5
Icons are great for visually representing each category of the tool, and more accessible for people who are unfamiliar with the english language
Not a lot of padding, looks cluttered
Final Version
Different colour for selected tab makes it easier to distinguish
Use of icons and less words
Simple design that doesn't take up too much space, will flow nicely with the designs for the rest of the tool
Design Decision #2: Filtering & Search
Version 1
Dynamic filtering
Reduces clutter (only the filters the user wants to be applied will be displayed)
Adding specific filters is a pretty rare use case
Unclear which filtering options are available
Version 2
All filtering options available on expanded view
Collapsed view if user does not need filtering (reduces clutter, less distractions, good use of whitespace)
Icons to indicate which filtering options are available
More dev work
Filtering was scoped out because it was deemed to be an edge case and not worth the dev work required.
Design Decision #3: Camp Overview Page Layout
Version 1
Easy to distinguish between camps with spots available and full camps
Not scalable (as camp sessions are added, the page becomes very long to scroll)
Info for each session (dates, time, price, registrations, etc.) does not seem to follow any clear hierarchy, could be information overload
Some session information is repeated in the camp overview, seems redundant
Final Version
Colored borders is an easy way to distinguish between full and available camps without taking up too much space
Information hierarchy better established for each card
Some repeated information seems redundant
Next, it's time to get some feedback
FEEDBACK
Usability Testing
After doing more than 5 different explorations and experimenting with 3 different versions of low/mid-fidelity designs, we put together a prototype to test.
What did we learn from usability testing?
It was unclear to users that the landing page was part of the camp management tool
Some parts of the tool have repeated CTAs which caused user confusion (unsure which CTAs to click)
Some CTAs are hard to find and disappear when users scroll down the page
Modals and side panels are difficult to distinguish from the rest of the tool
Action items
Make page titles consistent with navbar titles, and iterate navbar to make it clearer which page is selected
Remove repeated CTAs and keep them in a consistent place (i.e. footers) so that they are easy to find and intuitive
Make CTAs a different colour (higher contrast, and alarming colours for warning states), and consider making CTAs sticky
Finally, it's time to present final designs!
PROTOTYPE
Final Designs!
To maintain the privacy of the organization, I am unable to provide the full prototype. Below are some mockups of our final designs.
Internal Camp Management Tool
Camp List
Scheduling Sessions
Access Control
Form Management
Camp Registration Web App
Camp Registration
Review Cart
FINAL DESIGNS
Polishing for Handoff
To handoff to developers and future designers, we created design specifications on Figma highlighting the interactions, and any error states.
Reflecting on this project...
REFLECTIONS
Lessons Learned
Involve clients in every step of the design process
Throughout the project, we hosted meetings with our clients to provide updates on the progress of our project. Often, there was some disconnect between their vision of the tool and the vision my co-designers and I had, which resulted in us having to re-design quite a few interactions. If we had involved our clients during our sandbox explorations, it would have saved us time and effort.
Expectation management with clients is crucial to set realistic timelines and avoid scope creep
We initially did not clearly communicate the expectations of our tool with our clients, which resulted in our scope continuing to expand to include features that did not directly reflect the purpose of our tool.
Client satisfaction is the greatest reward :)
When we presented our final high-fidelity prototypes, the reactions on their faces were priceless. Knowing that my work has made a positive impact in the lives of others is among the greatest joy I have ever felt and the reason I love design!
REFLECTIONS
Next Steps
Performing additional usability testing
Due to time constraints, we only completed one round of usability testing and never got the chance to test after having applied user feedback.
Adding more features to improve the experience and longterm scalability
Due to time constraints, we scoped out a few features that were "nice to haves" but not crucial to the purpose of our product. A few of these features would have made our product more scalable, which could improve the overall experience as FON continues to run more and more camps.
.svg)
