Table of contents

Do you know what a virtual restaurant is?

ABOUT

I didn't know either for a long time. Like most restaurateurs in Europe. It wasn't until I started working for Rebel Tang that I had the invaluable opportunity to explain what this type of business is. This is how I started building a website for an innovative start-up that is revolutionizing the foodtech sector. Contrary to popular belief, it is not easy to explain something complicated in a simple way, avoiding buzzwords and industry bullshit.

Fortunately, in this project, I had the opportunity to collaborate with an experienced and open-minded CMO, an effective CTO, and a very competent Project Manager. The company's entire management team also supported us.

PROBLEM

It's time to get real

We had to walk the line between the down-to-earth reality of restaurateurs and the revolutionary aspirations of Rebel Tang. Our mission was to craft an eye-catching and user-friendly website that seamlessly unveils Rebel Tang's operational prowess. We endeavored to capture the company's innovative spirit, showcasing its seasoned team and success stories through impactful case studies. Our primary objective was to elevate conversion rates, with a keen focus on driving inquiries and engagement.

RESEARCH

Who is the average restaurateur?

Let's get one thing straight. We didn't have the time or resources to conduct in-depth interviews with users, who are notoriously busy people. As a result, we had to rely on the insights of our colleagues who are on the front lines, our Regional Managers. Based on our conversations, we've identified three key user groups that we need to speak to. It turns out that the restaurant owner is not the only key player in the decision-making process.

Restaurant
Owners

Virtual restaurants offer extra revenue to owners, but this group's understanding varies due to age differences. Clear communication is key in highlighting benefits and collaborating with Rebel Tang for seamless integration.

Restaurant
Managers

Restaurant Managers collaborate with Rebel Tang to enhance efficiency, reduce costs, and boost profitability. They propose innovative strategies to restaurant owners, acting as mediators between operational aspects and Rebel Tang's solutions.

Restaurant
Staff

Younger and open-minded restaurant staff can positively impact Rebel Tang's concept by promoting the benefits of virtual restaurant orders to managers and owners. This proactive approach contributes to financial stability, job security, and encourages innovation within the establishment.

Rebel Tang provides...

Efficient resource utilization

Restaurant owners are looking for ways to make the most of their resources to achieve better outcomes. They have a medium-term perspective as they manage existing establishments. They acknowledge the potential for enhancing resource and personnel efficiency within their network.
Modern solutions for growth

Some restaurant owners are interested in using innovative strategies to boost their business growth. They have a long-term vision and are well-versed in digital platforms. They are looking for modern solutions that can help their restaurant achieve sustained development.
Immediate sales boost

Business owners who are struggling to make a profit need fast solutions. In particular, restaurant owners are looking for ways to quickly increase the number of orders and sales. They are primarily focused on short-term goals, such as recovering from the effects of the pandemic and dealing with changes in the market.

SOLUTION

How to simplify it?

After our research, we knew that restaurateurs see Rebel Tang as a partner that offers innovative solutions that can actually improve their businesses' financial situation in the short and long term. On the other hand, we knew that Rebel Tang's partners prefer concrete facts and numbers over lofty words. So, creating the information architecture for the future website was a big process of simplifying everything possible.

We combined our knowledge and worked out a cool plan, which we meticulously organized into a user-centric information architecture. But we didn't stop there. To understand our users, we challenged our assumptions, meticulously examined potential user flows, and selected the most accurate ones.

Information Architecture

Sitemap
Homepage Mockup
About Mockup
Model Mockup
Kitchen Stories Mockup
Contact Mockup

User flows

Instagram Ad
LinkedIn Post
Google Search
Trade Portal
Facebook Ad
Press Article

That's dope...

But how do we visualize it?

Our initial ideas were looking good, but we needed to see them in action. So, we and our team got to work on building a functional prototype.

We kicked off the wireframing phase with some quick sketches to get the basic structure down. Then, we dove into user experience and hammered out the conversion flow, making tweaks and refinements with each iteration as we moved to more intricate wireframes.

After collaborating with the key players at Rebel Tang, we crafted high-fidelity wireframes that served as the foundation for the final website design. This step-by-step approach helped us strike the perfect balance between user experience and visual design.

Let's tame this visual jungle

With our vision in place, we mapped out the foundation with a structured design system. No diving in without this solid base!

Söhne font family

We decided to use the Söhne font family to match Rebel Tang's lively persona. Söhne is derived from the famous Akzidenz-Grotesk font, which has been improved by Kris Sowersby of Klim Type Foundry. The font was influenced by the impactful "Halbfett" style, which is well-known in designs such as the NYC subway system. Sowersby's attention to detail resulted in a consistent, well-balanced typeface with excellent kerning and diacritics. Söhne is divided into subfamilies, with four styles and eight weights each, including corresponding italics. This unique sans-serif font embodies the essence of Rebel Tang's character- energetic, distinct, and captivating, while still carrying the spirit of Akzidenz-Grotesk.

Sizzling Sunrise

A vibrant yellow-orange hue, Sizzling Sunrise exudes a youthful exuberance that perfectly complements Rebel Tang's dynamic brand identity. With a high contrast ratio of 15.28:1 against black, it stands out boldly, grabbing attention and making a lasting impression. This high contrast ratio also makes the color more accessible to individuals with visual impairments, ensuring that Rebel Tang's brand messaging is effectively conveyed to all potential customers. It's a color that evokes a sense of freshness, creativity, and innovation, mirroring the company's mission to revolutionize the food industry. Just as the first rays of dawn ignite the day, Sizzling Sunrise electrifies senses and awakens appetites, making it an irresistible choice for Rebel Tang's branding.

Onyx

Onyx, a deep, dark gray shade, embodies professionalism, reliability, and durability – attributes that align perfectly with Rebel Tang's innovative spirit. Its timeless elegance seamlessly blends into various branding applications, from websites and marketing materials to physical spaces. Onyx's high contrast ratio with white, reaching a remarkable 12.29:1, ensures accessibility, making Rebel Tang's brand identity and content accessible to a wider audience. As Rebel Tang continues to disrupt the food-tech industry, Onyx stands as a fitting representation of its unwavering commitment to quality and innovation.

TEST

Throwing our Prototype into the User Gauntlet

Armed with a functional prototype, we ventured into the real world, throwing it into the gauntlet of real users. We simulated an authentic user journey, replicating the experience of landing on our site from an Instagram ad. This comprehensive approach helped us identify UX roadblocks and areas for improvement. We observed users closely, like hawks, recording their feedback like detectives, and analyzing their actions like scientists. Our focus was on their navigation, information retrieval, and engagement with various elements. Data-driven insights guided us in refining areas for a better user experience.

Step into the user's shoes...

Homepage

The Rebel Tang homepage is a gateway to the dynamic realm of virtual restaurants for discerning restaurateurs seeking innovative solutions for culinary success. Its intuitive design guides users through a wealth of insights, enabling effortless navigation and access to informed decisions. The homepage's adaptability caters to diverse browsing styles, allowing users to delve into sections that pique their interest and explore the array of resources available.

About

About sub-page introduces the Renegades behind the brand. Users can hover over their portraits to learn about their stories and expertise. Scrolling through the Brands section will allow users to explore the diverse portfolio.

Model

The Collaboration Model sub-page explores the transformative potential of collaboration with Rebel Tang. It reveals how Rebel Tang's expertise can elevate restaurant businesses, turning aspirations into tangible realities. The sub-page also unveils how Rebel Tang's technological foundation, the RebelApp system, revolutionizes operations and optimizes outcomes. Rebel Tang's approach prioritizes clear and concise communication, providing the vital information required for informed decision-making.

Kitchen Stories

The Kitchen Stories sub-page features a collection of real-world tales from restaurant owners who've successfully partnered with Rebel Tang. Users can ditch the generic narratives and dive into firsthand accounts shared by restaurateurs. Backed up by concrete numbers and compelling quotes, this approach not only builds trust but also propels us closer to Rebel Tang's ultimate goal of driving conversions.

Contact

The Contact sub-page gets to the point, delivering only the must-haves in a super-clear way. A no-frills contact form is matched with a short-and-sweet explanation walking you through the convo process. This no-BS approach puts ease-of-use first for those wanting to connect with Rebel Tang.

KEY TAKEAWAYS

The journey's end, lessons learned.

The Rebel Tang website project was a wild ride, serving as both a pro gig for my former employer and a key milestone in my "Digital Designer" course, establishing my UI/UX grounding.

THAT'S A WRAP!

Looking back, there are many aspects I'd approach differently, refining for a more optimal outcome. But that's part of the natural growth process, as time often reveals opportunities to improve our past work. Given my relatively limited experience at the time of tackling this comprehensive project, I'd say I managed it well. Both my former boss and course mentor gave the project the thumbs up, further validating its success in my early UI/UX journey.

Talk to your people

Don't just meet with your target audience for formal meetings. Get to know them on a more personal level. Chat with them, ask them questions, and listen to what they have to say. You might be surprised at what you learn.
Dumb it down, please.

Complex business models and creative ideas can be tough to understand. That's why it's so important for UI/UX designers to keep it simple. Use clear language, concise visuals, and easy-to-follow navigation.
Less is more, bruh

Don't try to cram too much into your design. Too many features and elements can be overwhelming and confusing. Instead, focus on creating a clean, uncluttered interface that's easy to use.
Fewer fonts, fewer flaws.

Not every project needs a rainbow of colors and a variety of fonts. Sometimes, using just one or two fonts can create a more polished and professional look.

Thanks for your time! ♥︎

Prokuratura