Creating a Custom Product Builder
To create a custom product builder for our client Crucial Trading, we took what we learned from working on the Rug Builder app and endeavoured to make something that was just as flexible and realistic, but tailored to a commercial audience.
What Is React & Why Do We Use It?
React is not just appropriate for crafting interactive interfaces that are straightforward to design and update; it’s also a powerful tool that can load different materials and colors in a dynamic, fluid manner.
That’s not to say that we didn’t have to work hard to get the results our client was looking for with this app. We went above and beyond to ensure that particular attention was paid to the way colors were displayed and adjusted within the interface. We plowed plenty of man hours into tweaking this as much as possible.
Crucial Trading was blown away by the realistic results that were achievable using React, which is also good at storing different selections in real time, allowing for seamless switching in real time. Hospitality Builder had to give users a pixel-perfect overview of what the final product would look like, so this level of realism was central to the success of its first version.
We’ve since put the app through user testing and come up with changes to complement and augment its original features. However, we are not resting on our laurels and will be looking to update the Hospitality Builder over the coming months, taking across elements that we are in the process of integrating into version 2.0 of the Rug Builder app.
UX Testing & Uncovering Obstacles
We put the Hospitality Builder through its paces, testing the user interface by exposing it to real people and seeing how well they responded to its features and functions. This helped us to identify a number of issues that needed to be ironed out through further design revisions and development.
For example, some users struggled because they had to move around the interface too much when choosing a different color and material options, slowing down the pace of the experience.
We learned that it would be helpful to provide users with a precise indication of how far along the building process they were at any time, showing the steps they had taken and the steps remaining until completion.
Another complication arose from the way that colors and designs were chosen, since highlighting a specific selection was not streamlined and there could be confusion over which part of the pattern or design this applied to.
The original email form used to sign up to access the Hospitality Builder left a lot to be desired, both in terms of layout and the types of data points that were being captured. We cleaned this up based on user feedback and included additional fields to help the client find out more about the kinds of people that are using the app.
Mobile and tablet performance in early builds of the app was not up to scratch, even if desktop devices were able to run it without issue. Optimisation for portable platforms is clearly important, so we had to go back and look at how we could overhaul the code to bring it up to speed on smartphones.
The final interface annoyance we identified through UX testing was the way in which the drawer displaying the color options was configured. It could obscure the desired swatch altogether, making it trickier for users to choose accurately and see what their design would look like.
Challenges & Changes
On a basic level, we found that after creating a first build of the app, the power of React was not being harnessed to its full potential. Our development team went back in and refactored the code to remedy this and ensure that the interface was as impactful and intuitive as possible.
The next challenge we needed to overcome was that of the user experience on mobile devices, as already mentioned. People accessing websites and applications from portable devices tend to be especially sensitive to flaws in the user experience, so we needed to ensure that the UX was engaging and effective across all platforms.
One of the main adjustments we made was to the way that the swatches were displayed. We appreciated the importance of keeping them clearly in view, irrespective of the device that is being used to run the Hospitality Builder.
We solved this issue by repositioning the selection draw, moving it to the side of the screen rather than orienting it along the top. As such the swatch and the selection drawer remain onscreen and in view of the user throughout the customization process. This means that there is no need to open or collapse different drawers or menus while using the app.
Summary Screen Tweaks & Shareability
After compiling the desired design, users are taken to the summary screen which lets them review the decisions they’ve made and shared their creations with colleagues. They are given the option to print out a copy or email it to their contacts.
Shareability is clearly relevant in the context of the Hospitality Builder app, so we added extra email functionality. Users can now CC and BCC their associates into the email they send from the summary screen, which is an excellent feature for Crucial Trading’s retail partners to leverage. It makes it possible to collaborate on designs and keep everyone who is involved in the decision-making process up to date with the latest details.
The first idea was to use arrows as the focus of the interface to help highlight the elements of each design that are being adapted. However, it quickly became obvious that this approach would lead to the screen looking cluttered and confusing.
After a re-think, we realized that it would be more appropriate to pick a grid layout. Providing a PDF to convey the details of the custom material that has been designed by users also makes it easier to share with others.
We are still in the process of putting the UX through its paces and optimising the design of the app to capitalize on the initial feedback and take positive steps going forward. We are very pleased with the results so far but appreciate how vital it is to be flexible and willing to change aspects that simply aren’t working.
User Statistics & Conclusions
With the revised version of the Hospitality Builder app, we found that bounce rates were lower and users were spending longer using the app to customize their creations and combine colors than they had with the original iteration.
95% of users who tried out the updated interface said they preferred the fact that the drawer had been moved to the side of the screen. This shows that we made the correct decisions when optimising after the initial feedback session.
Ultimately we have learned that it is necessary to be flexible and adaptable when it comes to UX design. There are always improvements to be made, new innovations to pursue and new ideas to test drive. The first version of the Hospitality Builder app performed admirably, but we are even more excited to see that the second version is generating more buzz from users.