MYCITI BUS WEBSITE DESIGN
       
     
 The home page design. All the colours and tones were taken from the logo which was created by SWITCH agency. The over-all look is clean, with hints of grey blue and red. Red is used as the "action" colour, so a user would recognise this as them requiring to take an action on this colour, such as to click buttons or to scroll. 
       
     
 The Trip planner widget/tool was designed to draw the user's focus first and foremost as it is the most important tool the website offers, and the tool a user would most want to use. 
       
     
Behance.MyCiTi.homegif.2.gif
       
     
 Because there was so much content and information, a two-level navigation was incorporated in the design - the main navigation with icons, and a smaller less significant navigation to the top tight. This is how the navigation menus would look on hover-over. 
       
     
MyCiTiBUS.ManNavAnim.gif
       
     
 A cute little bus scroll icon design
       
     
 Social media icons appear in full colour on hover-over
       
     
MyCiTiBUS.ManNavAnim.gif
       
     
SQUARESPACE.MyCiti.Footer.jpg
       
     
MYCITI BUS WEBSITE DESIGN
       
     
MYCITI BUS WEBSITE DESIGN

MyCiTi is a high-quality bus-based transit system that was introduced to Cape Town in 2010. I was tasked to design their website. It needed to adhere to the above-the-line branding, as well as be highly user-friendly as it would service thousands of Capetonians and tourists. This was no easy task, as the website featured a lot of in-depth functionality such as viewing time tables, routes and even Google Maps integration. 
The website went live in 2013 {see link at end of project}. 

{design; art direction; UI; UX; IA}

 The home page design. All the colours and tones were taken from the logo which was created by SWITCH agency. The over-all look is clean, with hints of grey blue and red. Red is used as the "action" colour, so a user would recognise this as them requiring to take an action on this colour, such as to click buttons or to scroll. 
       
     

The home page design. All the colours and tones were taken from the logo which was created by SWITCH agency. The over-all look is clean, with hints of grey blue and red. Red is used as the "action" colour, so a user would recognise this as them requiring to take an action on this colour, such as to click buttons or to scroll. 

 The Trip planner widget/tool was designed to draw the user's focus first and foremost as it is the most important tool the website offers, and the tool a user would most want to use. 
       
     

The Trip planner widget/tool was designed to draw the user's focus first and foremost as it is the most important tool the website offers, and the tool a user would most want to use. 

Behance.MyCiTi.homegif.2.gif
       
     
 Because there was so much content and information, a two-level navigation was incorporated in the design - the main navigation with icons, and a smaller less significant navigation to the top tight. This is how the navigation menus would look on hover-over. 
       
     

Because there was so much content and information, a two-level navigation was incorporated in the design - the main navigation with icons, and a smaller less significant navigation to the top tight. This is how the navigation menus would look on hover-over. 

MyCiTiBUS.ManNavAnim.gif
       
     
 A cute little bus scroll icon design
       
     

A cute little bus scroll icon design

 Social media icons appear in full colour on hover-over
       
     

Social media icons appear in full colour on hover-over

MyCiTiBUS.ManNavAnim.gif
       
     
SQUARESPACE.MyCiti.Footer.jpg