Gracious Hall

web design, ecommerce development

→ Bringing fresh and local to the web

Case Study

Gracious Hall is an independent kitchen that crafts delicious original recipes and meals. The company needed web services to meet the demands of their new online reservation service.

The Challenge

eTecc was retained to develop a brand new responsive website and e-commerce platform. The client had no existing website presence and only a recently established identity.

The Product

Have a look at the Gracious Hall website today

The Need-Finding

After our initial discovery session with the client, the eTecc team began preliminary feature mapping and site flows design. We mapped the buy-flows and generated object models in an iterative process to prepare the initial stages of user experience design. eTecc created technical documentation and after some revisions and requirement re-scoping, client sign-off on this critical stage allowed us to move from scoping to structure.

Structure & Architecture

Armed with solid foundation of deliverables and technical artifacts from our strategy and scope phases, we began the process of creating hi-fi wireframes and clickable prototypes to zero in on the primary functionalities and user tasks. With feedback and client participation, we were able to lock down a complete website skeleton to move into the design phase.

"These look great! This view really helps me visualize - very exciting!!"
Defining The Visual Style

We took our initial design cues from the Gracious Hall identity. The client came to us will a fully realized logo concept that beautifully reflected the style and tone they were looking to further with the web interface. Using the existing to brand gave us a foundation to grow an entire concept leveraging type, color, imagery and custom iconography.


The color selections make up a warm palette of earth-inspired tones. The color system was informed by rich organic hues. We looked for tones that generate contrast but still allow content to remain the primary focus of the design. Much like the logo, the Gracious Hall green served as the initial spark of inspiration for the palette creation.

Type Selection

We've outlined the thought process behind our font selections in the image above. The design also called for some component iconography to help support some of the content descriptions on the website. We crafted some small iconic illustrations to help assist users make selections based on dietary restrictions and food allergies.

Building The Solution

One of the challenges facing Gracious Hall was the scheduling window their kitchen requires for customers orders. eTecc created scarcity timers with flexible ranges to allow the admin team at Gracious Hall to set menu expiration dates and order windows. The backend administration interface lets Gracious Hall plan and schedule their menus weeks in advance. We developed a category system to provide the client with easy administration of meal dietary restrictions, portion sizes and nutritional information. The system also sends automatic pick-up reminders to customers 24 hours prior to their order collection dates. Gracious Hall needed more than just an commerce website and eTecc delivered with a custom tool that streamlines their workflow and manages their ordering process.

Payment Integration

We leveraged PYRO CMS™ for a seamless integration with our Laravel™ workflow. Lastly, eTecc used Braintree® to process the online credit card transactions.