Natalja Sapoznikova
UX/UI Product Designer
Made with

Encompass

Merchants' Management System within Ocean Reef Membership Club

General Information

Ocean Reef Club is a private membership club located in Key Largo, Florida. This place is located on 2,500 tropical acres bordered by three sides of water. Club provides various services like hotel, yacht rent, restaurants, golf club, spa, etc. Club was opened in 1955.

Dashboard can provide visibility across all club data and activities.

Dashboard can provide visibility across all club data and activities.

About the whole Project

In the beginning Membership Club had all the management systems separated from each other. Everything was developed in isolation, for example hotel management system wasn't connected with membership system or merchants wasn't connected with club finances. After some time company decided to invest into creation of one system, which should unify all the systems in Reef Club called Encompass.

All employees of the club waste a big amount of time to switch between different systems and entering a lot of data multiple times. Also customers of the club not satisfied with club service. It was very important to create one unified system where every user can access to his dashboard and get visibility across all club data and activities.

Merchant Management system is one of the small parts of this big unified system, which was built during 4 years.

Our Team

I worked on this project in Latvian Software Outsourcing Company - Diatom Enterprises as UX/UI Designer. And they got client from United States where I needed to work closely with American team.

From Latvian Team I worked with 5 Developers and 1 team Leader and me 1 UX/UI Designer.

From US Team I worked remotely with 1 Product Manager, 1 Product Designer, IT Director of the Club and 1 Art Designer.

My Role was to communicate with client about design requirements for different system features and build personas, workflows, wireframes and high-fidelity designs. I also was responsible to communicate my designs with development team and describe all the workflows.

Duration: I worked on this project as full-time UX/UI Designer during two years.

Tools: Adobe Photoshop, InVision.

Our multicultural team in US Office in Key Largo, Florida. 

Our multicultural team in US Office in Key Largo, Florida. 

Our Latvian Team travelled to Key Largo, Florida to work onsite with the team and get to know them better. As you see from photo on the left, our frond-end developer, team leader and me UX/UI designer travelled in US to work closer with American team and learn more about their Club Life and Processes.

Starting Research for building Merchants' Management System

Interview

For collecting requirements and getting information about users I arranged interview with IT Director and Product Manager of the club. They have 10 years of work experience in the club and know their users very well, because they were able to answer on all my questions.


My goals of conducting interview was:

- getting general information about existing merchant management system in the club and how it works.

- learning more about potentials users of the app and finding out their pain points.

- learning about most important features, which app should have.

- defining possible user scenarios and user flows of what users will be doing with the app.


I managed to get the following thoughts and insights from conducted interview:

- 70% of users will be older than 60 years old.

- it's important to make very simple and user-friendly workflow for people older than 60 years old.

- app will be used by big amount of people from very rich to middle class, so it was important to satisfy everyone's preferences.

- existing merchant system not providing necessary experience for merchants and for Ocean Reef Club. It's not allowing merchants track their profit directly from the club, data about merchant's activities not populated automatically in club system.

- all the clients of the club have their member/guest card which is attached to their credit card. So, clients with the card will be paying in merchants shops. Merchant can swipe the card or type member/guest number to get payment for the purchase.

Competitor's research

I think it's important before doing any designs explore competitors and how they manage to do the same things. So I started to search similar merchant payment apps and explore how they do different features. Most of my research was focused on iPad and iPhone apps.

For my research I picked main features which any merchant payment app should have:

- entering information about the order amount.

- entering details about purchase.

- getting total amount of money for payment.

- the whole flow of payment process.

- getting receipt.


So, I explored different competitors and analysed, what worked well and what didn't.

- most of the competitors adding list of goods which they sell in their shops. They are showing items by categories like shoes, gifts, men, women, etc. This is great approach for big shops, who have big amount of goods to sell. I proposed this solution to client and he mentioned that almost all merchants in the club has small shops with not big amount of goods, and was decided not to go this route and make without categories. 

- when user login into the app, it was very helpful to see some dashboard with information about last activities in the shop, like total amount of sales, last transactions, etc. Some apps, which I explored had this feature and I think this can be very useful for merchants.

