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