Project Overview

Background

Roger Williams Park Zoo was opening a Nature Swap at their zoo location. It was an educational shop where kids could bring in things they found in nature that would be assigned a point value based on demand. They could then use these points to purchase things like skulls, feathers or fossils that were stocked by the zoo or from donations.

Challenge

To build an online marketplace where zoo members could log in to view and use their points. Admins could use the system to help members make purchases with their points on location similar to a cash out register.

Process

Research & Wireframes

I began by interviewing the main stakeholders and primary administrators on the client's side. They wanted users to have to appear in person to register for an account prior to using the system because the majority of users would be under 12 years old and would need a parent's permission in writing to sign up. After registering the user would be given a temporary ID that would be activated at the zoo or at a later date online. A user could then update their acount information, view miscellaneous information, or make a transaction and cash out their points to purchase an item.

Based on the interviews and the information that was gathered I was able to wireframe out the user flows along with writing user stories to describe the functionality depending on the type of user logged into the system. For the admin screens I designed the buttons to be very large because the users would be primarily using tablets and it would speed up the process having the call to actions large and easy to quickly spot and press with their fingers. I also identified a couple concerns with the current design (not responsive, lack of accessibility, etc) and pushed to address these issues, but given budget concerns and need for consistency with existing site I was instructed not to address these issues and they would be dealt with at a later date.

UI Design

The overall design of the Nature Swap application was made to match their existing zoo website. Even though the Nature Swap was a separate application, they wanted to take the overall design (header, footer, site width etc.) exactly as it was and apply it to what we were doing for them so it was a seamless transition from Zoo to Nature Swap. The client wanted to see a few key pages with the UI fully designed, so I made several full-page mockups in Photoshop. I then went on to create the new component designs and built an html styleguide for the developer who was doing all the front-end work for this project, and worked with him to ensure everything functioned as intended.

The Cashout Screen

User Testing

After the front-end was built, I led the user testing by having interns and staff members who would be using the site daily perform tasks and to think out loud while doing so. I noted what worked and what processes could be improved based on user comments and feedback and then worked with the developer to implement some changes to address certain issues.

Login Page
The Account page for a user
Back to Portfolio