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
- Style is not trendy
- Some pages are not consistent
- Banner is not eye catching enough
- The newsletter section design is outdated
- The sitemap and the linkage of each page are confused
- The purchase flow is a bit redundant
UX & UI
- Placing the menu options on the right is difficult to use
- The menu bar is like buttons
- The usage of the filter is not intuitive enough
- The color scheme is a little bit dull
- There is no hierarchy for buttons

Existing Sitemap Findings

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

Design Direction

Reference & Proposals
Proposed Layout Reference

Proposed Sitemap
- Clear separate the different types of page
- Use less entry point for same pages
- 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
