Momentfood

A responsive multi-brand food pick up and delivery website.This included the ability to find branches nearby, options for delivery or in-store pick-up, and elements that emphasized what the company wanted to push to customers.

Overview

While I was a Software Developer for The Moment Group, one of the most successful group of restaurants and establishments in the Philippines, I was tasked with designing and developing their multi-brand food pick-up and delivery website.

The Problem

The website had to encourage customers to browse menu items from various restaurants and make it clear the option to choose between delivery and pick up was possible.

It also needed to be responsive in case users accessed it using phones or tablets.

The Solution

- Developing the website's responsive design with flexible grids, collapsible sections, and resizing fonts and buttons

- Emphasizing the information that the company wanted to push to the users without overwhelming them

Design Process

1. Research

Researched on user friendly designs for websites with large amounts of data and ideal programming languages to use.

2. Design

Created and presented customer journeys, mock ups and wireframes before beginning development.In this phase, the workload was divided into sprints.

3. Develop

Used PHP, HTML, Javascript, and CSS to develop initial structure and afterwards, more detailed elements per sprint.

4. Test & Improve

Presented sprint outputs and designs for the upcoming sprint and identified possible improvements through testing. Continuously improved and made changes until we were ready to move on to the next sprint.

Wireframes & Structure

Designed wireframes to visualize thepage structure and user flows

Initial Structure

I developed an initial responsive prototype with placeholders to explore possible layouts and interactions.

Final Prototype

A responsive website with organized elements that emphasized information the company wanted to push to customers. This included showcasing multiple brands, option to deliver or do store pick-up, and ability to find branches nearby current location.

PHP, HTML, CSS, and Javascript were used to bring the designs to life. Autocomplete for addresses and map utilized Google Maps API.

Key Learnings & Takeaways

Responsive Design Drives Accessibility

Throughout my time at The Moment Group, I discovered the pivotal role of responsive design in ensuring website accessibility. By implementing techniques like flexible grids and font resizing, we optimized the site for various devices, enhancing user experience and expanding our reach.

Simplifying Information Fuels Engagement

By maintaining a clean and organized layout, users can easily navigate the site and find the information they need without feeling overwhelmed. Simplifying text hierarchies and focusing on a muted color palette helped to create a visually appealing yet user-friendly interface. This emphasis on simplicity ultimately enhances usability and ensures a positive user experience.