As part of my “User Interface Design I” course I created a mobile app design based on the Parks Canada reservations website. During the research phase I built an empathy map, task and UI flows, and a Parks Canada visual analysis. I also conducted user interviews and created user stories and personas before proceeding to the low-fidelity wireframing phase, followed by designing mockups and an interactive prototype. See below for some samples!
Before
The Parks Canada reservations page is only available in web format. While functional, it is clunky and visually unappealing. My goal for this project was to design a similar system for a mobile UI using Parks Canada branding.
Wireframes
Here are some examples of mid-fidelity wireframes, a step up from my pen-and-paper sketches. I used Adobe XD and followed the Material UI guidelines for an Android-friendly mobile design. I wanted the UI to be streamlined and friendly while still providing all the necessary information about national park campsite booking.
Mockups
I used Parks Canada branding guidelines to make a bright and friendly aesthetic that still evokes the vibrant green colours of Canadian parks. Functionality for exploring camps and adding camper details use more green, while forms and information use a white background and black text for easy reading.
