Amanda Visuals

Shippsy Case Study

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

UX/UI design.

Challenge

Redesign Shippsy dashboard, optimize mobile and desktop.

Time frame

6 weeks

Structure

User research, user centred design, collaboration, iteration, prototype & implementation support.

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

Please enable JavaScript in your browser to complete this form.