
GOLF BURNABY
Redsigning for a more responsive website
OVERVIEW
GOAL Design a mock-up website that is cleaner and more responsive
TASKS Ideation, sketching, coding, designing
TOOLS HTML5 , CSS,
Javascript, Axure
Team Danielle Ragas, Iris Wong
TIME Fall 2014
DETAILS
The goal of the final course project is to re-design the graphic and information content to improve the user interface. Additionally, it has allowed me to become more familiar with HTML, CSS, and Javascript through coding and designing the 10 interactive pages on the website with my 2 team mates.
In this project I coded most of the final website layout, but specifically focused on the homepage, about page, and the news page.
![]() | ![]() |
---|---|
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
PLANNING
During the planning process, I sketched out how the website can potentially look. While developing the concept sketch, I gathered reference website, and implemented parts I like into the concept sketch.
We also created flowcharts to visualize the booking process for a tee-time. Similarly, a sitemap was created for organizing the pre-exiting pages for better visualization.
![]() | ![]() |
---|---|
![]() | ![]() |
![]() | ![]() |
AXURE WIREFRAMES
Axure was the program we used to create quick, clean wireframes on how the website could potentially look on computer and mobile screens.
![]() | ![]() |
---|---|
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() |
![]() |
---|
![]() |
![]() |
![]() |
![]() |
![]() |
Staying true to our Axure wireframe, while our 1st website iteration is simple looking, it is clean wth clear affordances.
However as we conducted 8 demographic user testings and interviews on the usability of the website, we found out that the website is a bit plain and does not grab a lot of attention.
FIRST ITERATION
FINAL WEBSITE
![]() | ![]() |
---|---|
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |