An Experience on Poynt
redesign, new feature design, mobile
I redesigned a Poynt (POS device) e-commerce app for small business owners. After an initial update of the interface to meet the device's style guide accessibility standards, I conducted rounds of A/B testing to design a new feature for product catalog management that would accommodate Poynt's tech limitations.
Role
Researcher, Designer
Tools
Sketch, Usertesting.com
Platform
Mobile (Poynt)
The Issue
The app's redesign wasn't simply a matter of changing aspect ratios and color schemes. The Android product creation process involves taking a picture of the item in order to display it in the catalog, but Poynt doesn't have a camera, nor the ability to store photos internally. I needed to create an equally satisfying experience for Poynt users while keeping the design compatible with the Android version since the systems connect to the same database. Since we had very little user data, the situation was perfect for a research and user testing-oriented approach.
Why Don't We Just Ask the People?
Rather than making any assumptions about what merchants prefer, I drafted a branching series of A/B tests. The two fundamental options were:
-
A fully in-app process
-
A process that connects to an external site and returns to the app.
I mocked up a basic option from each category and scheduled some remote tests.
Test A: Multi-device. Testers would first create a product on Poynt, seeing the product without an image in their catalog. Then they would follow the instructions to log onto the website to add a picture in the product catalog. Finally, the image would show in their catalog on Poynt.
Test B: Single-device. Testers would create a product as on the Android app. When they add an image, they can choose from an icon gallery.
As expected, not a single user liked the multi-device option, and most testers were confused and unable to complete the task. I understood then that I would need to create a complete in-app solution for Poynt. The comments during the first test gave clues as to user preferences - most testers were dissatisfied with the icon options because they didn't offer enough specificity. Several said that it would be better to have no image at all than a disappointing icon. In order for merchants to feel empowered, the image aspect of the catalog needs to offer a sufficient level of customization.
That conclusion, coupled with the understanding that images are highly valued in retail, led me to eliminate a few of the options in the original testing plan: default tag icons for all images, arbitrary color block generation, and item abbreviation as image placeholder.
After discussing these results with the team, I presented the two remaining options: an icon set or a color block set. We determined that at that moment we wouldn't be able to offer an icon set with the level of specificity needed to satisfy customers, so I moved forward with the color block option.
Refining the Concept
Working with the principle of customization, I initially designed a system that allowed merchants to determine how they wanted to use the color blocks, either in a random fashion, on an individual item basis, or by creating categories.
With an icon color editor, business owners have a wide range of colors to differentiate products or create categories at any granularity.
Based on the wide range of opinions during the user tests, I felt that the best way to satisfy users would be to provide a system that allows them to assign meaning and create a personally significant organization. After getting some constructive criticism, however, I realized that although flexibility was appealing, my design was a compromise of two distinct ideas (item images vs categories) that should be individually developed.
I briefly explored this avenue by designing the two ideas as fully distinct aspects of the system. The color palette would still replace product photos, but another section of the product creation page would feature color tags for organizing categories.
Icon color palette for product image, color dots for categories
The team liked this idea as well, but unfortunately, with an impending release, there simply wasn't time to develop a new category feature. I decided to design a limited color palette option that would allow merchants to decide whether those colors would indicate categories or simply be used to differentiate individual items.
Wrap it up and Review
The final design - a limited color palette for categories or individual items.
The default product image reverted to the initial tag icon in order to match the app on Android. Clearly these final designs don't offer the customization I'd hoped for, but the color selection is still broad enough to be meaningful. Thinking back on my user research, the system will be satisfying to use as long as merchants have the ability to apply their own organization principles in the catalog.
In its ultimate form, with more development time and database changes, the catalog would use initials for the default icon rather than a tag image. Poynt-created products could then display initials over assigned color blocks. That would help reduce the visual inconsistency between items with photos and those without, should the merchant actually upload photos for some products.
A glance into the future