With the time constraints we had (45 days) to push out version 1.0, the principles of Lean UX provided us the framework to efficiently build a functional, comprehensive product. Version 1.0 provided a strong foundation for us to learn about our user's behavior. This allowed us to start the learning and implementation cycle so we could build a human-centered product.
We made it a point to come up with our own thoughts and ideas regarding the layout of the website before looking at what existing competitors have done. This way we could immediately dispell any biases we had. Then analyzing what the other guys were doing allowed us to come up with a better pros and cons list.
The journey map serves as a reference point to view all of the site's potential touchpoints/painpoints.
As a new service in Hong Kong, product education and pricing must be clear, concise and accessible throughout the user's journey. This site flow allowed us to make sure all information is disseminated in a clear and efficient manner.
Key experimenting period with valuable feedback from stakeholders to start the design process
The final stage of user testing. Here we undergo further analysis before turning it over to our developers. In our first iteration, I designed in Sketch and uploaded the screens to Flinto to create near pixel-perfect version of the responsive interface. Most recently I've been using Webflow as my program of choice to create responsive prototypes.
After our initial growth started to plateau, we looked at our analytics and heard what our users had to say about the UX. As a result, in order to boost conversion, we needed to revamp the checkout process to create a more simple, streamlined experience.
As we started to realize our goal of being Hong Kong's biggest name in valet storage, Phase 2 was to expand the brand by setting it's sights on the leakage of potential clients who are interested in traditional self-storage.
Adding Lockers to an already new concept
To avoid disrupting the flow of our successful door-to-door storage business, Self-Storage Lockers were added as number 3 on the list of our product offerings. When the Locker business started to gain momentum and with a need to expand the business by adding more stores, we moved the Lockers to number 1 on the list of offerings in our What We Do and Pricing section.
In order to put Lockers on even footing with our Door-to-Door services, we needed to iron out a few glaring issues:
- Too much for customer to digest. With numerous products and different pricing structures, there's a a lot of information to comb through on the homepage. Our service is still a new concept to most people. It's of utmost importance to keep information clear and simple.
- Cannot accurately track analytics with everything being on one page.
- Boxful is synonymous with door-to-door. We need to make clear that we are also an innovative player in the self-storage space as well.
Restructuring the User Flow
From 3 services to 2. Instead of differentiating pricing structure, now the user must choose between modes of service.
Self-Storage stays as it's own product. By-Item and By-Square-Feet become classified as Door-to-Door.
Locations of Boxful Stores, brief use cases of each product and "as low as" prices to entice customers to go to next level of the funnel.
With an eye on taking Self-Service Lockers to the next level, the goal is to improve engagement by using the homepage to promote the merits of our services. Detailed pricing and information were moved further down the funnel.
Comparison of the old (left) and updated (right) homepage wireframes.
Simplifying the homepage and promoting the services. Pushing detailed pricing information and product list to next stage of funnel. The What We Do section becomes more detailed and includes basic pricing.
Interactive Hero Area. Immediate impact of the site was lacking. In Locker 1.0, we employed a carousel with static hero images. This method lacked a cohesive message that didn't effectively showcase our self-storage option. A new dynamic offering allowed for self-storage to be on equal footing with Boxful's signature door-to-door service.
We felt there was no other way but to use two images to portray the two main services we wanted to promote. The hover effect provides a graceful way to turn two images into one composition, allowing the viewer to focus on one service at a time. The color filter applied to each image helps promote the idea of the two opposing services.
Split Screen Design with Hover Interactions (Webflow prototype)
Whether its demonstrating a user flow in wireframes to stakeholders or creating pixel perfect interactions in exact timing for frontend developers, Webflow has proven to a valuable tool in the prototyping process.
Back when there were only two door-to-door products, the products were easy to compare and contrast. Book an appointment, Boxful will pick up your stuff and then store it our warehouse. The customer journey was nearly identical. Now that self-storage is also among our services, it's important that we provide much more information while not to confuse or overwhelm the user.
Updated user flow demonstrating how we've adjusted the funnel to better educate the user
Analytics. This new second tier is where pricing and all other information is conveyed in order to turn a browser in to a buyer. In addition to spreading information across different tiers to lighten the users' cognitive load, these tiers allow for strengths and bounce rates to be analyzed.
In Checkout 2.0, a multi-stepped process was utilized for the benefit of analytics in the endgame. When a brand believes in its product, the goal is to get the user to the checkout. Mining data leading up to that point is essential.
