Designing the Shyp Web Experience

Our process from customer need to product launch

On October 6 we released our first web product as a part of Shyp’s new service offering. 🚀

I’m extremely excited to share our path and the lessons we learned along the way. This is one of the biggest accomplishments in my design career and I couldn’t be more proud of all the hard work that the team has put into it.

The background

Back in 2015 when I joined Shyp, the only customer-facing product was a mobile app. Though some small pieces of the product existed on the website (signup, tracking pages, etc), our customers had to download the mobile app in order to use Shyp. This worked well for consumers, but as we expanded to meet the needs of businesses, we discovered the need for an experience on the web.

Our goal was to provide customers with a more powerful tool to meet the needs of their business. The screen real estate available on desktop browsers allows our customers to process much higher shipping volume as well as d0 tasks simultaneously.

One of the many services Shyp offers customers is the ability to compare prices across carriers. Due to the infrastructure of our pickup and packaging service, we were only offering our price comparison service to customers in four cities. Through many conversations with customers outside of our cities we realized comparing carrier rates was a service they wanted — even without our other fulfillment services. As we began to explore offering our price-comparison service nationwide, we saw many new opportunities to develop a seamless and powerful web experience.

Our design team started brainstorming ideas on how to achieve our product goals. My role for this project was to focus on the Shyp web experience. The objective was not only to bring our new product to life, but also to define a strong foundation for our current and future web offerings. Although we had style guides and reusable components we had developed for our mobile apps, we needed to create a new design system for web. Our challenge was to incorporate research into our thinking, build a product that meets the needs of our customers, create this new system so the design could scale, and do it all under a tight launch deadline.

Understanding the user problem

In order to successfully execute on a problem the team needed to first understand the problem. Product design is a multidisciplinary craft that includes research, competitive analysis, user behavior analysis, and an understanding of technical constraints.

The goal of this initiative was to help with fulfillment and build better tools for high-volume shippers, small businesses, and marketplace sellers.

Through extensive user research we realized that business customers have very different (and often very complicated) workflows, processes, and workarounds when it comes to shipping fulfillment compared to consumers. Businesses also have much larger shipping volumes, more defined fulfillment processes, invoicing systems, timelines, etc.

Interviewing users gave us a lot of insight into the workflow of the business customers and areas where a new Shyp product could really change the way our users ship. We quickly realized there was a huge opportunity to offer a compelling product and that users were excited about the idea of a new product to meet their needs.

Going nationwide

Up until now, Shyp was only available in 4 cities — San Francisco, Los Angeles, New York and Chicago. We couldn’t profitably scale the pickup and packaging service until we had hit a certain volume. We wanted to take the learnings from these markets and apply them nationwide. Launching a label printing product nationwide allowed us to open up pieces of our service offering without the logistical overhead/cost.

Having no geographic boundaries created an interesting design challenge that we didn’t have before. The needs and processes 0f a large scale apparel business in New York City are very different from local jewelry maker in Oklahoma. While the goal of both user personas is the same — to deliver the goods to their customers —their workflow and processes were inherently different.

The base

One of the biggest challenges when developing a new design system from scratch is to build something scalable for the future. I looked back at the history of our mobile design and learned a lot from from it. Back in 2015 we went through a rebrand and established design patterns that helped shape my vision of what Shyp could look like on the web.

Typography and Colors

Our brand font family is Graphik, which we also carried over to the web. It works great inside information-dense table views (scaling down to as small as 10px), as well as for larger titles and messages.

We had a strong and recognizable foundation for our color palette, and we wanted to keep a consistent visual feeling as users moved between devices. As we do in our mobile apps, we emphasized whitespace to present information in an easy, readable way—and added splashes of color to emphasize actionable elements.

Design principles

In order to communicate effectively as a design, product, and engineering team we need to speak the same language and use the right tools. We need to believe in the same values and use them to inform our decisions. Let’s revisit Julie Zhou’s thoughts in A Matter of Principle:

“You see, a great designer starts with the whys. She conveys the principles behind her thinking and leaves you feeling like you understand the core values from which all her design decisions flow.”

While designing a new system, inevitably a lot of assumptions are made along the way. To help with this challenge and to support the assumptions, it is extremely valuable to establish a set of design core design values (principles) that will allow to think systematically.

These design principles help us with:

• supporting design decisions
• communicating your decisions to the broader design and engineering teams
• getting buy-in from stakeholders
• making sure the system is unified and works as expected
• creating a sense of trust with your users

The engineering team also encouraged consistency as we began creating the building blocks of this product; consistent elements, approaches and themes meant they could create reusable components rather than one-off solutions. Designers and engineers speak the same language, they just use different tools to express the same intent. Their unified goal is to serve the user’s needs.

