Design Principles of Shyp
Main points of Designing the Shyp Web Experience
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.
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.
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: