indigo kids

Menu123.com

food ordering made easy

Menu 123 is a free online food ordering platform that connects hungry diners from New York, New Jersey & Philadelphia with more than 1000 local restaurants. Diners can now eat what they want, when they want, where they want. No more drawers full of outdated old menus! Now the most up-to-date menus for people favorite restaurants are in the palm of their hand. It's so easy and convenient. Customers simply browse to find the type of food they want to eat, place the items into their cart and then prepay for their oder - it's that simple. Regardless of your cuisine preference or time of day, Menu123 can help satisfy their cravings.

How Menu123.com works

First Menu123 need your address to show who delivers food in your neighborhood. Menu123 searches its network of delivery restaurants, and shows you a list of restaurants that deliver to you. Delivery to your home, office or campus, or wherever you may be.

Browse food delivery and takeout restaurants menus, read reviews, and enjoy coupons and discounts. You can choose a restaurant according to a cuisine you like, such as Pizza, Chinese food, Thai food, Indian, and even Mexican food, by their distance from you, rating or by reviews left by other customers.

View the menu, choose delicious items you like and place your order online. Menu123 will send your order details to restaurant by email, fax, phone call. The moment restaurant confirms your order Menu123 will send you notification by email & SMS. When your food’s ready, the restaurant delivers it or you pick it up. All you have to do is sign for it and enjoy it!

Visit Menu123 website

“Hello, will you help us to build a startup?”

- those were first words that we heard from client that led us to long lasting partnership.

It was September, 2012, when our partnership with Menu123 started. Together with our client we’ve started building their business from scratch. And I don’t mean just flailing in the wind with product ideas, half-hearted brainstorms and trying to make a quick buck or two. I mean a real business. Built to last — strong for the long haul, serving a higher purpose.

Keeping story short, after few years of working together, we became not only their remote development team, we became part of their business, part of their team, in fact for quite long time they remained the only one client that we work with.

Up to the present time our dedicated Menu123 product team consists of experienced designer, information architect & developers that covers client’s needs in defining business rules & use cases, UI/UX design, branding and development. They aren’t just a client and we aren’t just an agency, we are one team that builds Menu123.

Becoming Agile

Until working with Menu123, our process was shaped like a waterfall. That is, our teams would wait for one part of the process to finish before starting the next. We would never architect anything until we had a full list of requirements. We wouldn’t design screens without the information architecture, and we most certainly wouldn’t have built anything without polished PSDs.

Waterfall is a linear approach to software development.

The more we analysed and prototyped , the more new things accured. It became obvious that waterfall methodology won’t fit to this project. So we’ve changed our approach of the development. We started by focussing on getting the basics right before moving on to any new features.

We wanted to get to working website quickly
so that we could make design decisions based on real-world usage.

We rearranged our whole development process to meet The Agile Methodology. This approach emphasizes the rapid delivery of an application in complete functional components.

Agile approach to software development.

Instead of planning around one complete deliverable, we started to break down the requirements into key features. Workflow is managed by the priority of features, which are iterated and built. Each iteration has a defined duration (in our case - 2 weeks) with a running list of deliverables, planned one iteration in advance . Deliverables are prioritized by business value as determined by the customer.

First version

Over the initial design and build period, we constantly built things up and refined the experience down to its core elements. With each iteration we’d find ourselves removing or adding — sometimes interface elements, other times features. This constant ‘go-wide’ exploration, followed by an intense period of selection and refinement allowed us to create a focused experience where the primary goal was to make a great food ordering experience for website users, and business tool for restaurants.

The Homepage (scroll inside the window)

www.menu123.com

Homepage transforms into result page
State changes on the web often involve hard cuts by default, which can make them difficult to follow. These moments of change have the potential to be softened, as well as improved, by adding some animation to the UI. We used animation to provide cues, guide the eye, and soften the sometimes-hard edges of web interactions.

Restaurant page

www.menu123.com

“Facelift”

A good design is an informed design. We iterated and refactored our design ideas, over and over, and in 2015 it became obvious that during 2 years of the development a lot of things has changed: now we knew the real customer journey maps, who is using our service & the most important — how people use it. It was the right moment to refresh the visual appearance of Menu123 website.

UI/UX research

User persona & interview

Customer journey map

A/B tests

User tracking

With the new Menu123 look we’ve established a voice and appearance that appealed to their target audience and after multiple iterations, we arrived at the designs below.

Facelifted homepage version

www.menu123.com

Restaurant list

www.menu123.com

Restaurant page

www.menu123.com

Responsive / Adaptive website

In computer science, the term “adaptive system” refers to a process in which an interactive system adapts its behavior to individual users based on information acquired about its user.

In the context of Menu123 - website adapts to whatever device user is using (mobile, laptop, desktop, ipad) and his location. We show diffrent features, diffrent page layouts and in some cases we change user flow in order to meet his expectations.

<h1>Behind the screens</h1>

Menu123 is a huge multistore system that supports more than 1000 vendors with ability to run almost without people input. We’ve built a huge system with a lot of great features: sophisticated menu data entry tools, complex solutions to reflect restaurant’s work hours & delivery zones, order confirmation & notification processes, promotion & coupon engine, user accounts, refund processes, credit card gateways and finance system that covers accounting & vendor reimbursement processes.

<h1>Technology</h1>

After a long development journey, we settled on Symfony framework, Twitter Bootstrap, Jquery, schema.org. System is using a bunch of external services to send a fax, make automatic calls, calculate taxes, process credit cards and etc.

We are also using a lot of tools in the development & management: Mercurial for version control, behat & PhpSpec for automatic tests, Jira agile for the task management, Confluence & Google drive for the documentations and file exchange, Join.me for a long period of time remains the main screencasting tool to talk and make decisions with client.

What we have learned

1. Working remotely means being organised & focused
7000 km, Atlantic ocean & 7 time zones — those are few things that separates us from our client. Developing a startup is deceptively hard when everyone isn’t in the same building. You can't exactly walk in to client’s/team member office or make a call in any given time to ask him a quick question, or bug him about something. You need to communicate in short & clear manner, be focused & plan carefully every meeting/screencast.

Few tools that helped us a lot:
- Join.me for screencasts & team status reports
- Google Groups, although it's old school in spades, it works plenty well for us. You can get the emails as they arrive, or view the archived list via the web interface.
- Jira Agile for time & work management, release control
- Confluence for documentation, meeting minutes reports & decision logs.

2. You need to be Agile
When making digital products and services, it can be tempting to spend a lot of time up-front trying to formulate a flawless strategy. But what we really need to do is get to a simple, actionable statement about what problem we are going to solve for the user as soon as possible & test it. These approach allowed us to see things in one of two ways: Things that don’t work, and things that need work.

3. Learn to prioritize
Everything can’t be a priority. Build a big vision, then zoom in to a narrow focus to only one small step that you can do next and do it.

3. It's never done
In the end, a successful project is never done. It is never perfect. You need to learn & evolve, if not — you’ve given up.