Gala.lk

My Role

Mobile UX/UI Design, Web UX/UI Design & Web Development

Other Members

Dylan Seedin, Ahmed Kamel

Location & Year

Colombo, Sri Lanka ©2021

Overview

Gala.lk is an app with its purpose to help users have an efficent and organized lifestyle including event management with access to all top class vendors around them. The app also assist wedding couples in booking and preparing their wedding ceremony by giving them the ability to easily book venues, vendors and streamline the whole process. The user can also book public events, movies or hotel rooms providing complete convience to the users lifestyle.

The Goal

Busy indiviudals need a well customized and easy tracking vendor booking system for all their lifestyle needs from wedding planning to taking their family on nice vacation while providing options for customization. The goal is to design an app that helps finding venues, vendors and event management in one place. I highly priortized understanding the challenges that users might face in the booking and reservation processes.

Process

Gala User Flow
1
User Emapthy

I conducted user interviews and empathy maps to understand the users and their needs. There are two specific user groups that fits as ideal candidates based on high pain points: Individuals who wish to have a smarter lifestyle - booking a movie ticket, booking a hotel room, event tickets or make a table reservation in a quick and efficent way. Couples who wish to be married but need to find a much efficent way to organize their wedding instead of tedious tasks such as booking venues and bearing vendor cancellations.

Interview Goal

The goal is to understand the process users have to take in order to make bookings with vendors and how long couples take to prepare for their wedding. I need to carefully analyse their needs vs their frustrations to comply with time, ettiques and priorities. It is important to understand the current process and timeline of users to make vendor bookings, organize events vs their pain which makes it easier to find loop holes and provide effective UX design solutions. Below are some of the painpoints highlighted during the interview process:

" I have to check all the cinemas halls around me for a convient date and time. Imagine going through different websites with different experiences to buy a movie ticket. "
" Some guests will not inform when they wont be available for the event, especially weddings. It will be great if we can have a platform like a social app that is specially for events where we can keep track of the guests in real-time. "
" Weddings are extremely exhausting especially when you need to move back and forth between the vendors for a convient date. Once we finalise the decisions, we realize it passes our budget and we have to start the whole process again with another vendor. "
" My videographer bailed on my wedding day due to unavoidable circumstances and that ruined my whole day completely. It was hard to get hold of another videographer for the wedding on short notice. It will be great if we can have a platform where we get access to vendors and check real-time availablity. "
" Preparation for a wedding is exhausting and time-consuming. I wish we could find a way to automate the whole process so we dont have to get stressed for every task until the wedding day. "
" Whenever I visit my saloon, I have to wait for long queues until my turn arrives. It will be nice if there is a digital system for all vendors to use to provide access to customers to check for availability and make bookings accordingly. "

Pain Points

These user groups validates the initial assumptions we made but research all reveals that event planning and organizing is not the problem. Availability of the vendors is key to creating an successful lifestyle and event plan app to provide visibility to users with a state of the art booking and reservation system with real-time availility. Prices need to be visible instead of users having to call each vendor back and forth to check for prices that fits their budget.

2
Define

Based on the painpoints of user groups, I built a user persona that represents the ideal target audience of the app where most of the problems are common to all other groups. This will be used as a representation of the customers to marketing and development teams to ensure all stakeholders have the same target in mind when we contribute to the app building process.

Gala Target Audience
" To have a digital app that can provide access to all vendors with real-time availability for any of my lifestyle needs will be a life saver. It will be so much easier to organize my days by easily booking vendors and making reservations without the need for calls and confirmation. Also, my family keeps pushing me to get married but the thought of marriage preparation itself gets me stressed. "

— John H

Who?

John is a software engineer and generally lazy all the time. He prefers to do things in a smart way rather than putting alot of effort to do simple tasks. John will not step outside to catch a cab but rather book it via uber to get a cab in a easy and efficent way. His family has been hinting him to get married but he is overwhelmed by the idea of wedding preparations and wish to take no part in it. He loves automation and believes that modern problems require modern solutions.

