Project Description
The goal of this project was to organize and design a large website. This project was completed in a group of four, with two design students and two computer science students. Our group combined four of Edmonton's Outdoor Attractions sites into one website. This project was completed for an Information Architecture class.
This project was completed in collaboration with Marco Tse, Michael Mannerow, and Zach Empson.
Programs Used
Adobe XD
Adobe Illustrator
Optimal Workshop
Methods
Card Sort
Understanding how users would organize the categories of the website.
Learning why and when people use the current sites.
Comparative Analysis
Comparing how similar sites (municipal & outdoor attractions websites) organize their information.
Wireframes
Lo-fi Wireframes
Style Tile
Reorganized Site Map
Homepage Design
Mid-fi Wireframes
Hi-fi Wireframes
Tree Testing
Tree testing the completion of tasks.
Collecting feedback on the redesign.
Revising site map.
Tree Testing & Card Sorting
Card Sorting Activity Overview
(Optimal Workshop)
Each member of the group facilitated a card sorting activity through Optimal Workshop. Participants were asked to categorize sections of the website. We also asked questions to learn why, when, and where they would use the website and how frequently they would visit.
Insights:
Most participants grouped the items by location (e.g. cards for the Zoo were sorted together, cards for Fort Edmonton were grouped together, etc.)
Participants seemed most interested in the information needed to visit one of the attractions: hours, location, admission prices, tickets, etc.
Participants said they would use the sites sparingly, only when planning a trip to one of the attractions.
Tree testing, comparative analyses, and user testing of the lo-fi wireframes helped inform the evolution of the site map.
Following the tree testing, we made the following changes:
Event bookings were grouped in a tab in the main navigation, allowing users to compare bookings across all locations quickly.
A "Visit" tab was added in the navigation for each attraction's pages, which included information such as hours, admission, etc. This allows the user to find crucial information for visits quickly. During the comparative analysis, we found that similar sites did this.
Navigation for the Zoo was condensed by grouping similar pages.
Tree Testing Activity Overview of First Two Tasks
(Optimal Workshop)
Site Map Evolution
Version 1
Version 2: After Tree Testing
Version 3: After User Tests of Lo-fi Wireframes
Style Tile & Homepage
I created a style tile and homepage design for our group.
Current Sites
Redesigned Homepage
(Mid-fi & Hi-fi Wireframes)
Each group member created lo-fi wireframes. From there, we split the work and the design students were tasked with creating hi-fi wireframes and prototyping.
The lo-fi wireframes shown below were created by Michael Mannerow.
Lo-fi Wireframes from Group
My Hi-fi Wireframes
After feedback from card sorting and user testing, we decided each location should have a landing page that quickly provided crucial information.
Logo Development
Logo Concepts
Logo Design
