Oak Tree

The full story

An interactive restaurant website inspired by garden hospitality

13-15 September 2026 | Independent concept | Private prototype | Version 3

Theme: Rooted in warmth

The project turned a growing oak tree into an introduction to a restaurant website. Visitors can explore the animation, enter the landing page, browse food and event offerings, and contact the restaurant. Feedback led to a cleaner tree scene, a dedicated menu page and navigation that avoids a full page reload.

Scope: Public-source research, visual direction, content structure, interaction design, frontend development and functional checks.

The project requester supplied the concept and visual feedback. Research, design and implementation were developed with Codex.

This is an independent design concept based on public information, not a commissioned or official restaurant launch.

The screenshots below show the saved prototype. A public demo is not available yet.

The problem and the approach

Bring the feeling of the garden online, then make the essentials easy to find.

Oak Tree Restaurant in Rolf Valley, Harare, combines daytime dining with private and corporate occasions. The initial research found useful information across social profiles and restaurant directories. During the 13 September check, the restaurant's existing homepage and menu displayed error content; the cause and duration were not investigated.

The design needed to communicate the venue's warmth while giving visitors a clear route to food, events, location and enquiries. The tree could create a memorable entrance, but it also needed a direct way through to the restaurant content.

Daytime diners

See the food selection, opening hours and location.

People planning a gathering

Explore occasions, venue hire and event enquiries.

Returning visitors

Reach the menu or contact details without replaying the introduction.

These visitor needs are design hypotheses drawn from the brief and public offerings. No customer interviews or formal usability study were conducted.

Research the business, establish the visual direction, build the scroll interaction, organise the restaurant content, then refine the experience through direct feedback and checks.

A visual identity for garden hospitality

Natural colour, expressive headings and a clear reading rhythm.

The proposed theme, Rooted in warmth, translates the garden setting into cream backgrounds, olive actions and restrained gold accents. Real venue and food photographs connect the interface to the restaurant. Generous spacing keeps the copy and menu easy to scan.

Cormorant Garamond gives the headings an editorial character suited to dining and celebrations. Italic emphasis adds variation without introducing another typeface.

Montserrat supports navigation, descriptions and buttons. It also maintains continuity with the font configured in the existing restaurant website's navigation during the initial inspection.

The colour values and Cormorant pairing are proposed for this concept. The exact font used in the original restaurant logo was not verified.

Short, welcoming phrases lead into useful actions. Good food. Beautiful gatherings. is project copy, not a verified existing restaurant slogan.

From tree to table

An optional moment of discovery, followed by useful restaurant content.

A bare tree

The opening scene starts with branches and subtle pointer-following movement.

Growth through scrolling

Leaves appear as the visitor scrolls. The tree expands by about 47% from its starting scale; scrolling upward reverses the growth.

The restaurant appears

The tree scene moves away and the landing page introduces dining, gatherings and visiting information. Navigation appears with this content.

A dedicated catalogue

The Menu page groups 30 food and drink entries across six categories, followed by nine event and service offerings.

Enter Oak Tree and a keyboard skip link provide a direct route to the restaurant. Reduced-motion mode presents a static mature tree, and the restaurant content remains available without JavaScript.

Call, email and directions links provide practical next steps. The prototype does not process bookings or orders; enquiries continue through the restaurant's contact channels.

The catalogue labels its content as a selection of published offerings. It asks visitors to confirm current availability, prices and dietary requirements instead of presenting historical dishes as a guaranteed current menu.

Feedback that changed the interface

Each revision made the visual idea easier to use.

The opening scene felt obstructed

Removed the unwanted label, arrow controls and page-number navigation. Increased the tree's growth scale and cleared the scene.

The tree becomes the clear focus of the introduction.

The menu needed its own page

Added a dedicated Menu route with category links, food and drink entries, and event and service offerings.

Visitors can browse the selection in one organised place.

Menu clicks felt slow

Included the other page as an inert template and switched the active content locally on normal Menu and Home clicks.

Switching pages no longer waits for a new document request.

Hover animations felt abrupt

Used transform and opacity for link underlines, shorter button transitions and animation frames that stop when the tree settles.

Feedback has a consistent transition without changing text size or layout.

The site uses plain HTML, CSS and JavaScript with a canvas tree. Both routes remain directly addressable. Local navigation updates the URL, title and focus; Back and Forward restoration is implemented. The tree pauses when idle, off screen, hidden or detached on the Menu page.

Link underlines use 200 ms transitions and buttons use 180 ms transitions. These are configured animation durations, not measured page-response times.

The outcome and the next steps

A published private prototype with a distinctive entrance and a practical menu.

Version 3 brings together the growing tree, restaurant landing page and dedicated catalogue. The result demonstrates the intended browsing flow and the refinements requested during the project. It provides a foundation for an owner-approved restaurant website.

Tree checks covered desktop and mobile sizes, foliage growth and reversal, pointer response, reduced motion, and idle or hidden-tab pausing. Menu and keyboard checks passed during development. Static validation passed for both routes and 36 local asset and link references.

The main landing and Menu views were inspected during development. Further device and navigation regression checks remain useful before an official launch. No Lighthouse benchmark, formal accessibility audit, analytics study or booking uplift was measured.

Design assessment

The concept has a coherent identity and clear catalogue. Confirmed commercial content and further device testing would strengthen it.

• Confirm the current menu, prices, hours and event terms with the restaurant.
• Obtain owner-approved imagery and approval of the final business copy.
• Finish navigation and hover regression checks, then test on representative phones and assistive technology.
• Measure menu discovery and contact-task completion with real visitors before assessing commercial impact.

A memorable introduction works best when visitors can choose how much time to spend with it and still reach the menu quickly.

References

• Existing restaurant website - Error content observed on the homepage and menu on 13 September 2026.

• Oak Tree official Facebook - Business identity, services and contact information.

• Oak Tree official Instagram - Public positioning, hours and venue promotions.

• Published menu highlight - Historical menu evidence; current availability unconfirmed.

• My Guide Zimbabwe - Source of the garden and food photographs used in the prototype.

Business and brand research was collected on 13 September 2026. These portfolio screenshots show the saved prototype build, captured on 19 September 2026. The underlying restaurant photography is credited to My Guide Zimbabwe.