Logo

Savannah Wild Life Center

Process

  • Research (interviews, journey map, personas)
  • Content inventory and navigation testing
  • Sketches
  • Style tiles
  • Responsive web design with HTML and CSS
Group project

This was a project to create a Website for the Savannah Wild Life Center as the client.

Our group had one service designer, one interactive designer and two graphic designers. I had the leading role on the programming and web design area, but also contributed on every stage of the project, as the others did. The project started by creating a writing proposal to the client, after the approval we started gathering information and working on the design process.

Research

Interviews

The first visits to the Savannah Wild Life Center (SWLC), were to gather information about the stakeholders, the visitors (users), and about the place in general. Managers, employees and visitors were interviewed in situ. This allowed us to know better who were where designing for, the target audience, and how to approach the next stages of the project.

Personas

Based on the Interviews and real information about the visitors, three personas were done, like the one on the image. This is an example that was drawn on a white board, while we were analyzing the data. The idea behind the design was to communicate the whole experience that the visitors get on the  SWLC.

Journey Map

To have a better understanding of the whole experience that SWLC provides to their visitors, we draw a customer journey map. Based on the visit and the data from the interviews, this exercise helped us to communicate the findings, like the behavior of the users and the common tasks users usually do when visiting the SWLC.

Content Inventory

The content inventory is a list of all the pages and files that the current Website contains.

Navigation testing

A card sorting exercise with potential users. The test helps to arrange the items in a more coherent way, according to the users’ own experience. This observation allowed the team take decisions about the new navigation and the site map.

Sketches

Hand drawn sketches, on templates for different devices, intended for a responsive design approach.

Style tiles

The team delivered a set of style tiles, with a  visual proposal of fonts, colors and interface elements that communicate the essence of the visual brand for the web.

Photography

Me taking photos
Me taking photos

The team took a large amount of photos and video. This allowed us to use original images on the Website.

Coding

The Website was built using a code editor called Brackets®, that is simple and fast. We created and edited the pages for the site, using HTML and CSS.

We used Bootstrap as starter framework, which gives us all the basic structure and functionalities for creating a responsive layout.

My main role in this project was  leading this part.

Responsive design

One of the goals was to make the Website mobile friendly, by delivering an design that adapts to every screen for every device. A large number of tests were done to make sure this was working.

Final Website on a desktop browser. It can be seen at savannahwildlifecenter.org.

About

Photo

My name is Mario, I am a user experience and user interface designer from Cost Rica. I like to create interactive digital products that are both appealing and functional. I have a background in graphic design, with experience on educational digital materials and web design.

If you think we can work together or just want to ask me something, feel free to contact me by email, or social media.

Resume