MOSST Reader:mPOS companion app

Role Lead UX Designer Location Kyiv, Ukraine (remote) Link mosst.com/reader 2017

Ukraine based FinTech start-up MOSST initiated nationwide mPOS deployment to thousands of merchants throughout Ukraine with a new product: MOSST Reader.

It allows merchants to accept credit cards in-store and on the go with innovative mPOS reader, and at the same time provides mobile merchant acquiring and a simple cash register via mobile apps.

I was invited by MOSST to lead iOS & Android app design development, thanks to my previous experience with fintech & banking apps.

MOSST Reader App: Pay with card & Order

My role

Research

I conducted few workshops with Product Manager and Art Director to learn customer insights and analyze current app solutions. All these collectibles were converted into documented customer goals and balanced business goals.

Prototyping & Design

Later, I consolidated research insights and various ideas into application map, user flows & quick prototypes for internal use.

Then, I created UI design based mainly on native OS guidelines and animation for important parts of connection flow, payment flow & onboarding to improve affordance & perception of parts that might be confusing for non-techies. Closer to launch, I participated in the design development of branding & marketing materials, including mPOS reader package, stickers, app website etc.

MOSST Reader: Signature screen

Customers

To better understand the customer I focused on understanding their needs. By collecting initial feedback on the idea and analyzing global patterns I found that our mobile audience is a primarily non-techies, but open to technologies and valuing time-saving tech.

These insights & hypotheses were translated into screens & flows, being preliminary validated from the side of ‘general’ audience representative.

People who are not into mobile apps & tech are going mad about increasing their sales up to 30-40% with a simple app.

Information Architecture

During the first UI design iteration, one of the involved engineers asked me to explain where certain actions led. 
After the first presentation to the dev team, I put more effort into static mocks than I normally would when I could walk up to each engineer and discuss things on the spot. While all the team is remote, transparent and foolproof communication is really valuable.

Taking the time to make an application map at this stage was essential. This approach turned out to be a great way to see which parts of the product needed attention or which are ready for development phase. All additional states, user flows & actions were described later in form of feature tasks.

 

MOSST Reader Application Map

Visual Design

In the result, I created detailed interactions & design specification which were approved by the Product Owner & Development Team Lead and turned into polished visual mockups.

I intended to stick to the Material Design guidelines & Apple Human Interface Guidelines to bring a predictable experience & snappy performance for the customer. In order to see how these guidelines are currently being interpreted by the Google Design team, I tested a wide selection of Google apps.

MOSST Reader Application UI

The result

This is the first version of MOSST Reader that's about to launch live. In March 2018 an app started rolling out to users and getting more feedback.

This case will be updated soon, with more updates on visual design and animation.

My biggest takeaway was that having team and customers be involved and giving insights during all phases of the design process is worthless while designing features.