UI Design
September 30, 2019

Regional Parks of San Bernardino County

Regional Parks for San Bernardino County has been an established working site for years, however the business has outgrown the capabilities of the current site. The UX/UI team was tasked to bring the website to its full potential. We took to research and business requirements to drive designs and push innovation.

Regional Parks of San Bernardino County

Regional Parks has suffered a drop usage, the current site was outdated and confusing. The goal is to draw in patrons to parks and encourage education and community involvement. We want the site to be inviting and a joy to use. We want to use bright and inviting colors that are accessible as well as good photography to showcase the beauty of the parks. It was important to create component the are reusable for the "web standardization initiative".

Research

The business requirement document served as an initial brief with general questions for the client. The team added to the questionnaire to help acquire more qualitative data. Proto Personas were created based on the findings.

Information Architecture

Based on initial content audit the team devised 3 user-flows. Picking a park that with take you through a reservation process or booking an event. Choose an activity which revealed a list of parks for a particular activity. Book or participate in events through a calendar interface.

UI Design

Bring a new vibrance to the site, something inviting and fresh. Images were going to be very important. We also want to keep in mind WCAG 2.0 as well as stick to the brand guidelines. While creating a visual style for web standardization.

The personas we created was such an eclectic group, creating them was fun and we really came together as a team.  The personas were as follows:

Husband Goal: 

He needs an easy convenient way to book a campsite,while on the go.

Sportsman Goal:

Acquire Facility info and Rules and Restrictions through Fish and Game or other resources.

Event Planner Goals:

She needs a quick way to see upcoming events and easy way to book a facility.


Initial sketches of the users paths to their respective goal.


Wireframes: Events Calendar

Responsive Wireframes were create for each main section beginning with Home pages, Events Pages and Activity Selectors


Desktop Multi-view Events Calendar

•Shows current event of the month.

•Full view calendar selector with daily details preview on click.

•Vertical Park Scroller at the top right.

Tablet View 

•Emulates Desktop view with daily  preview on tap

•Horizontal Park Scroller at the top.

•Grid-view current events 

Mobile View 

•Park Selector variation : mimics home page activity selector.


Link to Desktop Prototype