Mobile UX/UI Design, Web UX/UI Design & Web Development
Dylan Seedin, Ahmed Kamel
Colombo, Sri Lanka ©2021
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
Wedding planner app
Wedding planner app with checklist, budgets and venues
Digital wedding planning app
Travel App for hotel & home reservation deals
Table reservation system
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.
Key user flows such as registration, searching for a vendor, checking for availability, booking a vendor etc lack user experience.
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.
All discussions, confirmation or planning are done verbally through a phone or email conversation without a streamline process in place.
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.
The app offers generic solution, there are no packages that a user can customize to suit their needs.
Lacking multilanguage support. This is important as you cant assume everyone knows english. This is key to achieving a good user experience.
By synthesizing all the data from user research, insights are generated, grouped and prioritized. As a result, value propositions for gala.lk are established.
An app listing local venues with easy booking with price estimation, guidance, simple booking flow and availability check.
Offer hand-picked packages based on users inputs and offer customization options.
Create a direct, straight forward process for users to book venues, vendors and managing event preparations.
The app needs to support multiple languages and metrics unit support system.
Present relevant information with clear structure and assist users in achieving and comprehending data easily as they need.
Provide seamless experience and transparent process so that users always get up to date about their progress.
Accurate data with high credibility, streamline process, allowing users to perform all necessary outcomes.
Empower users with full fledge customization ability, along with recover or cancel their actions with minimal to zero impact.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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
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.
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.
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.
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.
While working on the layout using grid, I further enhanced the code by using auto and minmax functions to make the layout automically responsive.