Small merchants, big features?

SPOTON

PRODUCT DESIGN

SpotOn is a company committed to providing a range of business solutions targeted towards small business owners. When I joined the company as a product designer, SpotOn was transitioning on two levels. The first, an overall brand refresh away from an older, dated look into something more minimal and modern. Secondly, transitioning away from being pigeonholed as strictly a marketing and loyalty management platform into a company that also provides payment processing, scheduling, POS hardware, and other vertical solutions as the company continues to expand.

Although merchants currently have access to a range of different business tools, there is a lot of opportunity in the space for a company that can provide an entire suite of business features in one easy-to-use ecosystem.

The SpotOn ecosystem involves a large range of product offerings:

1) Web platform for both financial data reporting and customer engagement tools
2) Mobile consumer app for individuals who want to find new merchants, read aggregated reviews, earn loyalty rewards, and receive deals
3) Tablet app for merchants who want to check-in their customers and promote specials
4) A POS-integrated solution tracking financial data and customer retention
5) Handheld POS running on Android
6) A vertical specifically for retail Salon management
7) Mobile terminal app to process payment transactions
8) and many others

To design effectively, it was absolutely necessary to not only be comfortable designing for any screen size, but to also keep in mind its relation to other screen sizes and platforms when designing any one product.

MOBILE APPS

Next I was in charge of revamping our Android Rewards app, a consumer-focused app that helped users find nearby SpotOn merchants who may have deals or rewards available to them.

The senior product designer had started work on designs for a re-skin of the existing app to match the new branding, which had been begun implementation in the iOS app, but due to resources, it was decided the Android update would wait until the new features were included.

Working directly with both Android and back-end developers to bring the designs to fruition, we had a lot of considerations and hiccups to deal with while adding functionality onto an existing database system. After utilizing an open API to help categorize our businesses more effectively, and bringing in design patterns similar to other apps, we were able to meet expectations for how we thought the experience should feel while still adhering to our projected schedule.

Simultaneously, we also realized that some aspects of the app would necessitate launching in tandem with features we would have to invent on our other products, such as giving SpotOn merchants a place to upload featured images for their listing that would be displayed on the consumer app. Other features would have to be designed now, and implemented later in stages.

One such feature that was designed for later implementation is an updated login flow. While doing a competitive analysis on other apps in other verticals we were interested in, I realized that certain features we would want to add in would necessitate a higher level of security. Our current login method involved the user clicking on either a push notification or an email link that would then log them automatically into the app. I had to devise a login flow that would separate out new users, returning users, and existing users that were in our database but needed to create a password for their account.

After deciding whether to try the app in guest mode or login/signup, users would enter the email address related to their account. The backend would determine whether they were:

1) a returning user with a valid password,
2) a new user who needed to create a password to complete signup, or
3) a legacy user who needed to add a password to their account.

At this point in the project, I was tasked with taking the designs and flows from the Android version, and updating designs for the iOS version. I created the designs to be consistent with iOS design principles, and worked alongside the iOS team to make sure screens were implemented to be as congruent as possible to the Android version.

While this project was in progress, feedback from our merchant users indicated that they really enjoyed the mobile experience of our dashboard site, but wished it could be in an app and not on a website. As a stop-gap measure to give us time to work on a fully native version, we concepted a native app that would be a webview of the dashboard, but with a native menu and features including a quick way for Merchants to add customers directly to their marketing database. 

POYNT

Billed as “The World’s First Smart Terminal,” Poynt is a handheld Point-Of-Sale device with one consumer facing screen, one merchant facing screen, card reader and integrated printer, all running on Android. We built a native app on this device to integrate our marketing, loyalty, and payment features into a handheld solution for small businesses. I was able to create screens to handle features and cases that were missing from the initial version of our Poynt app, including flows for adding a global tax rate for transactions, verifying a customer’s account telephone, and many others.

SETTINGS

The settings page for our web platform was failing on two levels - first, it still existed with the outdated styling adjacent to revamped pages on the same platform, and secondly, many new features working in tandem with our new project were without a home. For my first web project for SpotOn, I was tasked with tackling these issues and increasing the overall usability of the site. This was juggled alongside the features in the consumer app that would launch in tandem.

The previous settings page existing within the totally rebranded site. In addition to the colors, users indicated that the confusing functionality provided a generally awkward experience.

Previous components lacked affordance, hiding key functionality that caused Merchants to call support consistently due to confusion. Permission settings were hidden in a drop down that Users would only be able to find by clicking on the panel accidentally.

I made all of the known users, and options available to each, glancible and accessible, reducing the number of steps it took to complete an edit to a user’s permissions or send them a password reset email. I also was aware that merchants were reporting issues with controlling both the frequency of dashboard emails, and which individuals in the organization received them, so I integrated a solution for that into each user card.

While working on other products, I noticed that we were having an increasing number of places for merchants to upload photos across our product suite. Profile photos were set on the profile settings page, images for the background on our check-in tablet were done on the tablet itself, images used for the mobile app listing were uploaded on a stop-gap page while settings was redesigned, etc. This provided both a poor experience as photos could not be utilized in two separate locations without being uploaded separately to those locations. This also had implications for our server space, considering thousands of merchants would have to upload the same photo to separate locations. To tackle this, I created a centralized image manager as part of settings, which utilized a shared library that merchants could utilize to set each photo. 

Our previous version of settings was not mobile-friendly, and the feature was hidden on certain devices. This was a major pain point for our user base, and one of the most requested features we needed to address. I made sure to account for all responsive views of the settings page, across all of our possible user scenarios, to make sure we were living up to best practices for usability. 

Users who were using the platform for the first time were funneled to a page which allowed them to set up the most basic default settings to get started with. Since I designed all of the components in settings as individual cards, it was easy to quickly repurpose them for use on the default settings page.

PRINT / MARKETING

Simultaneously during this time, I was also tasked with developing much of our marketing collateral. This included the majority of our print work, where I tried to develop a consistent feel (including developing the company print styleguide which was later utilized by freelancers), emails to consumers to merchants, and web images and banners. Since I was able to have a hand in multiple touchpoints, it made it easier to maintain the style hand-in-hand with the rest of our products. 

copyright 2018.

put that giraffe on stilts.