close
close

ShopRunner

Design System, Style Guide, & Userflow
bullseye icon
The client

ShopRunner was acquired by FedEx in December 2020. The yearly subscription B2C e-commerce platform partners with brands and merchants that traditionally have fees for shipping and returns. ShopRunner offers free two-day shipping, free returns, and member-exclusive discounts to consumers to improve the shopping and post-purchase experience.

hollowed square icon
The brief

Create a robust and refined design system and accompanying style guide. The goals were to assist and support multiple in-flight teams, streamline workflows, and spearhead the design system for web, app, and dashboard B2B & B2C products.

four star connection icon
general info
Timeframe
2022 – 2023
Role
Visual Designer
Team

1 Lead Designer
2 UI/UX Designers
2 iOS Developers

Key Terms

Design System
Wireframes

Prototypes
Motion Design

Brand
Refresh

The new branding encompasses a renovated look that instills more energy and clarity in the brand; while harkening back to retro ties and continuing to feature orange as their key brand color.

Old Logo that was previously being used by Guestroom Records
Mockup of the new Guestoom Records logomark.
Mockup of the new Guestroom logo.
Sitemap / userflow that shows a users projected journey through the app.
The second Guestroom Records app mockups. This gif presents several different screens.The third Guestroom Records app mockups. This gif presents several different screens.The fourth Guestroom Records app mockups. This gif presents several different screens.

MOBILE
UI/UX

This branding is used throughout a fresh and snappy mobile experience. It’s now easier than ever to purchase, pre-order, and listen to your vinyl collection – both at home or on the go.

✦  A new Onboarding userflow allows users to easily log into their Guestroom Records account using your email address, Face ID, or register as a new user to create a brand new account.

✦  These days vinyls come with digital track download codes. Using Guestroom Records makes this a breeze. Upon purchase of a vinyl it will also be added to your Digital Library so you can still listen to your favorite song even when you’re away from your turntable.

✦  The Traditional Shopping Experience featuring a storefront with vinyls that are all neatly displayed, visible, and searchable.

✦  The Personalized Feed Experience that features your most highly recommended albums grouped into a for you page. The user is able to swipe through using multiple gestures to preview, save, or remove vinyls to their liking.

SYMBOL
SYSTEM

Twenty insects from Oklahoma were chosen and adapted into an illustrated symbol system to be housed within the interfaces.

An insect symbol system of 20 different insects native to Oklahoma.

Mobile
UI/UX

The insect symbol system and mobile app interface are the beginning of bringing an educational and nurturing experience to the OKC Zoo both up close and from afar.

✦  An Onboarding Tutorial was developed to guide users, as well as, link to the app store to allow the app to be accessible on mobile devices directly from digital QR exhibit posters.

✦  Insect descriptions will serve to inform the audience and streamline the exhibit experience, while a Insect-Tracking Camera feature allows the zoo guests to document and share their journey.

✦  A Digital Map provides a simple solution to a complex area. Exhibits are divided and can be expanded for more information.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Nintendo Annual Report Console Timeline Spread 03
Mindful.Me Third Flow screens presented in an iPhone mockup. Several screens and animations are shown.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Gamify   design

The new report features colors, images, and references from multiple Nintendo games. Products are shown in use providing imagery of the company’s missions and values. Information was maintained while being visualized in a simple and fun presentation.

Nintendo Annual Report Table of Contents
Nintendo Annual Report Mission Statement
Nintendo Annual Report Fiscal Year Spread
Nintendo Annual Report Console Timeline Spread 01
Nintendo Annual Report Console Timeline Spread 02
Nintendo Annual Report Console Timeline Spread 03

CONSOLE TIMELINE ILLUSTRATIONS

An illustrated console timeline shows the evolution of entertainment systems throughout the decades. More colors, imagery, references from Nintendo’s video games, and corporate historical context have been added.

Data
VISUALIZATION

Prominent graphs and charts were adapted to streamline complex data into simple and branded graphics.

Nintendo Annual Report Graph and Chart 01
Nintendo Annual Report Graph and Chart 02

LOGO  &  graphic

Mindful.Me is an app dedicated to the recovery and restoration of one’s mental health. It provides a reliable and accessible solution to finding mental health professionals and self expression.

✦  The Mindful.Me Logo is made up of multiple pieces that come together to become whole. It is an abstraction of a group therapy session and meant to evoke the idea of community.

✦ The App Icon functions as the entry point for users while being a memorable and distinct mark when surrounded by other apps.

✦  A splash screen Digital Illustration was created to serve as a visual conveying the ambience of the service to consumers.

Mindful.Me Logo Flat White VersionMindful.Me Logo App Icon Version
Mindful.Me Splash Screen Illustration
Mindful.Me First Flow screens presented in an iPhone mockup. Several screens and animations are shown.
Mindful.Me Second Flow screens presented in an iPhone mockup. Several screens and animations are shown.
Mindful.Me Third Flow screens presented in an iPhone mockup. Several screens and animations are shown.
Mindful.Me Fourth Flow screens presented in an iPhone mockup. Several screens and animations are shown.

USERLOWS
& FEATURES

An interactive prototype was built to demonstrate the navigation through the mobile app. In addition, three key new features were introduced to boost user engagement and partner product visibility:

✦  The Doctor Portal onboards patients and connects users to local or virtual therapists to find, meet, and chat.

✦ An Appointment Calendar aid users in maintaining a consistent schedule with their therapist(s) while also providing a place to cancel or reshedule appointments directly in app.

✦  A Mood Tacking Calendar / Journal assists patients in coping and tracking patterns in their emotions, behaviors, and thoughts.

✦  A Settings Page allows users to manage digital privacy permissions and customize their user experience followed by a custom log out animation.

UserFlow  
&  FEATURES

An interactive prototype was built using design system components to completely remap the navigation of the mobile app.

In addition, three key new features were introduced to boost user engagement and partner product visibility:

✦  An algorithmic Discovery Homepage brings relevant partner products and potential saving directly to customers.

✦  A streamlined Visual Search process that aids users in finding visually similar items.

✦  A revolutionary Outfit Generator that allow users to collage items from partner stores to style outfits directly in the app.

↓     View Full Prototype Below     ↓

DESIGN
SYSTEM

Let's take a look behind the scenes.

Prior to building the interavtive prototype, I took the lead on creating the Bolt Design System. This system is a living a breathing UI kit with accompanying style guide documentation

Bolt Design System Cover Photo click this to be taken to the Figma.
✦  Click the above image for more about the ShopRunner Design System  ✦
ShopRunner Color Palletes from Design SystemShopRunner Icon System from Design SystemShopRunner Spacing Guidelines from Design System
ShopRunner Typography and Scale from Design SystemShopRunner Grid System from Design SystemShopRunner Elevation from Design System
ShopRunner Corner Radius from Design System

The system was establish by solidifying foundational elements such as color palette, typography, elevation, grids, icons, border radius, stroke weights, and spacing.

Next over fifty unique components were created to used by designers to assist in the build process. Each component was accompanied by an anatomy card that detailed design specifications to simply handoff to engineers for development.

Image of the Primary Button component with variants.
Image of the Primary Button anatomy card that details the design specifications.

The system was thoroughly documented via style guides and a governance process was used to streamline team processes, define dos and don'ts, establish a working backlog, and prevent redundancy.

Image of documentation that show how to accurately use components.
Image that shows how an incorrect use of a component.

THANKS  for
Reading!

For more information regarding this project or other design services please reach out via email at contact@nickyoung.design.

Let's w   rk 
together !
contact@nickyoung.design