- Before client signing and confirming the purchase, it's very helpful to show total amount of money and his name in clear way with big font and very important to stand out this information. Most of the apps from my research did this but some of them not, and it was so not user-friendly.

Organising Research

Goals of the app:

After research were defined main goals of the app:

1) Track profit of every Merchant and provide information about commission for Ocean Reef Club.

2) Provide excellent user experience and satisfaction to rich clients of the club.

3) Track best clients who spent the biggest amount of money within the club and give them discounts and complimentary gifts.

4) For Merchants track their employees and help them improve their work.

Process

Merchant Management System will be containing two parts:

1) First Part is building design for iPad Merchant Payment App - front part of the app which will be used by clients and merchants of the Ocean Reef Club.

2) Second Part contains Merchant Management where responsible person from the club can add new merchants and make necessary settings for them.

Merchants rent property on territory of Ocean Reef Club and sell their goods to clients of the club. On territory is located about 26 Merchants, who sells different goods like clothes, souvenirs, sweets, food, wine, etc.

Encompass

Personas

Based on information which I got from interview, I defined 4 main personas. 

1) Client of the club.

2) Merchant (owner of the shop).

3) Employee of the Merchant.

4) Employee of the Ocean Reef Club.

PART 1 - iPad App

User Journey

I started to think about users and how they will be interacting with the app. I created map with possible user steps. It was very helpful for the whole team to understand initial idea of the app and how it will be working.

- the most important feature was for merchants to make process of member/guest verification as easy as possible.

- during the member/guest verification get clear information about which member is active and can pay for goods, and which member is inactive and can not buy any things on territory of the club.

- for merchants make clear process of selection transaction type charge or refund.

- give clients of the club all the information about their purchase like total amount for payment, their name, type of transaction, etc.

Encompass

Wireframing/Design

I created first version of very simple design to demonstrate client my thinking about the workflow and the whole payment process. Client approved this version but asked for second design version and mentioned to be more creative and create something more entertaining for the users.

Encompass

More Research

I started to do more research which includes more competitors research, getting inspiration from other products, researching similar features in the world, how they work and how behave, exploring UI trends, different UI/UX patterns, started to think about possible layouts and options to provide exact user experience, trying to think about different solutions. Discussing ideas with the team, creating moodboard.

Encompass

Cashier's Dashboard

Based on my research I came up with more creative version of Merchant iPad App. 

New Dashboard Design got the following features:

- Viewing total amount of transactions, as well as total charges and refunds.

- Possibility for viewing recent transactions

- Filter transaction by date.

- Search Member by Number or Swipe Member Card.

Encompass

Manager's Dashboard

After conducted interview with Merchants, I created Manager's Dashboard. For Managers was important to view more data about their clients and employees. 

I included in my design:

- Information about Best Clients, where Manager can view total amount of money which every client spent in their shop. Based on this data Merchants can give clients discounts and complimentary gifts.

- Information about Best Employees of the day/week/month. Merchants can reward best employees of their shop.

Payment Process

Based on my research and creating personas I came up to the conclusion that most of the clients of the club are old rich people, they don’t like long process and they are not very familiar with technologies. They need very simple and straightforward payment process without any complexity.

Encompass
PART 2 - Administrative
Merchant Lookup

Merchant Lookup

Merchants Lookup

Administrative part was pretty straightforward for employees of the Reef Club to monitoring and editing information about every merchant on Club territory.

Encompass

Merchant Information

Detailed information about every merchant contains merchant settings, necessary documents and contracts, employees, contact information, address, etc.

Encompass

List of Transactions

Third tab contains list of all transactions, which was made by one merchant.

What I learnt

- I learnt that communication is the key to everything in any project. In this project it was very critical to discuss ideas with client, ask users right questions and do also discussions with development team. Synchronize all this in one final design was challenging because people had different opinions and find one right solution to some problem was interesting task.

- I also learnt that the whole success of the project depend on research and discovery phases. How much effort you put into this process and how detailed it was. 

- I learnt the whole new world about merchants, how they behave, how they think, what they do, how they manage their businesses. It was very useful project to understand how another businesses work from inside.