Project scope

I was approached by Viafly to design their suite of products across all platforms. This included a website, mobile app & store side dashboard.

I was tasked to design all of this from scratch. In order to do this and prepare the design team for growth at scale, I created a comprehensive style guide and design language system.

What is Viafly?

Viafly is a real-time local online marketplace for retail stores. Viafly facilitates retail search and discovery for consumers. It also allows consumers to place orders to pick items up in-store.

My role

My role with Viafly currently is Head of Product Design. Working with such a small start-up I am tasked with being both the lead designer and the main project manager for all product based projects. As lead designer, I have the final say on all design decisions and am doing the bulk of the design work. As a project manager, I communicate with the front-end and back-end engineers to make sure that everything gets built according to it’s designed intentions.

Viafly operates as a marketplace, serving both the general public and their partnered stores. In order to do this, I was tasked with the designing of the website, mobile app and store dashboard. The website and mobile are both intended to serve the same function, facilitating item search and discovery and allowing the consumer to place orders to pick items up in-store. The store dashboard is the product that the retail stores interface with to field incoming orders & and manage their product inventory.

Style guide

This style guide that I created consists of all the colors and typography (and their relation to each other) used within the Viafly UI.

Shades

Blues

Logo

Typography

Design Language System

Designing a product presents its own unique challenges. Designing a design language system is a completely different ball game. Building design languages come with their own challenges and obstacles, however, they create clear direction and communication internally between the design team and externally with the engineering team. This design language system helped build a product but also helped build a team that is ready and prepared for growth at scale.

1

Elements

These are small, stand-alone components like buttons and icons
2

Components

These are usually an assembly of small components into a larger component like a search form (which includes a form input, a button, and potentially even a search icon)
3

Regions

These are an area of the UI like a left-hand navigation
4

Layouts

How the pieces are laid out on the page (like a header region, followed by a sidebar and main content area, followed by a footer)

Navigation components

This is the nav bar. Here the user can use the search feature to search for items in their city.
This is the “tool bar” section of the nav bar. It holds the icons for the profile, collections & bag. We chose to use emojis for the UI icons because it adds a feeling of informality to the experience and helps the user have fun.
This is the side bar navigation (closed and expanded). Here the user can scroll through and interact directly with the stores in their city.
This is the expanded map. Here the user can interactively move around and view all of the stores in their city. The map also interact with the cards in the main feed and is highlighted when a user hovers over an item sold in that store.

Nomatic components

This is the collection flow component. Here the user chooses which collection they want to save an item when they click the save icon.
This is the pickup window selection component. In this drop-down, the user selects the time they would like to pick up their order.
This is a standard drop-down component.

Content components

This is an item card
This is an item card when it is hovered. A slight shadow appears along with the tool tip component.
The tool tip component presents the “save” or “bag” options for an item
This is a standard collection card

MISC components

This is the filter menu component
When a filter is clicked on, it is turned into a “chip” element.
This is the introductory tour component.
These are alert notifications that let the user know what action they just performed

Designing the Web App

It’s important for a product like Viafly to operate across all platforms and be fully responsive. Depicted below are images of Viafly inside web browsers, on both desktop and mobile devives.

1

Simple

Viafly's web app was built to create the simplest way for a user to shop their neighborhood.
2

Discoverable & Customizable

A discoverability feed, plus the ability to save items and stores to a personal collection allows the user to customize their experience every time they interact with the product.
3

Intuitive

The clean, minimal design allows the important content (the items themselves) to take command, leading to a fun & easy-to-use interface

Interactive Map

Shoppers can see exactly where the products they want are.

Map interacts with the cards in the feed. When the users hover over an item, the store associated with that item is highlighted on the map.

Store Page

Stores have their own dashboard connected to their POS. This allows them to easily upload & manage the items they showcase on Viafly.

Stores can customize details & item pickup windows.

Each store page is customizable, giving the store the power to communicate their brand through the Viafly interface.

Collections

Shoppers can create and customize their own collections.

Items can be easily added to any collection by simply clicking the “Heart” emoji on an item.

The different elements

Viafly’s web app functions primarily around the use of modals. The user’s profile, their bag & even the items on Viafly exist within modals. I chose to design the web app this way to increase the speed of navigation around the product. Traditional online shopping has many points of friction throughout the user experience. As a product designer, I try to minimize these points of friction as much as possible.

The Mobile App

Below are the designs for the mobile app. I was tasked to design only for iOS.

Mobile App

Designing for the mobile app offered several challenges. The usability of modals is significantly lower in mobile apps compared to desktop browsers, however we wanted to keep a consistent feel of the product across platforms. By creating a universal sticky navigation and separating the search bar from the navigation we were able to overcome this challenge, resulting in each element compromising its own page. The overall visual design and styling were not changed to retain consistency throughout the products.