- Research (interviews, journey map, personas)
- Content inventory and navigation testing
- Style tiles
- Responsive web design with HTML and CSS
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.
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.
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.
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.
The content inventory is a list of all the pages and files that the current Website contains.
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.
Hand drawn sketches, on templates for different devices, intended for a responsive design approach.
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.
The team took a large amount of photos and video. This allowed us to use original images on the Website.
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.
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.