The openness and mobility of a startup environment makes it relatively easy to shape the process if one can prove the value of a proposed change. The importance of collaboration was understood and agreed upon between members of my team. We had many conversations around what would be the best way to utilize our time and effort to reach the ambitious goal of building a brand new product on a tight deadline.

Here are the principles we implemented when designing the web experience for Shyp:

The user is in control — this is something we strive for at all times. We deeply believe in the necessity to give the user the control they deserve; guide them through the product while leaving the decision making up to them.

Simplicity — the system should be intuitive and easy to use, with one main action per atomic UI view. That said, it should provide all the necessary tools for the user to successfully complete their tasks.

Transparency — from creation to shipping to delivering, the user has full transparency of the shipment lifecycle, knowing the exact location and status of their shipments at any moment. This was extremely important when designing our Shipments page with tracking events.

Trust — although the user should remain in control, we should provide sensible defaults, anticipate their needs and provide a consistent experience.

Feedback — the system should provide meaningful feedback to the user; help them recover from mistakes as well as understand the options available to them.

Every design decision we made had to be supported by these principles. We found this to be extremely valuable since it forced us to be consistent with our decisions and make sure we put users needs first.

User flows

Since we targeted business customers as our primary users, we wanted to support them creating shipments manually while also enabling them to import orders from their online store.

After importing, the user is able to edit their shipment, add any missing information if necessary, select their service class and compare rates between carriers. Once they purchase a label, they can see a detailed breakdown of all their items and their current status.

Layout

We had many options for how to display information — we knew we wanted it to be accessible and intuitive, but that it needed to be information-dense and powerful enough for advanced business customers.

The interesting challenge here was to present a lot of information in an accessible way—shipping options, package sizes, customs declarations, tracking—while maintaining simplicity as one of our fundamental design principles.

Choosing a dashboard layout allowed me to accomplish a few tasks and fulfill the users needs with high shipping volumes, including:

• View many shipments at a glance to enable an easy process for creation, editing, and purchasing shipping
• Easy creation of new shipments
• Ability to navigate between multiple pages quickly
• Allow for a flexible, responsive layout
• Shipment manipulation, such as editing, deleting, etc.
• Batch processing of shipments
• Tracking many shipments at a glance

The more detailed dashboard view is shown below:

The table contains many rows, each representing a shipment (either pending or processed). By selecting a row, the user indicates their intent and can manipulate the shipment or continue to purchase the shipping label.

Shipping rate comparison

One of the key features of Shyp is the ability to price compare shipping rates. With the ability to change filters and see how it reflects their rate, the customer can make more educated decisions on their shipping selection.

“Editing” sidebar

The sidebar in the dashboard is the essential method for the user to manipulate their existing shipments. We decided to go with this pattern so the user can quickly navigate between the orders and perform quick edits without losing the context.

Entering the package size, modifying recipient info, filling out customs declarations, selecting a shipping rate, and more actions can all be done in the sidebar. It also allows for a quick comparison between shipments in the table. The feedback is provided in case something needs attention - such as a missing package size or an expired rate.

Designing a system

Starting from scratch was both exciting and challenging. We had to maintain consistency with the established brand style, while also developing guidelines and principles for a new platform.

Fortunately, we had established brand and mobile UI guidelines that gave us a good place to start. We were able to leverage some of the existing patterns and apply systematic thinking to the product.

Though I had started mocking up various screens of the app on their own, I quickly realized that I needed to zoom out to see the bigger picture. To do this, I pulled out new components into separate Sketch files and annotated every screen to be sure we applied the same rules to each new feature.

Inputs and Buttons

UI Components

To reinforce consistency in design elements, we compiled atomic elements such as buttons, table views, photos, input fields, etc. into a pattern library. We defined the spacing and size of each element ensuring consistency and familiar patterns throughout the platform.

To share our style guides within our team we use GitHub — you can read about our process here.

Web Component Library

During one hack day at Shyp, my engineers and I built out a component library, which is a collection of all the Style Guide elements translated into React components. This allowed us to consider each component in isolation and try out each variation, as well as offer a great way to onboard new team members and introduce them to the system we built.

Some of you might remember me revealing some sneak peaks on Dribbble:

Conclusion

I’m extremely excited to be a part of this huge milestone in Shyp history. We came a long way from where we started—from ideation and research to a complete end-to-end web experience.

What’s next?

It’s only the start of an amazing journey of Shyp. We’re working on exciting new features, continuing to build on the foundation that we established. Keep your eyes open!

Drop me a line

Feel free to email or tweet at me with any thoughts or feedback you have, or comment below. I’d love to hear from you!

Thanks for reading! 🙏

P.S. Big thanks to Micah for the feedback! Also — we’re hiring an awesome Communications Designer. Read more and apply here: https://jobs.lever.co/shyp