Professional Work / Fall 2015
Self-Service
Management Portal
Project Overview
BACKGROUND: ROAMmerchant is a 'Self-Service Management Portal'. Whether a small business owner, restaurant franchisee or direct selling consultant, ROAMmerchant enables users to easily manage their business from one centralized location. ROAMmerchant is an easy-to-use portal that provides merchants with the ability to board sub-merchants, customize receipts, issue refunds, export and analyze transaction data, and more. ROAMmerchant gives users the flexibility, visibility, and control they need to successfully run their day-to-day business.
CHALLENGE: ROAMmerchant needs a makeover. Going beyond just a simple facelift, Ingenico wants to create a more nuanced, robust platform with new features based on user and business goals. The new ROAMmerchant needs to be feature-rich, intuitive, configurable, and easy to use.
GOAL: The new ROAMmerchant should meet the following criteria:
- ROAMmerchant must be redesigned to be more on-brand and fit within Ingenico’s new branding guidelines.
- The portal should be updated with modern UX practices to create a faster, more efficient purpose-driven experience.
- There is a new business need for a customizable (white-label) platform. ROAMmerchant must include key elements that can be white-labeled. The white-labeling process should be designed in a way that can easily be communicated to customers.
Users
OVERVIEW: User data for this project was collected through qualitative channels. I used a Lean UX process based on assumptions and understandings about our past and current users, and created ‘problem statements’ to solve. Customer feature requests were also tracked directly through project managers who would relay that information to me. Business and user requirements were put together by key stakeholders, such as project managers and support, and communicated to me to introduce into the design process Furthermore, I analyzed our customer database to gauge the type and size of our customer base to inform the design and create user goals. Some quantitative user data was collected through metrics (Crashlytics) captured from our previous platform.
User Persona: Anthony, 33
USER RESEARCH: To redesign ROAMmerchant, I was able to use metrics collected from our platform to inform the design experience. I was able to collect and analyze behaviours such as average time on a page, exit percentage, unique pageviews, events triggered, search terms, etc. I was also able to gauge which key features within ROAMmerchant our users were using the most.
USER PERSONA: Unique user personas were created by a combination of the aforementioned user data and research. For Ingenico’s ROAMmerchant, the user persona used was our target user, the ideal customer. Using this user persona to tell the story helps us build the right experience for the right customers.
Industry: Home Improvement Retailer
Employer: Home Depot
Title: Sales Clerk
Wants:
- Reduce administrative work, manual data entries, and time-consuming reconciliations.
- Reduce time in-store associates spend supporting contractors.
- Enable installers to easily enter additional in-home services on the spot with customers.
Motivations:
- Customer Satisfaction
- Saving time
- Increased upsell opportunities for new customer projects
Frustrations:
- Long, complex checkout process.
- Tedious, redundant input fields during checkout.
- Inefficient UI layout.
- Having to take more steps than necessary to make a sale.
- Threats to customer satisfaction.
Ideation and Prototyping
With an understanding now of our users, I designed ROAMmerchant to be goal-focused. I used the standard UI/UX processes from brainstorming, wireframing, user flows, low-fi concepts, and more. The first step was wireframing for our merchant persona. My wireframes spanned multiple pages and sections with various informational layouts, architecture, and conceptual features. ROAMmerchant is large, complex, and surprisingly robust. My goal was to minimize the clutter while still maintaining an intuitive, straightforward, and easy experience end to end.
The following wireframes highlight just a few of the many wireframe iterations I created during this step. All said and done, I reached a design and story consensus based on everything I learned from our users. I made sure to involve key stakeholders to find a consensus on the final design.
Low-fi wireframe of a 'cloud catalog' concept we wanted to introduce as a new feature.
Low-fi wireframe showing the editing of an item in a 'cloud catalog' feature. This example also shows potential white-label options for a customer.
Early wireframes with various concepts and use cases of the 'Recent Activity' section.
Visual Design
The following images display the range of visual designs and experiences during the design of ROAMmerchant. Some images are current, some are concepts, and some are images of works that were still in progress.
The UI aims to be simple, elegant, and welcoming. It was designed as a responsive web app which meets the user and business goals defined above such as our white-label initiative. The overall goal was a faster, more efficient purpose-driven ROAMmerchant.
Old
New
A brief video preview of the ROAMmerchant platform.
Recent Activity. One of the most popular features for our users. From here, the user can find, filter, and take action on all transactions on their account.
Sub-Merchants. From here the user can easily add or manage multiple sub-merchants.
Edit Billing Information under My Account.
One important design goal was to maintain consistency and clarity across the platform. This meant designing UI modals and patterns such as pagination, text styles, pop-ups, input fields, navigational elements, buttons, icon, etc. Balancing the design meant making it fit within Ingenico Groups branding guidelines and designing components that can eventually be custom-branded (white-labeled) for our clients.
The login screen. The primary brand logo, background image, and secondary logo are examples of parts of the ROAMmerchant platform that can be white-labeled.
The Advanced Search modal. This is one way to customize advanced search filters to find exactly what want.
Another Advanced Search modal concept.
The Virtual Terminal. User metrics showed that merchants spend a majority of time on this feature. The Virtual Terminal provides users with a web-based interface to accept card and cash payments right from ROAMmerchant.
Transaction history with a transaction selection in an expanded view.
From here, the user can edit and easily customize their receipt settings.
An example of a line graph report based on your transaction history.
Further concepts of graph reports based on daily revenue or daily transactions.
Implementation and Branding
The following images are early examples of detailed specifications and callouts regarding the UI/UX elements within the design. The style details presented here eventually became an internal style guide that included documentation for developers to implement new design components in an efficient and more streamlined way. At the time, it was important to communicate the importance of consistency and pixel-perfect designs and patterns within ROAMmerchant.
Very prototype specification of colors, spacing, and various other branding elements.
Example of speccing touch states, colors, and UI elements.
More callouts.
One important design goal was to maintain consistency and clarity across the platform. This meant designing UI modals and patterns such as pagination, text styles, pop-ups, input fields, navigational elements, buttons, icon, etc. Balancing the design meant making it fit within Ingenico Groups branding guidelines and designing components that can eventually be custom-branded (white-labeled) for our clients.
The Virtual Terminal. User metrics showed that merchants spend a majority of time on this feature. The Virtual Terminal provides users with a web-based interface to accept card and cash payments right from ROAMmerchant.
Defined earlier, one of the major goals in the ROAMmerchant design process was creating a brand-new white-label process. I wanted to ensure an efficient, easy-to-use way for clients to be able to customize the portal using their own brand assets. This meant creating and documenting a way that could be communicated easily between our clients and our own product, design, and engineering teams.
I designed ROAMmerchant to include certain images and colors that could be easily labeled and swapped depending on the needs of our customers. Having white-label customization was a key aspect of our product from a business perspective. The following images showcase examples of a white-labeled ROAMmerchant platform.
Presented is one example of a white-labeled ROAMmerchant solution. Customizable components include primary and secondary colors for buttons and backgrounds elements, background images and headers, and primary and secondary logos,.
Another example of a custom white-labeled ROAMmerchant solution.
Summary
In summary, the new ROAMmerchant was an overall success for Ingenico that was able to meet its defined business and user goals. It was successfully implemented and launched and is now used by countless small and large business to easily manage their business from one easy-to-use centralized location.
👍🏻