Hydra Creative designed a meal ordering system which is a unique food ordering website, Nutri-Fast.
Nutri-Fast is a Rotherham-based start-up with plans to disrupt the current meal prep market, providing farm-to-plate custom meals, available to order directly through the website.
One of Nutri-Fast’s Unique Selling Points is that each of their meals is freshly cooked, with no freezing or storing, allowing the customer to receive the very best food at home, thus enhancing their performance.
Nutri-Fast needed a platform that provided a streamlined meal ordering system to help establish them within the market and continue to grow for the foreseeable future.
The website would need to include key elements of functionality, such as the creation of custom meals both by the end-user and the Nutri-Fast admin team. It would also need to facilitate the logistics of running a kitchen and delivery. All of these elements help to generate revenue directly from the website. The admin team also needed to be able to easily pull data from the website to create reports on various key stats, including stock, sales, and wastage.
It was crucial that the website was designed and fully optimized for mobile and tablet devices, making it as easy and intuitive as possible for users across every device to navigate the website and order their meals as quickly and efficiently as possible.
Hydra Creative started by designing a unique meal-ordering website. When designing, they wanted to concentrate on creating a simple customer journey, so to assist with this, their design team looked at business analogs in other markets, specifically in offering multiple selectable options within four food groups. Alongside this primary UX journey, a secondary consideration was to build Nutri-Fast as a center for knowledge for its target market, and a thought-leader in nutrition, fitness, and exercise.
The meal builder is the primary function of the website. So, Hydra Creative developed something that was easily customizable, simple, and efficient for the end-user. They made it simple for the user to follow dietary requirements and calculate macros. Once the user has selected their meal plan, they were then able to save it to the account area, share the plan by email via Mailchimp, and order quickly, using the integrated payment platform Stripe.
Hydra Creative built an ordering and delivery function that allowed Nutri-Fast users to either choose delivery or pick up with a choice of timeslot. This function also allowed for the use of referral codes and redeemable points, as well as offering a pay-as-you-go or subscription option.
Nutri-Fast also required a way to track and manage orders as they came through the website. Orders are displayed in order of the time they are required and whether they are for pickup or delivery. Once orders are prepped, they are sent to be packed, and individual labels are printed directly from the bespoke CMS.
Reporting was something Hydra Creative built into the system so that Nutri-Fast could easily see sales, stock/wastage, and referrals, all through data gathered by the website. With their integrated PDF and Excel generation software system, efficiency has increased for the Nutri-Fast administrators.
One of the main difficulties Hydra Creative faced when designing the new website was finding a streamlined way to present a large number of customization options, so that the user wasn’t overwhelmed by the amount of choice, and could seamlessly jump between sections.
Combining UI and UX with filters in the code allowed them to guide the user through the relevant fields, and prompt when parts were missed. Another significant challenge was to make this large amount of customization easy to use on mobile devices, due to the smaller working area. Hydra Creative overcame this with collapsible menus and further focus on guiding the user through the selection process.
When it came to the development side of the Nutri-Fast website, they found that it was a challenge trying to optimize performance for the end-user.
Hydra Creative knew it was crucial to make the building and ordering element of the site as fast as possible, to keep the users engaged. They did this by avoiding popular web development libraries such as jQuery to save on the long load times that would come from the inclusion of a large library, and by limiting the number of requests that are sent to the server by using local storage. This meant writing a lot of the website in Vanilla Javascript, which, along with the use of local storage, provides the user with a more rapid experience.
In the website’s first four weeks after launch, it saw over 2,100 unique visitors and had amassed 9,600 page views.
About Hydra Creative
Founded in Sheffield, the UK in 2009, Hydra Creative has grown to become a national award-winning agency respected and sought out for their advanced in-house capabilities.
Written by: