Dealicious
Product Design & Dev
Overview
Dealicious is a web platform that provides an effective solution for Food Hospitalities to create referral marketing campaigns and loyalty programs, leveraging data analysis and AI tools. Our goal is to empower these businesses by providing them with a comprehensive set of tools to enhance their marketing efforts and boost sales. By using Dealicious, Food Hospitalities can effortlessly create data-backed and customized referral marketing campaigns to attract new customers, while implementing loyalty programs to retain their existing customers.
www.dealicious.site-
Mission
To collaborate on an agile team to conceptualize, research, design, and develop a responsive B2B2C Web App in response to a real-world need. The essential requirement was creating a data visualization MVP utilizing cutting-edge technology for the project course at Langara College.
-
Hats Worn
- I led the design team, performed user research & market analysis & clustered data, crafted persona & user journey, created user flow & wireframes, communicated design rationales, moderated usability testing & UX writing, designed illustrations, style guide, UI kit, and high-fidelity mockups, performed photography.
-
Tools
Adobe Illustrator, InDesign, Photoshop, AfterEffects & Figma for Design - Jira & Slack for communication and PM
-
Timeline
12 Weeks, from Ideation to Presentation
May 2023-Aug 2023 -
Team
3 UX/UI Designers
4 Full-stack Developers -
Platform
Responsive Web App, SaaS
Empathize
Over 97,000 restaurants with $85 million annual sales in Canada prove that this is an attractive market, however, 8 out of 10 new restaurants fail within 5 years. These businesses often struggle to utilize marketing tools due to their complexity and cost. We interviewed a focus group to have a better understanding of the needs of food hospitality businesses. Integrating these interview reports with firsthand knowledge of the challenges faced by family-owned restaurants, we summarized the main pain points in the marketing section to be addressed:
- Marketing is a serious challenge for these businesses, and they need to stand out in a competitive market.
- During high seasons, although the number of customers sees a peak, it’s not always beneficial for the businesses, since they don’t have any control over the menu items which are mostly ordered.
- During low seasons, they need to utilize marketing tools to attract new customers. These tools include Facebook ads, subscription-based platforms, and generic review platforms. However, business managers are unable to measure the accurate success of each tool.
- Another approach for increasing visibility is influencer marketing. In this case, business managers who are busy enough with the workflow must dedicate time to exploring relevant influencers’ pages, dealing and negotiating with them, and finally commissioning an advertisement. This is a challenge for food hospitalities, especially small businesses with limited time and capital. Moreover, in this approach, the actual KPIs are not trackable.
- Word-of-mouth is another existing alternative. Although it is a powerful marketing tactic, it is barely considered a marketing tool, because it’s not trackable.
Persona Research
I've got big dreams but a small budget. I wanna find smart moves to make my restaurant shine.
34 Years Old
Highlights
- Education: Culinary school graduate
- Occupation: As a skilled chef, took the leap into entrepreneurship and established her own small restaurant. Drawing on her culinary expertise, she is determined to grow her business and make it thrive.
- Location: Vancouver,BC
- Tech familiarity: Sophie is relatively tech-savvy, using smartphones, laptops, and web applications for marketing her business.
Applications
Uber Eats
DoorDash
Google Maps
Yelp
Core Needs
- Business Growth: Drive the growth of her restaurant business. To achieve this, she needs efficient data tracking, analysis, and visualization tools that enable her to make informed decisions and optimize her operations.
- Efficient Marketing: Effective Targeting to invest in marketing efforts that are tailored to her ideal customer profile, leading to efficient use of resources.
- competitive Advantage: Identify and implement unique selling points or strategies that set her restaurant apart from competitors, helping her stand out in a crowded market and attract and retain customers.
Frustrations
- Marketing Channels: Her investments on advertisement and Influencer marketing don’t pay off.
- Customer Retention: Despite high quality food and service, she can not retain her customers.
- Ongoing Marketing Costs: She commissioned a company for designing her website, but keeping it up to date is not affordable to her..
- Attracting New Customers: She finds it challenging to attract customers who rely heavily on online reviews and recommendations.
User Story
To empathize with the real users and look at our solution through their motivation lens, we created user stories for our main personas:
As a Restaurant Owner
- I want to easily create Loyalty Programs so that happy customers keep coming back
- I want to keep track of performance of marketing campaigns so that I make better marketing decisions
- I want to easily create effective marketing campaigns so that I attract new customers and retain existing ones
- I want to have useful data from my customers so that I can create tailored campaigns for them
- I want to have more customer reviews so that it attracts new customers
As a Food Lover
- I want to try new places and food with a discount
- I rely on my friends suggestions to discover new restaurants around the city
- I want to sign up as a super customer so that I can get points every time I spend money, at a restaurant
- I want to share the joy of discovering new foods with my close friends and convince them to try something new
- I want to earn points and discounts, every time I refer this restaurant to my friend
Market Research
Other platforms in the market provide somewhat similar features to Dealicious. The most famous existing alternatives are as follows:
Yelp.ca
Yelp is an online directory for discovering and reviewing local businesses. With Yelp Ads, businesses can set up advertising on the Yelp pages. It also provides businesses with ad performance tracking.
ShowMeLocal.com
Show Me Local is a directory that groups businesses by industry and region. It provides a suite of digital tools including enhanced listings, customer reviews, and promotion of local deals and events.
DoorDash.com
DoorDash facilitates food delivery by independent contractors. It also offers a Store Loyalty Program which enables customers to earn towards rewards with every dollar spent with participating brands.
Looking at them, no one has a referral program. Also, the loyalty program is missing in two of the competitor platforms. Dealicious also leverages the power of accurate insights and AI to stand out.
Main Features
Referral Marketing
Dealicious empowers food hospitalities to effortlessly create targeted marketing campaigns. In addition, the connected AI Generator helps business owners with developing marketing campaigns, special offers or deals exclusively for attracting new customers as well as encouraging current customers to reconsider their dining. To accurately track the referral activities, the platform specifies a QR code to each food establishment. By scanning the QR code, their happy customers can register on their specific page on Dealicious platform and start referring other people to their favorite restaurant, café, etc.
Insights and Analysis
Dealicious offers comprehensive data analysis to business owners, providing valuable insights into the performance of their marketing campaigns. They can track key metrics such as generated revenue, customer engagement, and conversion rates. This data-driven approach enables business owners to make informed decisions, optimize their marketing strategies, and achieve better results. They can easily copare performance of ongoing or past campaigns in terms of generated revenue and other metrics. By understanding what works and what doesn’t, they can refine their campaigns and improve overall marketing effectiveness.
Loyalty Programs
Dealicious goes beyond acquiring new customers. The platform incorporates a robust loyalty program that allows business owners to reward and incentivize existing customers. Happy customers who register on the platform become Super Customers and share their culinary experiences with others. When a referral successfully works, the super customers collect points which can be redeemed to get discounts. This helps food businesses foster loyalty and encourage repeat visits for Super Customers. It empowers food hospitalities to build lasting relationships with their customers, creating a loyal customer base that becomes a reliable source of revenue and positive word-of-mouth referrals.
Defining Principles
To form a shared understanding among the team, during several meetings among all stakeholders, we discussed the principles of the application including:
- How referral system works?
- How new customers are converted to super customers?
- How the pointing system works?
- How new and super customers can use an ongoing campaign's offer?
- How restaurants can accept an "Activate Campaign" request?
- How the metrics can be accessed and calculated?
- How to show the metrics for better engagement and understanding?
- Which demographic data are needed to help business owners create better campaigns, without violating customers' privacy?
User Flow
The user flow consists of three sections, the main section targets the main persona who is the business owner. They can create campaigns, invite customers to become super customers, burn the discount codes, and more importantly, check the insights for all active and past campaigns. The second part is the flow that loyal customers go through to refer new customers and use their discounts or points. The last part of the flow is the new customer's journey to check the referred restaurant's campaigns, activate one of them, and become a super customer if they want.
View on Figma
Wireframe
After confirming the user flow in the team meetings, we created the wireframe through multiple iterations. In some sections, we noticed that the user flow needed to be changed for a better user experience. These changes led to changes in user flow, as well. In the final version, we added annotations for the developers to prevent confusion and maximize efficiency.
To create a seamless user experience, we created the mobile view and desktop view screens at the same time. Considering the personas and use cases, the focus for the business owner was on the desktop version, while for the customers we went for a mobile-first design.
Based on the user flow and modified features, the wireframes are categorized as follows:
- Restaurant Owner Dashboard; including Campaigns, Insight, Burn a Code, and Profile
- Super Customer Dashboard; including My Restaurants, Restaurant Single-View, and Profile
- New Customer Dashboard; including Restaurant Single-View
Campaigns Flow Iterations
Campaigns is designed as the home screen of the Restaurant Owner Dashboard. The functionality of this page is to enable users to keep track of their marketing campaigns. It was primarily divided into three sections: Ongoing, Upcoming, and Past Campaigns. However, in the later iterations, we transferred Past Campaigns into Insights to keep the home page focused on what is going on from now on to help the business owner make marketing decisions, accordingly.
In the first iteration, we designed cards for each campaign to segregate them. Also, we wanted to illustrate charts for different data that is driven from the campaign, as well as the basic information of the campaign including name, date, etc.
Since we wanted to visualize numerous data, this approach of dividing cards' info into tabs wasn't scaleable, especially on mobile phones where we needed to consider a fat-finger-friendly design. Therefore, in the second iteration, we changed tabs into a dropdown menu. Also, to create a simpler and cleaner home page, we designed expandable cards, which show the charts only in the expanded mode. With the featured campaign and comparative chart on top, we made sure that users can view the most important data at first glance and without extra clicks.
Ongoing campaigns with cards in their default state:
Ongoing campaigns with cards in their expanded state:
Wireframe Annotations
- Tab navigates to a heading in the same page
- Navigation resembles application nav bar and is sticky at the bottom of viewport
- Searching among the campaigns for specific campaign type
- All campaign overviews(active, upcoming and past) are in the same page and these links navigate through the same page
- A comparison between all active campaigns
- Dropdown selects campaign. when a campaign is shown on highlighted section, it is removed from bottom section
- Insight selector- Dropdown selects the insight
- Compare opens a dropdown with a list of radio buttons to select the second campaign to compare
- Arrow expands the card to show full-size card including info, insight selector and insight chart
- Scrollable to the right and left to see all active and upcoming campaigns
- Button navigates to the form-view of the campaign to edit
- Sidebar is collapsible and it’s sticky while expanded
In the last iteration of the high-fidelity wireframe, we added pins to the campaign cards. This reduced a dropdown selector on the featured/pinned campaign and made it visually identifiable. Users are able to compare ongoing campaign metrics side by side. To gain a better understanding of how their marketing efforts are doing, they also can compare the metrics of two selected campaigns on a single chart on top right:
Insights Flow
We designed the Insights section to help business owners make data-backed marketing decisions. In this flow, they can view insightful data that is categorized as campaign insight and customer insight. It enables them to compare previous campaigns in terms of revenue, customer retention, and other metrics and recreate successful marketing campaigns.
On the other hand, they can create special offers for their special customers, based on Customer Insignts. Moreover, they can compare each two previous and/or ongoing campaigns, in this section. Comparing metrics are shown side by side on desktop view, and top bottom with horizontal navigation on mobile view.
Super Customer Flow
Super customers are the ones who have registered on Dealicious through a restaurant's QR Code. On this page, they can view all their information in relation to that specific restaurant. They can apply to redeem their points, activate an ongoing campaign, or refer a friend.
Logo
Dealicious is a fusion of 'Deal' and 'Delicious,' conveying the core attributes of our platform, symbolizing both promotional potential and the delightful culinary experiences offered. Since the name alone establishes an emotional connection and a memorable presence, we designed a simple logo with a soft-edge typeface and a symbol of special offers to retain the nature of our platform.
Color & Typography
The primary color represents the restaurant industry, with orange conveying energy and creativity, aligning with dining experiences’ lively nature. It evokes warmth and appetizing appeal, perfect for a food-related app. The secondary color symbolizes profit and the word “Deal,” using green to signify growth and prosperity. It also connects to organic and healthy elements, relatable to the food industry. As a data visualization platform, we use variations of the primary and secondary colors to effectively represent and differentiate data points.
For typography, we chose Ubuntu Bold from Google Fonts for headings. Ubuntu’s rounded and modern appearance adds an elegant touch, contributing to a contemporary and friendly aesthetic. For body text, we opted for Mukta Light, also from Google Fonts, ensuring clarity and legibility.
UI Kit
Icons
Icons represent the web app’s main features, as well as other functions. They are used in two sizes across the website: 24px and 40px. Except on the marketing materials, icons are shown in black on the platform in all cases, but for two conditions:
First, on navigation menus, where the active navigation menu has a background circle in the primary color. Second, the pin icon on the pinned cards which changes to the primary color.
Navigation
On the large screen in Restaurant Owner Dashboard, navigation is a fixed sidebar, placed on the left, and occupies 100% of the viewport height. On the form pages such as Create Campaign and Profile, the sidebar is shown collapsed to minimize distractions. On the mobile screen, navigation is fixed at the bottom.
When a nav item is selected, the background circle drops behind the active icon, in all screen sizes.
Cards
In this project, we designed a modular web platform using cards. Leveraging the modular design, we structured the platform's content and functionalities into distinct, self-contained units represented by these cards. The modular design approach offered several advantages, including flexibility, scalability, and ease of maintenance. It allowed for a consistent and cohesive design while facilitating the addition or removal of content modules as needed. We could also individually style the cards to create a visually appealing and user-friendly interface.
Chart cards are designed in three sizes including 1-column, 2-column, and 1.5-column for regular insight cards, pinned insight cards, and side-by-side comparison insight cards, respectively. Based on data type, charts vary from line charts, pie charts, bar charts, radial bar chart and figures.
Buttons
Primary buttons are used for the primary actions such as “Save”, “Create”, and “Submit”. Secondary buttons are used for primary actions which are repeated on a page such as “Activate” and “Burn the Code”. Tertiary buttons are the alternative to the primary action, “Cancel” for instance.
The “Create a Campaign” and “Recreate the Campaign” buttons have a specific design and top-right placement across the site. Also, the icons on these two buttons display continious micro animations.
Reflections
Lesson Learned
- Balancing creativity with functionality:
Maintaining the balance between innovative design and functional utility is crucial for delivering a platform with a broad scope. While advocating my well-thought design decisions, eventually, in some not-critical cases, I had to compromise my ideals to achieve a solid functional solution, due to technical and time constraints. This required a deeper understanding of the persona and coming to realize which features are negligible and which ones are crucial in terms of user experience. - Documentation is a lifesaver:
The importance of meticulous documentation became evident as the project progressed. Clear documentation facilitated smoother collaboration among team members, especially minimized friction among design and development teams. Having annotations on the wireframe and a design system, reduced the interpretations and contributed to a final product that was consistent and aligned with the design to a good extent.
If We Had More Time
- Design and development of POS Integration:
For a data-driven marketing application like Dealicious, more raw data results in more accurate insights and eventually better marketing decisions. With this MVP, data is only retrieved from user input and is only related to the campaigns that are run through the app. In this way, insight can be affected by human errors. To provide a more accurate data visualization and also to create a better experience for the users, we could integrate Dealicious into the current POS systems in the restaurants. Adding this extra feature not only could have taken a couple of weeks to design and develop but also we needed real users who agreed with this integration.