Brent Otterlei Designs

Verifone

Role: Manager of UX / UX Design Lead

Background

I was brought into Verifone to help lead the charge for design in the newly created Commerce Platform team and help change the product and overall organizations mindset when it comes to what it takes to create great industry leading design solutions.

The challenge for me was how to bring my experience in the payments software solutions space to a company that has never done anything like this before. They have legacy processes, long waterfall developement cycles, people who are not comfortable with change, and people that down right will not change.

My plan was to get everyone (upper management, product, engineering, QA, etc.) involved in the creative process so everyone had visibility into what we are doing and let them know that they are also apart of this process and can contribute. I find that this is the easiest way to get everyone on the side of design and gives everyone a sense of ownership in what we are doing.

We made a lot of progress and created a lot of great work in the year and a half I was there that is now rolling out to a couple of the biggist issuers on the planet.

We created the design direction for the Verifone Commerce Platform. I championed the use of the atomic methodology for documenting our work and getting it implemented to spec by our front-end engineering teams. I championed the use of new tools like Sketch and inVision to make us more productive. I helped design the Carbon POS android system and apps, the terminal apps, web portals for issuers, merchants, developers and support representitives and helped establish a true agile working environment.

Carbon 10

This is a mock up of the Estate Owner Portal I worked on.

Process

Inspiration

When I joined Verifone there was no design culture. No one understood the importance of design and the current team spent most of their time solving design problems in an ad hoc manner. I knew this coming in and I was determined to change that. I began running design workshops where I got product, engineering and whoever else wanted to join in a room to talk about design. I also started putting our work up on the walls around my desk so that everyone walking by would see what the design team was up to. Almost right away the traffic past my desk increased. Even Sr. VPs would stop and strike up conversations and ask me what we are working on.

UX strategy and Persona boards I created in inVision for use in our design workshops.

Verifone inspiration
Verifone inspiration
Verifone inspiration
Verifone inspiration
Verifone inspiration
Verifone inspiration

These are some pictures of my notebook, brainstorming sessions and pictures of the Carbon prototype device used to design the OS.

Ideation

Once we got the org on our side with design process we built out our UX strategy and moved to the ideation phase and began creating mock-ups, concepts and started to develop our visual design direction.

This is also when we started building our UI pattern library based on the atomic methodology.

Carbon

Title page for the atomic pattern library for the commerce platform.

Carbon

Single sign on organism from our atomic pattern library.

App store

Wireframe detail from the Carbon app store.

Carbon 10 Activation flow

Artboard view of the full Carbon 10 device activation flow.

Implementation

Once our design direction and UI Pattern library started taking shape, we began to apply these styles and interaction patterns into our wireframes createing hi-fi mocks and simple video walkthroughs to help explain to the engineering team how we want everything to work.

Carbon 10 activation flow happy path.

Verifone app store
Verifone app store detail

Final mock-ups of the Verifone Carbon App Store. These were still in development when I left.

Logout