Problem

  • I dont like to visit all the cinema websites to check for availability
  • I dont know how, when and where to start planning the wedding
  • I dont like having to decide and find vendors for every single thing from deco, setup, band, lights excitement
  • I dont like to wait for my turn to get a haircut neither make calls for appointment
  • I want to go out and check out events that are interesting and close to my location without asking someone or checking through social media

Goal

  • Can book movies at any cinema through online booking system
  • To easily organize and celebrate his wedding in a stress free approach and enjoy every moment with his friends and family.
  • Can book the next public event to make new friends and have fun.
  • Can focus on his work and complete his tasks without thinking about wedding planning
  • Can take his fiancee on a beautiful date night to a fancy restuarant by making the table reservation in a smarter way.

Problem Statement

John is a young engineer who is an introvert and minimalist. He dislikes the fact that there is no proper solution for all his lifestyle needs from booking a movie, organizing a wedding to making a table reservation at his favourite restaurant.

3
User Journey Maps

Mapping personas user journey revealed how helpful it will be for users to have access to a dedicated lifestyle & event app. This helps gain insights into common customer pain points so we can design an app that delivers a more optimised and personalised customer experiences.

Gala User Journey Map
4
Competitor Analysis

The purpose of this phase is to understand the competition around the business to ensure gala.lk has a competitive advantage by analysing their competitors features and services to look for gaps that gala.lk can use as opporunities. Here, we analysed wedding, event planner, hotel and tabe reservation apps.

Hitched

Wedding planner app

Bridebook

Wedding planner app with checklist, budgets and venues

MarryMe.lk

Digital wedding planning app

Booking.com

Travel App for hotel & home reservation deals

My Table

Table reservation system

Gaps

During research on the competitor apps, my primary focus was to figure out if the competitor apps actually solved the user groups problems. I concluded on the competitor gaps that gala can capitilize on to have a competitive advantage over their competitors.

User Experience

Key user flows such as registration, searching for a vendor, checking for availability, booking a vendor etc lack user experience.

Guidance

No proper guidance on what to expect after app registration. Where does the customer go to once they click this button? Or what happens if they do something else instead? Its quite clear that the userflows and journey maps were not used as a priority during the app building process.

Centralized Process

All discussions, confirmation or planning are done verbally through a phone or email conversation without a streamline process in place.

Presentation

The branding and the overall presentation needs improvement. It does not have to be fancy but it needs to look professional and at the same time, implement good UX and performance.

Personalization

The app offers generic solution, there are no packages that a user can customize to suit their needs.

Multi-language

Lacking multilanguage support. This is important as you cant assume everyone knows english. This is key to achieving a good user experience.

5
Ideate

By synthesizing all the data from user research, insights are generated, grouped and prioritized. As a result, value propositions for gala.lk are established.

Centralized Marketplace

An app listing local venues with easy booking with price estimation, guidance, simple booking flow and availability check.

Smart Package

Offer hand-picked packages based on users inputs and offer customization options.

Streamling Process

Create a direct, straight forward process for users to book venues, vendors and managing event preparations.

Multi-language Support

The app needs to support multiple languages and metrics unit support system.

Accessible

Present relevant information with clear structure and assist users in achieving and comprehending data easily as they need.

Professional

Provide seamless experience and transparent process so that users always get up to date about their progress.

Reliability

Accurate data with high credibility, streamline process, allowing users to perform all necessary outcomes.

Flexibility

Empower users with full fledge customization ability, along with recover or cancel their actions with minimal to zero impact.

Userflows
Gala User Flows
6
Design System

In order to create maintainable and scalable UIs, I created a branding and design system for the gala.lk app. It not only helps the workflow become more efficent, but also establishes principals for gala.lk to follow through consistently, which will ultimately enhance user experience.

Logo
Gala Logo
Colours
Gala Branding Colours
Typograhy
Gala Typography
7
Sketches, Wireframes & Mockups

Once the branding system is finalised, I worked on the sketches of the screens obeying the branding practises and guidelines. The approach was to ensure usability of the app is at its optimum where user does not have to go through long, tedious and time-consuming screens to complete a simple task.

Sketches
Gala Web Sketch
Low Fi Wireframes
Gala Web Wireframe
Login / Sign up

