Our purpose
At JUST EAT our purpose is…
‘Empower consumers to love their takeaway experience’
Whenever a decision is made, this catchy little motto is used to remind everyone involved of our ultimate goal as a company. Our websites, and their development, should be no exception. Within this post we dig into the way in which the purpose has driven, and continues to drive, our web development culture.
So how do we empower consumers through web development?
The website must allow our customers to order food from restaurants – this is after all our core value proposition. The customer should be empowered to access the website from watches, game consoles, mobile phones, tablets or desktop computers and their choice should be largely unrestricted. To fulfil these requirements the website must utilise technologies that are accessible and available across as many platforms as is feasible. Classic HTML, with form posts being used to alter the state, was identified as providing the high level of compatibility required.
JavaScript exposes the website to many cross browser issues, due to the differing implementations of its core library and DOM access. Creating a website that does not rely on JavaScript reduces the impact of inconsistent support and enables graceful failure of a user’s experience on inconsistent platforms.
Unfortunately in practice, there are cases where JavaScript is needed. One area of our website that depends on JavaScript is credit card payment authentication – primarily due to the idiosyncratic requirements of the banking system. Although this adds a hard dependency on JavaScript, minimising its necessity, maximises the chances of providing the service to all platforms and localises the scope of failure.
How can we help customers love their takeaway experience?
The website, like the rest of the company, should attempt to provide an experience that the customer will love. In order to love the experience, it shouldn’t cause the user to feel frustrated, impatient or preclude a #minifistpump. Server posts introduce additional round trip requests adding a delay between each interaction. Further, page refreshes typically result in a different scroll position; displaying a different area of the page which can be disorientating and breaks interaction flow. It’s also difficult to engage the customer when visual cues to system responses can not be communicated during page refresh.
To create an experience the customer will truly love, requires that JavaScript be used to enhance the classic HTML with interaction simplifications, when available. The system can leverage JavaScript to communicate to the customer when progress is made with visual transitions. Customers can keep focused on their task by avoiding interruptions to the process flow caused by view refreshes through the use of asynchronous updates.
How do we bring both strategies together?
To bring both halves of the purpose to life, the website is being developed with a progressive enhancement strategy. Each page of the website is written using an MVC framework and view engine, rendered on the server side into semantic HTML. Interactions are built so that they can be performed using simple get (links) or post requests (form buttons). This provides the core experience and follows the aforementioned strategy to support a huge range of different devices. The website then uses JQuery to provide multi-browser support allowing components of the page to be upgraded when and where the required browser features are detected.
An example would be where we would like to show the user a list of food categories available within a menu. The ideal situation is to have that list minimised by default but allow the user to expand it should they be interested in its content. Unfortunately the functionality to hide and expand the list is unavailable in some devices. In order to facilitate the functionality across all users we create a default in which the list is expanded and then during the page load we identify if the show/hide functionality would be available. If it is then we change that default view using JavaScript to the minimised version. This enhances the usability of the site without affecting its accessibility on any browser. This approach also scales up to more involved solutions and is applicable to many other scenarios.
This completes the overall approach by allowing us to add richness and interactivity that our users love without impeding their ability to progress should that richness fail to operate correctly.
What does this mean for the team?
Implementing a core experience in HTML and enhancing with JavaScript may require more time to develop by an engineering team as frontend and backend engineers must work together to define interfaces that will enable the multiple levels of interaction provided to the user. It also requires a greater involvement and more time to design by the user experience team. An understanding of the progressive nature of the interface is needed at design level if a fluid and consistent experience is to be presented to the the user. This holistic understanding and approach requires close collaboration between many disciplines – UX, design, product and engineering.
The necessary high level of collaboration has been facilitated with a cross functional team structure. These teams have representatives from each discipline required to implement a feature in a top to bottom slice of the system. This provides the high level of collaboration needed to implement a non-trivial solution such as progressive enhancement and ensures an inside out approach to development.
The website’s evolution is a non trivial task and needs a clear direction to achieve our ultimate goal as a company. We can produce something truly outstanding with the right process in place. At JUST EAT, we’re using MDD (Motto Driven Development) to…
‘Empower consumers to love their takeaway experience’