Shippsy’s Dashboard Dissection
Shippsy, a B2C innovator, transforms Canadian shopping with a streamlined solution for U.S. store purchases. Combining competitive pricing with enhanced transparency via an upgraded dashboard, Shippsy offers a seamless experience trusted by thousands of users everyday.
Role
Challenge
Time frame
Structure
Discovery & user research highlights
Design Brief
All the known specs, links, references, copy docs, etc are all housed in the design brief, which all team members have access to.
Research
Competitive analysis is created. Site audit and information architecture is carried out to fully understand the variables we are working with.
Cross Collaboration
Every step requires collaboration. This allows us all team members to have their voices heard, to ensure we have aligned goals, and to manage expectations.
User Interviews
Internal user interviews are carried out to gather helpful insight that will shape design thinking and final outcomes.
Design Brief
The design process begins with a structured Google Sheet outlining goals, research, personas, milestones, and key contacts—ensuring alignment from the start.
Goals
Target Dates
Persona
Point of contacts
User Interviews
I conducted internal interviews with the Head of Marketing and Shippsy’s Customer Service Manager to understand user goals, frustrations, and successful features. While issues are a key focus, identifying what works well ensures a balanced, user-centered approach. These insights drive informed, effective design decisions.
Collaboration
& Information architecture
While awaiting questionnaire responses, I conducted a site audit to assess each page and component. After validating findings with my product manager, we identified a 55% page reduction opportunity. Shipment statuses, previously spread across six pages, were consolidated into one, and status types were streamlined from 15 to 8—a 53% reduction. With clutter removed, we collaboratively structured a clear, efficient information architecture.
Dashboard inventory
Documenting opinions
Identifying legacy items
Information architecture
Design highlights
Moodboard
Moodboard options are created in order to fully understand the teams expectations regarding the look and feel of the dashboard.
Midfi screens
The structure and information architecture play a big role in this stage. Once the team is aligned with the blueprint, the hifis begin to be developed.
Iterations based on feedback
Feedback on the midifs are discussed and tracked in slack threads before it is applied. This helps team members stay on the same page.
Hifi screens
Fully accessible, responsive, and prototyped screens are created based on team collaboration, research, and user empathy.
Moodboard
After finalizing research and information architecture, I created moodboards to define the dashboard’s visual direction. I presented two options: a dark, high-contrast theme and a lighter, softer design. The team preferred the latter, appreciating features like progress bars, colorful status indicators, and a mobile card view. This discussion ensured alignment on the aesthetic direction.
Moodboard options
Colour palette
Favourite features
Collaboration
Midfis & iterations
With the structure in place, I moved to sketching and refining mid-fidelity designs. These were shared with key stakeholders, including Marketing, Product, Customer Service, Technology, and the CEO. Feedback was gathered transparently via Slack, allowing open discussions, reducing miscommunication, and streamlining iterations for a truly collaborative process.
Sketches
Transparency
Collaboration
No broken telephone
High-Fidelity Designs & Final Features
After multiple iterations focused on the navigation bar and status filters, the team was pleased with the final design. Streamlining pages reduced clutter, while refined statuses improved shipment tracking.
Accessibility Compliance
Now fully AA compliant, the redesign replaces low-contrast elements like white text on yellow. Removing yellow CTAs was a challenge, but the final design remains clean and user-friendly.
Clearer Shipment Tracking
An “Action” column clarifies statuses, replacing ambiguous labels like “Ready for Pickup” with “Arrived at Shippsy,” reducing confusion and support inquiries.
Efficient Workflows
Inline CTAs within shipment rows/cards provide direct access to key actions, eliminating four clicks and improving user experience.
Responsive designs
Fully accessible designs
Streamlined workflows
Improved user confidence
Reduced clutter
Handoff highlights
Edge cases
Just when you think you’re ready to pass the design baton off to the development team – is when the edge cases come out of the woodwork.
Handoff
The handoff begins by walking the development team through the prototypes. Next, Jira tickets are created and assigned accordingly.
Design system update
The design system system is updated to ensure consistency in execution and design thinking – as well as to help us scale both our product and team.
Quality assurance
To ensure designs are implemented accurately, I go through each page as it’s developed. Revisions are noted in Jira tickets via visuals aids and video as well as meetings & huddles.
Edge cases & handoff
Before development, we walked the team through the final design to catch any gaps. During this review, we discovered a removed page was essential for business clients, who, despite being only 8% of users, relied on it to manage shipments. We reinstated the page exclusively for them while keeping it removed for primary users.
With all issues resolved, I created Jira tickets with Figma links, and the Head of Technology assigned them for development.
Design system update
After handing off the project, I updated the design system with new components, ensuring consistency and accurate variations across all screens. Maintaining the design system is key for both consistency and efficiency, particularly for future projects like Stallion. As the design team grows, the system will help onboard new members and enable confident, autonomous design work.
Quality assurance
As designs are implemented, I review pages and flag inconsistencies in Jira, using screenshots or Loom recordings for complex issues. If further clarification is needed, I arrange meetings or quick Slack huddles. I prioritize supporting the dev team to ensure design integrity is maintained, regardless of the number of revisions required.
Visual aids
Development support
Screen shares
Revision rounds
