Point of Sale

Amaro is a DTC(direct-to-customer) fashion business based in Brazil who uses the power of data as its main engine to offer fashion to women nationwide online and at its physical locations, such as guide shops or stores. Their main differentiator is the ability to use data collected from customers in innovative ways to provide unique experiences and deliver orders in a fast manner - at times, in less than an hour in the city of Sao Paulo, which is incredible by the way.

I was given the challenge to design a Point of Sale experience for associates working at their guide shops. The objective was to make it easier for these team membes to search for products, use payment methods, cross-product recommendation, costumer and product info all through POS app. 

guideshoop

An Amaro Guide Shop | Amaro.com

Mission

In order to create an experience that was true to their brand and business model, I decided to explore the company's mission in detail so I could start breaking down the most important parts of it and extract core words or ideas that better represented it in its fullness. This exercise served as a guide to create the Point of Sale app. Therefore, I concluded the app had to be clean, bold, modern and minimalistic.

Amaro Comparison

Design Process

Process

In order to design the Point Of Sale experience for Guide Shop associates in a way which is functional, while at the same time engaging; I decided to start the design process by proposing a specifc use case in which the POS app would be used in conjunction with a Check-in funcionality on the customer side, as well as a payment method in which both customer and associate would engage together.

Storyboard

With the ideas above in mind, I started the research and ideation processes by creating a storyboard depicting the interactions from both sides. I find storyboards to be a great tool in anchoring experiences and providing focus when designing them.

Amaro | Storyboard

Sketches

Once the storyboard journey was done, I decided then to sketch the initial screens for the associate experience(refer to square #8 on the storyboard.) I started it by doing a lean competitive analysis on five different POS experiences, mostly trying to understand which features in them would facilitate the life of a Guide Shop associate. The objective was to address the following goals:

  1. Easy Product Search
  2. Product Details Page
  3. Product Recommendation
  4. User Information Details
  5. Simplified Checkout
amaro_wireframes

The following option was then chosen since it meets most of those requirements. In order to make associates totally mobile and to help them spend more time with customers, thus creating a more personalized experience, I decided to design the app for the viewport of an iPad (1024X768).
The following sketch depicts how easy it would potentially be for an user to navigate, search, add items to a bag, access products and customer information.

Amaro | Sketches

UI Inventory Research

Once the main structures of the wireframes were chosen and tested, I then moved to gathering most of the visual and functional patterns of the current Amaro's web experience. This was an important step since I could now establish rules and create a consistent experience that both customers and associates are already familiar with. Amaro relies significantly on white space, minimalistic elements and the use of black and white as its main colors. Therefore, I decided to stay consistent in that regard.

Ui Inventory Copy

Mockups

The funnest part of the UX process in my opinion. I spent quite some time exploring different ways to depic the experience not only in a functional, but also in a visually appealing way. The findings from the sketching, wireframing and lean user testing sessions helped me stay grounded about the essence of the app.

Given this will be an application used primarily by Guide Shop associates who in my view would be walking around the store, I decided to enhance the elements and patterns depicted on the UI Inventory by applying thicker strokes to icons, as well as subtle use of the color green in many of the most important touch points to instill assurance on associates when interacting with customers. This is not a website, so users in my opinion would need a tool which could be used from any distance and when sharing portion of it with customers, thus the choice on the strong fonts weights and sizes at times to create better hierarchy in many of the main functional patterns in the app; such as in the navigation, search, payment method  and many other important sections. 

8.0 Amaro | Payment – Landing
9.1.2 Amaro | Product Detail – QTY One
9.1 Amaro | Product Detail – QTY Zero
4.1 Amaro | Add Items One – Modal
7.3 Amaro | Search – Results
3.0 Amaro | Customer Checked In – Modal
8.1 Amaro | Payment – Payment Options
8.3 Amaro | Payment – Success

Prototype

With all the screens created, I created a clickable prototype and run a Guerilla testing session with 5 different people since I had not access to actual users. I ran the process by providing these users with some background in regards to the experience by using the storyboard I created previously and then proceeded to make sure they would be able to accomplish the goals depicted in the requirements: 

  1. Easy Product Search
  2. Product Details Page
  3. Product Recommendation
  4. User Information Details
  5. Simplified Checkout

During the usability testing sessions, I noticed most users were able to successfully find products, identify product pages and check out customers in a simple and effcient manner. Some struggled to add products to cart at first since they expected to be taken to a product page first, but when they noticed everything could be done right from the main screen they seemed less resistant and enjoyed the functionality.

There are definitely opportunities to enhance the experience by adding more screens such as the ones for product recommendation and user information, which I will explore in the near future.