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.
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.
1 Lead Designer
2 UI/UX Designers
2 iOS Developers
Design System
Wireframes
Prototypes
Motion Design
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.
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.
Twenty insects from Oklahoma were chosen and adapted into an illustrated symbol system to be housed within the interfaces.
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.
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.
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.
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.
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.
Prominent graphs and charts were adapted to streamline complex data into simple and branded graphics.
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.
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.
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.
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
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.
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.
For more information regarding this project or other design services please reach out via email at contact@nickyoung.design.
