Design and build Lifestyle Hub CMS in Webflow
Overview
AirAsia RedTix is an event ticketing company who strive to be a digital ticketing company. They have been covering most of the events happening in Asia country as well as in Australia. Some of the event that AirAsia RedTix has covered are Ultra Singapore 2017 & 2018, Rugby World Cup 2019, Neon Countdown and many more.
Challenges
Challenges that I face during designing and building the CMS in Webflow were:
-
I need to learn Webflow from the scratch and it took me a month to finally understand the software work
-
Facing tough time when adjusting the fix width part and playing with column inside the webflow
Role
Senior UX/UI Designer
Design Research, User Flow, Architecture Sitemap, Wireframing, Visual Design and Build Design in Webflow
Project Time
3 month until finish development
2019
Goal
-
Design content management system in Webflow where the content writer could upload the article and manage their articles independently
Background
AirAsia RedTix is one of the main clients in Bakehouse Venture Builder. I have been working with them for 4 years since the first day I worked in Bakehouse Venture Builder. For this project, I am the only designer that responsible to handle the design and building the pages.
Designer and development in the same time
This project allowing me to learn and gaining experiences using Webflow and surprisingly it was fun and exciting. In the beginning, it was a bit tough as I have to watch a lot of YouTube videos as well as watching Webflow University tutorial. Once I start playing with the tools and explore the software, I get the understanding of utilizing the software. Based on this project, I highlight a few things achievement which are:
-
Inspired while learning. Getting the opportunity to learn and using Webflow somehow give me an insight on designing an event management system as there are some feature or function that I miss while designing an event management system.
-
Ready for a new challenge. Always up for the new challenge either can be design or doing the technical thing because it might help you to understand the way the system works in a different perspective.
Define The Problem
AirAsia RedTix involved in the entertainment industry and we figure out to have a content page where we could do content writing around it. Also having this content writing could contribute to the generation of lead by using this platform to advertise event or content around it.
​
In order to do that, I use Webflow as it doesn't involve any coding and I could set up the CMS in the simplest way and no time consuming.
Discussion & Requirement Setup
We start by having stakeholders meeting to understand their requirements and needs. Based on the discussion, we lay out the list of requirements that would be on the page and the flow of the screens.
Brainstorming on the content & deadline to deliver the Lifestyle Hub
Based on the brainstorming, we discuss and I showcase news & blog UI templates that I found while doing research for design inspiration. I present to them the one that I like and the reason behind choosing those template. After the presentation, we all agree to choose Invision kind of blog as inspiration for Lifestyle Hub UI.
Wireframe & UI Design
I begin the wireframing of the page and as it done, I show to the stakeholders for approval. Once it get approve, I began the UI design in Figma.
Wireframing the concept of Lifestyle Hub
UI for Lifestyle Hub pages
Development in Webflow
Once the UI design have been approved by stakeholders for development, I start to put together the design in Webflow. I begin designing the screens interface. Once the screen interface is done, I setup the CMS format and linked it with the screen interface.
Outcome
Since the CMS site is done, RedTix is able to hire a content writer to upload their articles and manage the site on their own. Also, RedTix gets generation lead by an event organizer who interested to advertise their event in Lifestyle Hub. Design in Webflow is actually an exciting experience as I somehow could straight away design in it rather than doing the UI in Figma. Not to mention time efficiency as I don't rely on engineers to get the site up and running. Lifestyle Hub link here
Project Information
Design Tools
Figma, Evernote, Webflow
