Pizza Nova

2024
Live website
Arrow point right up icon
Overview
Pizza Nova, a revered Canadian franchise in the pizza industry since 1963, is renowned for its quality and service. In collaboration, our goal is to completely revamp their website and apps, effortlessly merging their brand legacy with contemporary design. This project signifies our dedication to improving user experience (UX), simplifying navigation, and introducing innovative features for a captivating online platform.
Project Type
Responsive Web/Mobile & Mobile App
Tools
Figma, Adobe Illustrator, Photoshop, Browser Stack
Design Roles
UX•UI Design
Team
• UX/UI Designer
• Sr. UX/UI Designer 
• Developers
• Sr. Business analysts 
• Product manager 
• STS QA Team
Website

As-Is

To-Be

App
Project Timeline
Finding Problems

User Research:
Prior App Experience

In initiating this project, I conducted a comprehensive review analysis of user feedback for Pizza Nova on both IOS and Android platforms, spanning from the app's launch on August 5, 2014. A total of around 600 reviews were considered, yielding average ratings of 1.2 and 1.5 out of 5 stars for IOS and Android, respectively.
Finding Problems

User Testing of the Prior App

We also analyzed and observed how users feel and experience their current website on both desktop and mobile platforms. The website appears to have a smoother flow compared to the application. However, during testing, we identified various issues, ranging from significant to minor, that users are encountering.
Website Mobile Testing (IOS) 
1
There is currently no option to add a delivery address or select pickup store locations.
2
As users generally tend to close modals by clicking on the background screen, there is a risk of accidental selections leading to the opening of internal pages.
3
The menu page's lack of a fixed position posed a challenge for users trying to track their selection steps while scrolling down to explore additional menu options. The difficulty was compounded by the fact that each page opened led to another, causing confusion about their chosen options.
Getting to Know Users

Persona

To gain a deeper understanding of our users, we conducted interviews with several personas. Through these interviews, we gained valuable insights into their goals and pain points when using the current website.
Getting to Know Users

User Journey

Based on the user persona, we've mapped out their journey to analyze pain points and identify opportunities.
Research

Data Analysis

After reviewing all user pain points and conducting interviews, we initiated data analysis to comprehend user interactions with their platforms. Overall, users predominantly rely on ordering food and making in-store card purchases, with app usage significantly lower compared to other platforms.

03. Data Analysis

After reviewing all user pain points and conducting interviews, we initiated data analysis to comprehend user interactions with their platforms. Overall, users predominantly rely on ordering food and making in-store card purchases, with app usage significantly lower compared to other platforms.

Online Food Market Research

The online food ordering system has witnessed significant growth, particularly when compared to the period before the pandemic. In my effort to gain a thorough understanding of this project, I am delving deeper into market trends and user behavior.
Secondary Research

Competitor Analysis

Based on my research, I identified the top 10 popular pizza franchises in Canada, with Pizza Nova ranking 8th. This discovery prompted me to analyze the factors that contributed to the success of the top 1-7 companies in the pizza industry, assessing their strengths for growth and identifying areas where we could potentially outperform these companies to enhance our competitive advantage.

Corner Stone Workshop

After research, our team and clients come together to identify our cornerstone, focusing on essential features, functions, problems, and goals.

a)  Market Segmentation

To gain a deeper understanding of our target users, we identify specific consumer groups. This allows us to customize products and branding to be appealing to the identified audience.
Target Audience
Every Customer: Does not have an account or has an account but is not signed
Logged-in Customer: Has registered for an account and has signed inCurrent
Franchise/Store
EmployeeJob seekers
Psychographics
Personalities & Attitudes: Tailored for all different personality types
Lifestyle: Focused on convenience, value for money, and sharing
Values: Emphasizing money-conscious choices, customization, personalization, quick check-out, and time-saving options
Demographics
Gender: Both
Age: Any age group capable of ordering pizza
Location: Ontario - Within proximity to 150 store locations
Occupation:
• University/College students
• Housewives
• Full-time job employees
• Retired individuals
Income: $12,000 and above
Family Size: Individuals or families of any size (1+)

b) S.W.O.T

We created a S.W.O.T analysis to assess the company's strengths, weaknesses, opportunities, and threats. This helps in planning for the present and future both internally and externally.

c) Research Synthesis and Our Goals

After thorough research, we gathered and analyzed information to identify precise challenges. With these insights, we refined our goals and objectives to better address the issues and align with our overall aim.

Key Issues