Here we focused on the easiest way a user can sign up to the platform. Many apps now have google and facebook login integration to make the user login / sign up to the app at a much faster pace and easy approach.

Gala login userflow
Browsing Events

Here, I focused on making sure the users browse events, vendors etc easily by using the search, and filters - type, location, dates etc. Users can search for events, cinemas, restaurants, night clubs etc easily and make confirmed bookings or reservations.

Gala browse userflow
Create a wedding event

Users can now create and manage a wedding event in just a few steps. By selecting wedding, users can select sub-events so they can manage event each individually - vendor, deco etc. Users can also include co-hosts eg: partner, friend or family member to help organize the event.

Gala browse wedding userflow
Create a public event

Users can also create and manage public events in quick and simple steps. Users can quickly book vendors, add event info, create custom tickets with price visibility, send special invitees and go live anytime they wish to.

Gala browse wedding userflow
Book a spa appointment

Users can view the complete visibility of the spa inclusions, timings, categories, price etc before making the booking. They can select the type of service they wish to proceed with and also they can now select their preferred employee for the job. Users can also add a guest - friend, family member or partner they like to go on a spa date with.

Gala browse userflow
Book a movie ticket

Users now can easily browse for available upcoming movies or their favourite cinemas around them. Choice of cinema hall, seats and prices can easily be viewed through the real-time booking system.

Gala browse movies userflow
Book a hotel room

Users can search for their favourite hotel for their next vacation using the real-time booking system. Users can easily view the location, room images, reviews and make the booking accordingly.

Gala browse movies userflow

+ 45 Screens

8
Web Design

I used my research on branding and user persona to design the website as well. The overall strategy for the website was to create a simple landing page that provides potential users and vendors a clear description of the gala product, what to expect from it and how it solves their lifestyle problem. Vendors have a separate login access to customize their vendor profile and info accordingly.

Sketches
Gala Web Sketch
Low Fi Wireframes
Gala Web Wireframe
Hi Fi Wireframes
Gala Web Wireframe
9
Web Development

I used my front-end skills to convert the design to code. I used relevant strategies to ensure website performance optimization by best practises, SEO and load speed using relevant tools.

Process

Tools

I used the VS Code Editor to code using - HTML, CSS, SaSS and JavaScript. I used SaSS to create variables and separate files for different components to keep things organized and easily accessible.

Design System

I created variables for colours, typography, buttons and shadows to easily access them across all my other SaSS files. I also created a system for general font sizes, padding, margins etc to avoid repeating code

Layouts

I easily created layouts using the power of CSS Flexbox for one-dimensional + CSS Grid for two dimensional layouts. Its easier to work on the design by scanning through section by section and solving them using relevant layout strategy accordingly.

Dev Setup

I have installed relevant packages using npm packages such as live-server, node-sass, compile sass to css etc to make the development environment easy to work with.

HTML

I used HTML for file links - font, css & js, content, classes, images using relevant tags. I also make sure to fill the alt attributes for images to ensure I'm using best practises for SEO

CSS

I used Sass complied to CSS for text, component customization using sass variables for colours, typography, padding, margins etc. I use flexbox and grid for one or two dimensional layouts easily with less effort. I used media queries to ensure the website is responisve to all screens from big desktop to small mobile screens. I also used keyframes for custom animations and interactions.

Javascript

I used the DOM to access HTML elements to provide dynamic changes. I used JS for smooth scrolling, toggling the burger menu for the nav items on mobile screens and also fixing the gap property problem in old safari iPhone screens.

Responsive Design

The overall strategy for good responsive design is to manually work on the resposive design from big desktops (2500px) to smaller mobile phone screens (150px) instead of using pre-set breakpoints. I used percentage (%) units for image dimensions to make it responsive automatically. I used rem units for padding, margins etc to make it easily responsive by simply changing the initial set rem value for overall html.

Optimizations

I optimized the website by using the lighthouse feature on browsers for website performance testing. I focused more on the best practises, performance, SEO and accessibility of the gala website.

Final Considerations

While working on the layout using grid, I further enhanced the code by using auto and minmax functions to make the layout automically responsive.

Visit Website