HubBox
(SaaS application - B2B & B2C), Start-up
Background
HubBox partners with global carriers, helping retailers effortlessly integrate local pickup choices into their checkout process. This benefits carriers, PUDO networks, locker banks, and retailers by boosting pickup solution growth and providing flexible options for customers. This approach also aligns with environmentally friendly eCommerce practices. Their carrier partners include UPS, DPD, and Collect+. Renowned retailers like Williams Sonoma, J.Crew, Charlotte Tilbury, Whistles, Selfridges and Phase Eight have chosen HubBox to enhance their services.
Tools used
Figma, ProtiPie, Miro, Analytics, LookBack & Usertesting.com
I’ve worked with?
Head of Product, Project Managers, Stakeholders, Developers
Design Team
I am the sole designer for this project, have completed the end-to-end design work
Time scale?
Worked for 4 weeks on multiple projects and followed the Agile process.
Project 1
Demo store
As a user interacting with the HubBox demo store, expect to have the capability to seamlessly observe the integration of HubBox within a simulated checkout setting. This encompasses the entire process of opting for a pickup choice, utilising the Widget for location search and selection, and finally, receiving clear confirmation of my chosen pickup point. The current demo store looks outdated and not getting the client’s attention so they asked me to create a new modern and sleek demo store.
Process i followed
Look into the current client journey (end-to-end).
Gathered pain points (Data-driven approach, User research sessions, and workshops with the marketing team).
Stakeholder meetings to understand business goals and product vision.
Creation of concepts and validation through user testing.
Stakeholder meetings to run through the concepts
Feedback and iterations.Sign-offs on features and functionality.
Create high-fidelity wireframes, rapid prototyping, and testing.
Presented the before and after results to the stakeholders for final sign-off, Handover to Dev
My design approach is based on the complexity of the problem, business goals, and technical constraints.
Pain points gathering/Understanding the problem
Inadequate Layout: The current layout of HubBox's Demo store lacks proper organization and structure. Users find it challenging to navigate and understand the flow of information, leading to confusion.
Outdated Appearance: The Demo store's design and visual elements appear dated, giving potential customers the impression that the product itself might also be outdated. This impacts the store's credibility and attractiveness to users.
Lack of Clear Product Demonstration: The existing platform does not effectively showcase how HubBox's product operates on clients' websites. This limitation prevents potential customers from fully comprehending the product's value and functionality.
Clients can’t see the customisation options : They are hidden and they have to go to a different page to see the options.
Cannot show the competitive research and data here because of a nondisclosure agreement (NDA) & Please remember it’s a 4-5 week project.
Key wireframes
Stakeholder meetings & ideas discussion
I have presented all the wireframes and design concepts to the stakeholders for their review and feedback. This collaborative approach allows us to ensure that the project aligns with their expectations and requirements, enabling us to make any necessary adjustments early in the development process. The input and insights from our stakeholders are invaluable in shaping the final product, and we greatly appreciate their active involvement in this important phase of the project.
High-fidelity wireframes ( Multi variant test & A/B test )
Version A
Variant A : This is the first version without a dropdown in the customization tab, but users have to scroll down to see all the filters.
Variant B : This is the second version with a dropdown in the customization tab, and users don't have to scroll down to see all the filters.
Result: When I conducted A/B testing with both variants, users expressed that they really didn't like dropdowns for all the filters. They mentioned that a maximum of two dropdowns is acceptable, and they prefer clicking on the filter options directly without having to use dropdowns.
I have identified another issue: the demo window is currently too small. Clients often view demos on Zoom calls or similar platforms, where the window size may be further reduced. Therefore, it would be beneficial to have a larger demo screen.
Version B
Variant A : This is the second version featuring a customization option at the top. This version includes dropdowns and maintains a full-width layout at all times, ensuring clients can clearly view the demo store.
Variant B : This is the second version, with a customization option on the top-left. It incorporates two dropdowns and selectable buttons, covering the screen. However, it doesn't cover the important sections on the demo store
Result: When I conducted A/B testing with both variants, users expressed that they really liked both versions. However, they mentioned that the simpler version works better. The marketing team prefers to showcase only the important integration part. As a result, I quickly iterated another version based on their feedback.
Final approved versions (Version C)
2 x Persona Segments including business users & marketing people
We asked people to find the customisation options and change the themes to see the different layouts.
Sessions included an introductory interview, task-based activities and rounding up/final thoughts
Wireframes were Desktop resolution and tested on Desktop devices.
Users were asked about their thoughts on both prototypes and how the experiences have shaped their perception of the Demo store and filters
User test result
Result
Stakeholders and Users are happy with the final version so it’s in the development phase
This new design will assist B2B users in quickly accessing customization options, such as understanding how the SaaS application/API integrates with their website and aligning with their branding. It streamlines the decision-making process, reducing the need for explanatory meetings on functionality, and facilitating quicker decisions.
Project 2
Adding a filter option to the application
When customers search for the nearest collection point, most applications currently only display the distance. However, HubBox aims to offer additional information to cater to vulnerable customers and everyone else. This includes details such as wheelchair accessibility, availability of parking spaces, locker types, and opening hours.
I followed the same design process as described above for this project as well. I began by gathering feedback, identifying challenges and edge cases, and then proceeded to create wireframes. Subsequently, I conducted multi-variant testing on some concepts to gather additional feedback and insights.
High-fed designs
Version 1
Implemented an intuitive filter solution by introducing a single 'Filter' button, neatly concealing all available options. This streamlined approach allows users to effortlessly filter locations based on criteria such as Opening Times, Location Type, Parking, and Wheelchair Access.
Eliminated the dropdown menu, enabling users to instantly view and select their preferred options for a more seamless experience.
Version B
After conducting user testing on two different variants, we received positive feedback for both options. Following thorough analysis of individual feedback from both users and stakeholders, we have chosen to proceed with Variant 1 as the preferred choice.
Result
Users have the ability to filter store results based on their preferences, enhancing their shopping experience.
Despite the Filter option not being highlighted, it remains in its standard position, ensuring easy access for users.
Retailers are satisfied with the added functionality, contributing to their contentment with the B2B solution.
Retailers can experiment with the demo store's layouts, themes, and typography, empowering them to better understand its functionality and tailor it to their needs.
The UI's mobile-first approach ensures a seamless experience across devices, including desktops.
Users can conveniently view store opening times and facilities in advance, improving their planning and decision-making process.
The user-centric UI is expected to lead to increased sales as it meets the needs and preferences of users effectively.
Expected customer interaction (Demo store)
40% sales increase
End-users / Usage in the UK 2024 Q2
3Million + (for Selfridges)
These improvements will be added to US & EU SaaS platform too