What is Viafly?

Viafly is a marketplace connecting shoppers with the live inventory of stores in their area. Shoppers in urban areas often have everything they need nearby, yet they still need to search Google/Yelp and call stores to ask whether certain items are in stock. The Viafly mobile app makes it possible for shoppers to search and discover what’s being sold in their city.

My role

My role with Viafly was Lead Product Designer. As a product designer for a small startup, my work was comprehensive and consisted of both UI/UX as well as product management. As a product manager, I was integral in the product decision making process and direction. As a UI/UX designer, I was responsible for both the designing of the UI and for communicating the designs with developers to make sure the vision was executed correctly.

Main Feed

The overall look and feel of this app was designed to be clean and minimal.

Distraction free and intent driving.

The reason people are using the Viafly app is to search and discover new items. The simple UI allows the products to stand out and be represented for what they truly are.

Product Detail Page

Large images and clearly defined actions.
One big thing that stands out on these screens is the navigation bar. Since these pages can have long detailed product descriptions, I wanted the user to always have the ability to add an item to his or her bag or to save an item to a collection at any given moment.

Bag & Checkout

One of my favorite things about this app is the use of emojis for specific icons, most recognizably the tool bar. When a tab is selected, that emoji comes to life in full color and stands out among the other emojis in grayscale.
This screen is also unique for its use of color. I introduced color to help the user distinguish between the multiple stores that can exist within the bag.

Collections

Collections are one of the strongest features of the Viafly app. They allow the user to create their own collection, name it what they want and save as many items as they want to as many collections as they desire.
The screen to the left is the main view of all of the users collections. What you see on the right is the view inside of a collection.

Map & Store Page

On the left you’ll see the Viafly map view. The map is accessed from the Homepage with one simple left-to-right swipe of the screen or by clicking the earth on the left side of the navigation bar. The map provides another way for users to search their area. They can move around the map manually or swipe through the cards on the bottom of the screen allowing them to jump pin-to-pin.
On the right you’ll see a stores Viafly page. Every store has a unique banner image, a logo and a description. Similar to the colors in the bag, a banner image is important for the stores brand by giving them a level of customizability.
Below the description and above the item cards are category “blocks”. Blocks are used through the search experience but also have importance here. They allow the user to quickly jump into a category and begin their discovery. Filters can be used at anytime, before or after.