Website Revamp - CityLine

Project Brief

This is a ticketing platform for users to buy tickets/passes for Performance, Shows, Movies, and Workshops. Redesign it with trendy design style and better user experience for users to browse and buy tickets.

Target Users

Anyone buys tickets online for for Performance, Shows, Movies, and Workshops.S/he will browse the list of tickets and process with the online payment

 

Research & Analysis

Existing Website Design Findings

Overall

  1. Style is not trendy
  2. Some pages are not consistent
  3. Banner is not eye catching enough
  4. The newsletter section design is outdated
  5. The sitemap and the linkage of each page are confused
  6. The purchase flow is a bit redundant

UX & UI

  1. Placing the menu options on the right is difficult to use
  2. The menu bar is like buttons
  3. The usage of the filter is not intuitive enough
  4. The color scheme is a little bit dull
  5. There is no hierarchy for buttons

 

Existing Sitemap Findings

  1. It is confused to go the same destination but in different pages
  2. Too many links for the same destination, seems very convenient, but need to consider whether users need them or not
  3. Filter function is weak

 

Moodboard

 

Design Direction

 

Reference & Proposals

Proposed Layout Reference

 

Proposed Sitemap

  1. Clear separate the different types of page
  2. Use less entry point for same pages
  3. Simplify the information architecture

 

Color Versions

Version 1.1 - Bright mode with purple

Based on existing purple tone to adjust an more active color scheme

Version 1.2 - Bright mode with gradient

Combined existing purple tone with trendy blue to make a brighter gradient color scheme

 

Version 2.1 - Dark mode with breakthrough orange

Dark mode for creating an atmosphere of being on the show. Sharp orange for making the brand more outstanding.

Version 2.2 - Dark mode with purple gradient

Dark mode for creating an atmosphere of being on the show, with darker purple to make it mysterious.

 

Showcase

Style

Typography

 

Color Scheme

 

Interface

 

Key Improved Function

 

Mobile Friendly Design

 

Cases Consideration

 

Style Guide & Library