![Banner-Project-ACFBA.png](https://static.wixstatic.com/media/8a5cbc_0a97c38385bd417fa4c5e771c5735e66~mv2.png/v1/fill/w_1104,h_783,al_c,q_90,enc_avif,quality_auto/Banner-Project-ACFBA.png)
Client
Auckland Council & HCSNZ
Task
To upgrade the basic email system that the Auckland Council has on their website to be more remote and automated and easy to book for the customer. This would also work by saving staff admin costs and encouraging the customer to book with an easy booking and paying system. HCSNZ are responsible for the remote unlocking feature to the app and technology would be a new and exciting step for sports and event organisers.
Timeline
July 2019 - March 2021
My Role
Product Design - UX/UI (only designer on project) & Client Management - Testing
Before
Manually apply on Auckland Council website - email reply - manual admin
![Macbook-Front-V1.png](https://static.wixstatic.com/media/8a5cbc_04101d1512264ca1a9de263ad53fe6d6~mv2.png/v1/fill/w_781,h_459,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Macbook-Front-V1.png)
![Mockup-phone-V1.png](https://static.wixstatic.com/media/8a5cbc_65ff566cecd24fbaae91d47e496cbe4d~mv2.png/v1/fill/w_250,h_395,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Mockup-phone-V1.png)
Challenges / Goals
Challenges:
-
No public code based remote gate unlocking technology exists for sports fields.
-
The current system is email based, requiring a staff member to enter information.
-
Staff members create bookings and give permission via email reply.
​
Goals:​
-
Make the booking system automated and convenient.
-
Include a calendar based date picker, so the customer can see the available slots.
-
Customers can save and pay for a booking quickly.
-
This convenience will drive up sales.
-
It will also drive down errors and double bookings.
-
Information can also be sent about the limitations of fields and facilities.
Competitor Analysis
SportsPlus:
-
Team focussed, large amount of data
-
Not focussed on venues, more management / coach tool.
-
You can only see schedule, add to and pay, league venues / dates pre organised.
-
Not really for event organisers / market people.
![SportsPlus-Dash-Screen_edited.png](https://static.wixstatic.com/media/8a5cbc_60c68cc727c7422b9ba4e6ded08c74cb~mv2.png/v1/fill/w_239,h_471,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/SportsPlus-Dash-Screen_edited.png)
![SportsPlus-Schedule-Screen_edited.png](https://static.wixstatic.com/media/8a5cbc_d9d0598cb1154687bb65ac785671e44d~mv2.png/v1/fill/w_229,h_470,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/SportsPlus-Schedule-Screen_edited.png)
![SportsPlus-Menu-Screen_edited.png](https://static.wixstatic.com/media/8a5cbc_a75fc55dddc44346951395706eed280d~mv2.png/v1/fill/w_234,h_478,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/SportsPlus-Menu-Screen_edited.png)
Bookteq:
-
Wide range of venue types and people can cater for.
-
Schedule and book online.
-
Payments and invoices available.
-
Only available in UK & Ireland not NZ.
![Bookteq-New-Booking.png](https://static.wixstatic.com/media/8a5cbc_4cdca8c82677450787f4c3d9dd05443a~mv2.png/v1/fill/w_555,h_395,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Bookteq-New-Booking.png)
![Bookteq-Choose-Slot.png](https://static.wixstatic.com/media/8a5cbc_0d490ae7bb6044ffa1f265b7136b7774~mv2.png/v1/fill/w_487,h_349,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Bookteq-Choose-Slot.png)
Skedda:
-
Great design and comprehensive interior booking system.
-
More focussed on interior seat allocations.
-
Book and pay online.
-
More for small bookings.
![Skedda-Calendar-Page.png](https://static.wixstatic.com/media/8a5cbc_bac109fe74b64c49aa0122ea0dac642b~mv2.png/v1/fill/w_528,h_469,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Skedda-Calendar-Page.png)
![Skedda-Mobile-Version.png](https://static.wixstatic.com/media/8a5cbc_e103fa0723c341598fe24e102c5fa9af~mv2.png/v1/fill/w_445,h_407,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Skedda-Mobile-Version.png)
Unique Positioning
The Auckland Council Field Booking app would feature the unique ability, not only to book and pay for a field slot. But to actually physically unlock the gate and turn on the facilities - lights etc. This creates not only the convenience of a quick and secure booking, but the safety to ensure that it will lock after and the only keys needed are on your phone.
Users
-
Coaches
-
Trainers
-
Instructors
-
Sports league organisers
-
Event organisers
-
Outdoor market organisers
User Journeys
First time user:
Register > Search > Select date > Select time slot > Select available unlocking features >
Review booking > Confirm > Payment > Key code sent > View booking > live booking unlock
Ongoing user:
Login > View bookings > Check booking specific details > Search another booking > Select date > Select time slot > Select available unlocking features > Review booking > Confirm > Payment > Key code sent > Check bookings page
Wireframes & Testing (Mobile)
Mobile login / register initials, feedback and revisions (Invision):
![1-Mobile-Login-Screens.png](https://static.wixstatic.com/media/8a5cbc_639c305bfc5d4569a862bce5a40437f7~mv2.png/v1/fill/w_735,h_458,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/1-Mobile-Login-Screens.png)
![2-Mobile-Register-Screen.png](https://static.wixstatic.com/media/8a5cbc_28a8d49666e7483fb2dbf6f2dd768f63~mv2.png/v1/fill/w_248,h_428,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/2-Mobile-Register-Screen.png)
Feedback from testing was:
-
More visual presence
-
Add help text links
-
Add social media login options
-
Add Signup button to link to register
Dashboard / Search & Book initials, feedback and revisions (Invision):
![3-Mobile-Dash-screens.png](https://static.wixstatic.com/media/8a5cbc_4a07a87f106e4ce6875ad4036f768920~mv2.png/v1/fill/w_525,h_441,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/3-Mobile-Dash-screens.png)
![4-Mobile-Search-And-Book-Screens.png](https://static.wixstatic.com/media/8a5cbc_f13803e027f4477f9819150453502c57~mv2.png/v1/fill/w_524,h_434,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/4-Mobile-Search-And-Book-Screens.png)
Feedback from testing was:
-
Have search field on dash so users can search straight away
-
Using a bottom nav will allow the search fields and other buttons to have space
-
You could make the results more visual by having listings list 2 up
Results Specific / Confirm / Bookings / Details initials, feedback and revisions (Invision):
![5-Mobile-Results-Specific-Screen.png](https://static.wixstatic.com/media/8a5cbc_fc6124a4a32e4f858676b4e2a8301e7a~mv2.png/v1/fill/w_277,h_430,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5-Mobile-Results-Specific-Screen.png)
![6-Mobile-Booking-Screen.png](https://static.wixstatic.com/media/8a5cbc_98582cbe645c476e85a8fe11e8c171e5~mv2.png/v1/fill/w_256,h_436,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/6-Mobile-Booking-Screen.png)
![9-Mobile-Bookings-Specific-Screen.png](https://static.wixstatic.com/media/8a5cbc_ea8733ed436b4fc485a89b2ea3ddc6b6~mv2.png/v1/fill/w_302,h_442,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/9-Mobile-Bookings-Specific-Screen.png)
![8-Mobile-Bookings-Screen.png](https://static.wixstatic.com/media/8a5cbc_335072d76755473ebbb93f48d1acfcb8~mv2.png/v1/fill/w_261,h_423,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/8-Mobile-Bookings-Screen.png)
Feedback from testing was:
-
The fields may not have more than one image so may not be needed
-
This could be on one page that scrolls down? Or maybe keep separate
-
The visual is good with showing a difference between the active and inactive
-
The lock and unlock feature is great with visually showing you that your booking is live
-
Viewing map from here would help with directions
Full Resolution
Version (Mobile)
Click and explore the interactive Figma experience below. Enjoy!
Wireframes & Testing (Tablet)
Tablet login / register initials, feedback and revisions (Invision):
![10-Tablet-Login-Screen.png](https://static.wixstatic.com/media/8a5cbc_1454644c621b4720b2a513c66f2632ee~mv2.png/v1/fill/w_518,h_367,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/10-Tablet-Login-Screen.png)
![11-Tablet-Register-Screen.png](https://static.wixstatic.com/media/8a5cbc_80e0408ae90a43f98faa3cd9e9dc9e05~mv2.png/v1/fill/w_539,h_371,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/11-Tablet-Register-Screen.png)
Feedback from testing was:
-
Widen out the text entry boxes for more use of space on tablet
-
Make this page more visual, with the same image header as the login
Tablet Dashboard / Search, feedback and revisions (Invision):
![12-Tablet-Dashboard-Screen.png](https://static.wixstatic.com/media/8a5cbc_7612098fd37f4b4c9d7a581ca38b6f6e~mv2.png/v1/fill/w_518,h_357,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/12-Tablet-Dashboard-Screen.png)
![13-Tablet-Search-and-Results-screen.png](https://static.wixstatic.com/media/8a5cbc_ffc226536c8e4dfd87db5a9e59f17c3a~mv2.png/v1/fill/w_539,h_371,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/13-Tablet-Search-and-Results-screen.png)
Feedback from testing was:
-
Wider boxes is better for long name and location entries
-
Try an option with the search details on one side and the results on the other
Search Results / Results Specific, feedback and revisions (Invision):
![14-Tablet-Search-and-Results-2-screen.png](https://static.wixstatic.com/media/8a5cbc_f42743875910489ba56723df40be378e~mv2.png/v1/fill/w_518,h_357,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/14-Tablet-Search-and-Results-2-screen.png)
![15-Result-Specific-screen.png](https://static.wixstatic.com/media/8a5cbc_03947c61208e4f8bbe97d921176117a9~mv2.png/v1/fill/w_539,h_371,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/15-Result-Specific-screen.png)
Feedback from testing was:
-
Splitting the search page up into 2 columns works better
-
Enabling users to change the date view allows for more convienince
Booking / Checkout, feedback and revisions (Invision):
![16-Booking-screen.png](https://static.wixstatic.com/media/8a5cbc_ef5760ae00fb460f8163924a0d0e7b36~mv2.png/v1/fill/w_518,h_357,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/16-Booking-screen.png)
![17-Checkout-screen.png](https://static.wixstatic.com/media/8a5cbc_c5de78dfdf284db3a5a03f9ab259b023~mv2.png/v1/fill/w_539,h_371,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/17-Checkout-screen.png)
Feedback from testing was:
-
Allowing for repeat bookings means the customer can book a whole season in one go
-
Nice, clean and bold checkouts help the customer purchase easily
Bookings Page / Booking Details, feedback and revisions (Invision):
![18-Results-Page-screen.png](https://static.wixstatic.com/media/8a5cbc_d936c4d999d94d348c011ada48025d94~mv2.png/v1/fill/w_518,h_357,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/18-Results-Page-screen.png)
![19-Booking-Unlock-Page-screen.png](https://static.wixstatic.com/media/8a5cbc_0fc4f61eb1c74ad9aa5d0803fb75d153~mv2.png/v1/fill/w_539,h_371,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/19-Booking-Unlock-Page-screen.png)
Feedback from testing was:
-
The results page could include a larger image and tiles could be in columns
-
The booking details page with visual countdown and lock / unlock feature is fun
Full Resolution
Version (Tablet)
Click and explore the interactive Figma experience below. Enjoy!
Results & Learnings
This project is still in the development phase, as the gate unlocking technology
requires a lot of research and testing to work on each gate and changeroom locking system. There may be new locks needing to be fitted to parks and venues that would most benefit from a remote unlocking system.
​
User testing has revealed that users would really like to be able to book, pay and remote unlock their outdoor venues, as currently, this has to be done on an approval basis and needs a person to check each booking, approve and deal with how each venue can be accessed.