Overview

What is Paprika?

Paprika is a B2C mobile application that aims to match users with restaurants that fit their specific dietary preferences. Matching user dietary preferences to restaurants was the main value proposition of the application and we built our designs and flows around this philosophy.

My Work: Responsive Website to Bolster Paprika's Brand Identity

I designed and developed a responsive website on Webflow for Paprika, prioritizing client needs, incorporating eye-catching visuals, and utilizing SEO, accessibility, and analytics knowledge to enhance the brand's online presence.

You can view the live website below! (Note: Domain name transfer in progress)

View Live Website Here

Paprika's Goals for the Website

With a clear requirements page, our over-arching goal was to help introduct users to the Paprika App and to help them learn more about the app while incentivizing them todownload

Foodie Community Oriented

Paprika’s brand identity is to be a seen as a community advocate for allergy awareness within the restaurant business.

Responsive Across Platforms

Elements scale well from mobile to tablet to desktop. Emphasizing a mobile first mentality, since Paprika’s application is mobile

Organized Naming

Other developers may work on this iterations of this website in the future. Naming conventions during development need to be organized

Primary KPIs for the B2C Website

Increase App Downloads

App downloads represent our ideal conversion. With every download, we increase our chances of growing our user base

Under 50% Bounce Rate

We monitor bounce rate to target if our home page is doing that job.

Pages Navigated

The longer that users browse the website, the more invested they will get into our product and the more likely we will be able to convert this to downloads.

User Research

What questions do users have about the Paprika website?

We sought to understand what questions users had about Paprika and what they expected to have on the website. We centered our designs and content around these outcomes.

Addressing User Pain Points

Site-Mapping and Planning Content

Many of the user's questions about the website were content related, therefore we planned our site-map of the website and what content would go where and how certain pages would answer questions from our users.

ADDRESSING PRIMARY QUESTIONS

How does Paprika work to find restaurants with my dietary preferences?

Within the home page, we prioritize segments that illustrate how the application is meant to be used with accompanying text. However, we believe that our onboarding is the most sufficient tutorial for learning to use the app. Example below:

Does Paprika support my dietary preferences?

We created a section dedicated to clarifying what dietary labels paprika supports as well as the definition of each label.

What if I have more questions about PaI prika?

We created an FAQ section based off the top questions that people had, when introduced to the concept of Paprika. To allow for feedback and empowerment to the user, we also added a contact us page so that any changes or modifications can be sent to the Paprika team

Addressing Business Needs

BUSINESS GOAL #1

How might we make Paprika have a “foodie vibe” and a community feel?

Graphics: Designing graphics that are visually engaging, playful, and show the Paprika App with its main screens

Imagery: Using consistent imagery that centers around the idea of “sharing a meal with friends and family” and “community oriented”

Illustrations: We used small illustrations next to text create a playful, and “foodie” vibe.

BUSINESS GOAL #2

Responsiveness: Planning for different breakpoints

For websites, my approach is to approach content blocks with a CSS grid mentality. This means that as we move to smaller breakpoints, a horizontal layout will shift to a vertical layout, moving the two blocks on the grid from horizontal to vertical. My approach for typography was to use rems rather than pixels so that the typography scales fluidly from different breakpoints.

Design Process

Creating Repeat-able Website Components

HIGH FIDELITY

Taking Designs into Development

After finishing the end to end designs, I was tasked with web development. Although you can view my high fidelity designs below, please view the live website as well! Thank you!