Website Case study

Foodel

Consultation

A complimentary consultation is the first step in our website development approach. Below you'll find the results of our conversation with Foodel.

Project On Device(s)
Company Name: Foodel
Location: Jacksonville, FL
Industry: Food Delivery
Development Type: Website
Scope: Design and Development

User Stories

After the consultation we ran a story creation workshop with Foodel. Below you'll find the results of the workshop and how the stories were prioritized.

Must Have

Index Card Background
Attractive header to draw visitors into the page
Index Card Background
A feature section highlighting the benefits of subscribing
Index Card Background
A food gallery to display popular meals
Index Card Background
A simple instruction section showing visitors where to download the app
Index Card Background
A location section to show the currently serviced cities
Index Card Background
A pricing section to show the different subscription packages and their benefits
Index Card Background
Pricing section redirects visitors to the app download
Index Card Background
A contact section so visitors can provide feedback
Index Card Background
A testimonials section to showcase what customers are saying about the service
Index Card Background
Uniform color scheme and branding between the app and the website

Nice to Have

Index Card Background
Ability to sign up on the website
Index Card Background
Chat bot integration with Zendesk to provide customer support
Index Card Background
Order tracking through Google Maps by entering order info
Index Card Background
Social media links
Index Card Background
Blog integration
Index Card Background
Newsletter signup to showcase newest meals

Maybe Later

Index Card Background
Visitors have the ability to manage their orders and accounts on the website
Index Card Background
An admin panel to manage app users
Index Card Background
Converting the website to a web app and allowing users to order online
Index Card Background
Add an AI bot to support with frequently asked questions
Index Card Background
Delivery driver login to show their delivery route
Index Card Background
Twitter integration to showcase latest tweets and customer experiences

Wireframes

Foodel required both design and development services so our design team created wireframes to show how the user stories will be integrated into the final product.

Iterations

After sizing up the stories for Foodel, we grouped them into iterations that can can be developed and tested in a 1-2 week time frame.

Iteration 1

Week 1
  • check
    Design and development environment setup
  • check
    Asset collection and review
  • check
    Wireframe review

Iteration 2

Week 2
  • check
    Color scheme selection based on web app
  • check
    Header Design and Development
  • check
    Navigation Design and Development

Iteration 3

Week 3
  • check
    Feature section design and development
  • check
    Gallery section design and development

Iteration 4

Week 4
  • check
    Download section design and development
  • check
    Locations section design and development

Iteration 5

Week 5
  • check
    Testimonials section design and development
  • check
    Pricing section design and development

Iteration 6

Week 6
  • check
    Contact section design and development
  • check
    Development for the contact form backend support

Iteration 7

Week 7
  • check
    Footer section design and development with Social Media Links
  • check
    User acceptance testing
  • check
    Minor bug fixes before release

Iteration 8

Week 8
  • check
    Release
  • check
    Emergency support standby as website is tested with live traffic

Technologies used

Once we had the iterations laid out, we were able to choose the most fitting technologies to build Foodel a modern, secure, and scalable website. Here is a list of the technologies we used:

Client Side:
html5 HTML5
css3 CSS3
javascript JavaScript
react React
Jest
Tools:
git Git

Challenges & Wins

As with most projects, Foodel had some unique requirements that required creative solutions. Below you'll see how we approached these challenges.

Case study challenges
Foodel had a list of user stories that, when iterated, exceeded their development deadline.
plus

The Foodel team had a moderately sized list of user stories but many of them were large and could not fit into their 2 month deadline.

Using an agile approach we prioritized, sized and iterated their stories to provide them with a website that provided the core functionality they needed to promote their mobile application.

They now have the option to integrate the remaining user stories for their next release.

Foodel considered converting their presence website into a web application to enable ordering.
plus

Instead of simply promoting their mobile application, the Foodel team considered building a web application to mimic their mobile app.

The Tactic Apps team showed Foodel that this wouldn't be possible in the 2 month time frame by iterating through the web application.

It was decided that promoting their mobile application would remain their main goal in the first iteration of their website.

Not all digital assets were provided at the beginning of the project.
plus

Foodel had a small team of people with many responsibilities. Unfortunately they were unable to deliver all the high resolution images required for all the sections of the website due to other commitments.

Instead of pausing the project, the Tactic Apps design team proposed using some high quality stock images that fit well with the design. These were accepted and allowed the project to remain on track.

Due to much back and forth on user story priorities, selecting a development technology was challenging.
plus

For general website design and development, the Tactic Apps team will use a static site generator like Gatsby. However, due to the potential of converting this website into a web application on the second release, we decided to work with React.

Using React will save the Foodel Team time and money when it comes time to allow users to order online.

The Google Maps API integration stopped working on release day
plus

On release day the Contact Section on the website showed a big Google Maps error. Tactic Apps provides emergency support so we immediately went to work to locate the underlying cause.

After about and hour we discovered that the credit card on file with Google had expired and needed to be updated. We had the website back to full operation within 70 minutes.

Case study challenges

Project Results

With all iterations completed, we produced a website{" "} that Foodel can be proud of. Below you'll see the effort it took and the consequent results.

Team & Effort
users
1
Developers
credit
65
Hourly
calendar
2
Months

Let's build your Website Together

Fill in the form below and tell us about your project. Feel free to attach your NDA or any supporting documentation. We’ll get back to you within 24 hours.

phone

+1 346-268-7886

Don't hesitate to contact us.

mail

info@tacticapps.com

Please complete the form or email us directly.

location-pin

Headquarter Location

Houston, TX
77433, USA

Tactic Apps Logo
Tactic Apps

We bring your vision to life by developing modern web and mobile applications focused on the end user experience.

© All rights reserved. 2022 TacticApps.com
Contact Us
phone

+1 346-268-7886

mail
location-pin

Houston, TX
USA

Contact Us
phone

+1 346-268-7886

mail
location-pin

Houston, TX
77433, USA

© All rights reserved. 2022 TacticApps.com