1.  Customers tend to prefer purchasing items in-store rather than opting for online orders.
2. The majority of gift card sales occur in physical stores or other retailers like Costco or Shoppers, with minimal traction online.
3. The user experience (UX) in the app has been a source of frustration, hindering the company's revenue potential.
4. There is a lack of a substantial user base, with a limited number of customers signing up for Pizza Nova accounts.

Aim/Goal

1. Enhance the customer experience on both the site and app, featuring easily accessible localized content and offers.
2. Increase the percentage of online orders, streamline order calls to alleviate call center demand
3. Utilize the e-commerce platform as a comprehensive source of information for products and company details, encompassing careers and franchising.
4. Implementing a rewards system for app users to boost online orders and encourage account sign-ups through the mobile app.

Features and Functions Matrix (FFM)

Prior to constructing the information architecture, we initiate the development of a features and functions matrix. This matrix outlines the required features, their purposes, and the associated goals for each target user.

Build User flow

Low-Fidelity Wireframes
for Desktop

With all elements in position, I proceeded to craft low-fi wireframes, aligning them with the sitemap and integrating components from the established library.

Wireframes Refinement

After defining all information, I began creating low to mid-fidelity wireframes. We iterated on each screen as needed in the process.
1
Use Bottom Navigation Instead of Hamburger Menu
This is some text inside of a In our initial design, we used a hamburger menu to streamline the focus on ordering pizza. However, since our target audience spans all age groups and we want a familiar navigation experience, we opted for a more widely recognized bottom navigation component.div block.
2
Switch Placement
After replacing the hamburger menu and total price button, we positioned them at the bottom. This way, when users scroll up, they become visible, and when scrolling down, they hide. This ensures a non-intrusive user experience, respecting the limited screen space.
2. b
Remove “•”
To save space and simplify, we eliminated the '•' and combined it into a single word.
3
Swap Position and Narrow Space
We realized that displaying the price and cart took up too much width space. To address this, we relocated them to the top right corner, alongside the Pizza Nova logo as per the client's specific request.
4
Include Tier/Offer Text and Button
In the initial phase 1, the client expressed the desire for a tiered system where users could access additional offers and pricing. To facilitate quick access to their available offers, we introduced a 'View' button for more details
4. b
Refine Rewards: Client Logo and Offer Card Display
After testing and discussions, we simplified the rewards system by removing loyalty tiers, focusing on earning and redeeming points. The user interface now highlights offers with a lively Vegas-themed points bar for added excitement.
1
Update Button Title to 'Future Order
Upon client feedback, we've clarified the button title. It now defaults to "Future Order" for immediate orders. When users switch to a future order, the button dynamically changes to 'Edit.'
2
Switch Placement
After user testing, we observed that when users have multiple saved addresses, adding a new one requires unnecessary scrolling. To streamline the process and save users time, we've relocated the "Add Address" button above the list of saved addresses. This adjustment eliminates the need for users to scroll down to find the button on the screen.
3
Replace Button Position
After user testing, I moved the 'Add New Address' button to the top to avoid the need for users to scroll down as they added more addresses.

Design System

Based on design direction we created, I began crafting a component infused with the brand identity, incorporating the rounded style and brand colors. In parallel, I developed a comprehensive design system, categorizing design assets, global components, homepage elements, and versatile components that could be utilized across pages. I organized these systematically in alphabetical order, facilitating easy access for the team to locate specific components.
Improved Feature 1 - Mobile App
Rewards Feature to Boost App Engagement
To enhance user engagement and increase the usage of our app, we are introducing a comprehensive rewards feature. This feature will incentivize users by offering tangible benefits for their consistent interaction with the app.
Improved Feature 2 - Mobile App
Using the Tab Menu for Easy Navigation
This feature allows users to easily find the food items they are looking for by clicking on each category.
Improved Feature 3 - Mobile App
Enhanced Item Page with Modification Options
We want users to easily and quickly perform their main action, "Adding an order." We've improved the page so users can see which items have been modified and what items are preselected for signature menus. Users can quickly add to their order on this page or view and modify their selections based on their preferences.

High-Fidelity Prototypes: App Application IOS

More Works

pizza Nova thumbnail
Pizza Nova
Food Services I Responsive Web/Mobile & Mobile App
Boystown thumbnail
Boys Town
Education I Responsive Web/Mobile
BCH thumbnail
BC Hockey
Sports I Responsive Web/Mobile
Financial horizon thumbnail
Financial Horizons
Financial Services I Responsive Web/Mobile
Oxford
Commercial Real Estate I Responsive Web/Mobile
InterRent thumbnail
Interrent
Commercial Real Estate I Responsive Web/Mobile
LinkedinBehanceInstagram