Building a Website: From concept to creation
Client
Sector
Challenge
My Role
Project Time
Dario’s Restaurants Pvt. Ltd. is an award winning restaurant famous for their authentic Italian food spread across 4 branches in different parts of India.
Hospitality, Food Service
To create a product which exudes an essence of elegance, craft, authenticity, style and resemblance to its heritage. Enable that product to be so technically user centered to allow it to seamlessly run its business online.
Design thinking, rapid prototyping, ideation, customer discovery, storyboarding, wire framing, and testing.
5 weeks
Brand and Strategy Kickoff
Developed brand attributes, target groups and corporate goals. It was not the goal to have extensive discussions or to develop a perfect solution, but to make quick decisions, to get commitment and to be able to act strategically despite limited time and budget.
Brand Attributes & Mission Statement
By brainstorming and prioritizing brand attributes in various categories, I created the basis to put together a mission statement.
Culture How would our community describe us and the food culture?
Target Groups How would we describe our target audience?
Voice How do we want to sound to others?
Feeling How do others feel after being in contact with us?
Impact What tangible impact do we have on others?
X-Factor How are we different from others?
In this case, the main goal was to gather information for creating the future website design and to allow objective discussions about it.
Finding a Visual Style
After the first meeting, I took the mission statement and the brand attributes to research and craft design directions aka styles capes to present to the client right before starting the design mock-ups.
Information Architecture
Content Audit
To understand the old site and its content, I ran a content audit listing all available information and features. Based on this, I collectively decided what to keep, what to kick and how content can be integrated into a more intuitive information architecture.
Sitemap
Developed the sitemap, considering the defined proto-personas and the respective solutions to their problems and motivations as well as the objectives of the organization.
Evaluation via Tree Tests
To ensure an intuitive understanding of the site structure I tested the sitemap on-site with potential users through so-called tree-testing by giving them relevant tasks, such as “Where would you click if you wanted to visit the menu of a certain branch?” Based on the test results, the sitemap has been adjusted accordingly.
Building the Site Structure
Created low-fidelity wireframes. The advantage was a direct buy-in of the approximate structure.
Web Design and Development
Restaurant Pages: 4 Branches
- In between their four major branches, Dario’s restaurants have successfully established themselves as a place for an authentic Italian bistro, fine dining restaurant, bakery and café, event celebrations and standard lunchbox service area. It was extremely crucial to showcase their strengths and create a product which provided the correct visibility for each branch to engage and direct their users.
- Each restaurant page also had their own reservation booking section and connect details leading to the manager of its specific branch.
Restaurant Icon Iterations >>
Final Design
Interactive Event Calendar: Calendarios
- Calendarios was a creative name coined by me. Since this was the Calendar page, I combined the words calendar and dario’s to create a unique name that would resonate with the company.
- This page was supposed to serve a purpose of being a monthly interactive carousel calendar for users to book any event at any of the branches and share it on their social media.
UI Prototypes
Final Design
Contact Us
- The Contact Us page serves as an information center for any information that you would require to connect with the restaurants.
- The interactive map showing the branch addresses with their contact details.
- The four restaurant logo links which lead to their respective restaurant pages.
- A common contact form for any type of inquiry.
- Careers, Franchise, Main office and Operations contact information.
- Social media promotion strategies and integration with newsletter sign up forms.
Conclusion
Due to the flawless collaboration, after the workshops hardly any revisions were required, neither in information architecture nor in visual design.
So often seemingly obvious but absolutely forgotten things emerge out of interviews and quick user tests. The task of “quickly integrating the possibility to reserve a booking” became something bigger and we investigated the complete website and understood how the users use the site plus what factors play a role to finally decide to complete a booking. So, the mere function is without value if you don‘t consider the whole journey.
Also, for me, creating the entire automated process by linking the web form was a new experience, and still there‘s much more I‘d like to automate and smarten-up.