- work
- indexspaces
.work('indexspaces')
Scope of work
Branding, UI/UX design, database design + implementation, full stack development (CakePHP), testing and deployment to AWS (EC2 & RDS)
Brief
To design & develop a bespoke e-commerce marketplace for booking activities and experiences as well as a portal for clients to manage their activities and schedule.
Given that this was a platform that would potentially be used by a wide range of demographics, it was important to ensure that the UI was easy-to-use and adhered to best web accessibility practices.
Approach
“Give me six hours to chop down a tree and I will spend the first four sharpening the axe." - Abraham Lincoln
First step was to plan everything out, both from a front-end and back-end perspective to help ensure that what I was building was fit-for-purpose.
This involved creating wireframes, sitemap of the structure of the website and also the design of the relational database by means of creating an Entity Relationship Diagram.
UI/UX
Making the site easy-to-use was at the forefront of my mind.
Problem
One UI/UX problem I faced was deciding how to clearly show which date a particular activity was available on and then allow the user to book that date in an easy and intuitive way.
Solution
The end solution was creating a modal pop-up with a calendar depicting the dates available, and upon making a selection of a available date the user would be shown with the price and a “Book” CTA directing them to the booking page.
In addition, during the branding and design stage, I made sure that the choice of colour palette for the website conformed to the Web Content Accessibility Guidelines (WCAG), satisfying at least the WCAG 2.0 level AA requirement.
Seamless search
Carrying on the theme of ease-of-usability, I wanted to make sure that users were able to search and book activities/experiences by means of providing useful filters with as little friction as possible.
The search listings page is powered by Vue.js. It returns search results by consuming REST API’s that I created server-side.
The list of categories for the “Keywords” dropdown list is retrieved via said API endpoint. Upon clicking in to the “Keywords” field, the user is presented with a list of activities sorted alphabetically with the ability to filter that list by typing in keywords. Hitting the enter key then adds that keyword as a ‘tag’ and the user is able to add/remove multiple tags.
To reduce load time, the initial search only loads in a certain number of results. Subsequent results are lazy loaded as the user scrolls down the page.
In addition, each time the user updates a filter, the URL parameter is updated to reflect the users filters, which means if the user was to return to the page by clicking the back button, it would have the filters pre-selected along with the filtered list of results.
Performance
Numerous measures were taken to maximise website performance and minimise response times. Measures such as deferring render blocking scripts, server-side asset compression (gzip), minimising CSS and script files, lazy loading images, using `svg`’s instead of `img`’s wherever possible, adding responsive media query images all helped to reduce page load time.
Secure
Due to the nature of being an e-commerce site with multiple role levels, special consideration had to be given to the security aspect of the site.
There were authenticated areas on the platform for admin, clients and customers and I had to ensure that users were only able to access areas corresponding to their role level. This was done through adopting the role-based access control within CakePHP.
In addition, I also had to ensure that any REST API endpoints created were also governed by the role-based authentication to prevent unauthorised access.