Sooper Exchange

Sooper Exchange is an auction platform for salon services.
The aim is to create a critical mass of services per customer to create a profitable environment while providing services at discounted rates for customers.

I researched, designed and handed off this app for development.

Check it out on the google play store

Client
Sooper Salons
Date
12/11/2019
Based In
Hyderabad, India
Scroll Down

Table of Contents

The Challenge

Sooper Salons needed a way to create value for customers, retain them, and meet a profitability point of 1,900 rupees per order per customer. Salon services are particularly tricky in India where the industry is comprised of a formal and informal blend of businesses and independent service providers. So, the issue really is about reaching customers effectively and providing the right price point to engage them.

My Role

I was brought on to help them define the right user flow that would result in 3x service stack per order, design a scalable UI & create the handoff guidelines for a speedy design to development process.

Focus

The focus here was squarely on customer acquisition and developing these customers into recurring orders at a critical mass price of 1,900 Rs. I was able to derive this from meetings with company stakeholders across management and development. I did this because I wanted to unify the vision across all stakeholders and ship a product that would achieve these targets. Most of the data below comes from Sooper Salons as they've been conducting customer feedback and retention analysis for the entirety of their existence. I compiled and extracted the key metrics.

profitable order price

Customers who order at least 3 services at a total average price of Rs. 1,900 or higher create a profitability scenario for individual salons on the app.

    Customer acquisition & retention per month

    Acquiring customers at a 20% increase per month & then retaining customers at an average of 2 orders per month at the average order price can lead to a sustainable base of business for individual salons within the network.

      Sooper Exchange at its most basic is an attempt to take advantage of the hybrid nature of the self care industry & typical customer habits in India. The idea is if the app can provide enough of a discount per individual service while creating a higher order total; customers are more likely to be satisfied. This, in turn, can create a stable recurring revenue stream for salons.

      3x

      or more services per order is the ideal range for customer satisfaction

      20%

      acquisition rate per month per salon on the platform to achieve critical mass

      2x

      orders per customer per month leads to stable recurring streams.

      Rs.1900

      Average price needed at checkout per order for the salon to make money.

      Design Development

      I started this process as I would've in any other case; by developing a user flow. After that, I tried to give focus to individual UI elements and how they could capture the attention of users to achieve the business goals described above. This process was back and forth as I would have to test and modify the flow and elements in an alternating cadence to create the flow that the business was looking for to create value for their customers & salons.

      User Flow

      The user flow had to focus on educating the user & engaging them enough to want to purchase multiple services in one go. To achieve this, I set up a onboarding flow that works through each step of the process but framed it around getting deals. The second focal point required a bit more tinkering but there are stand out UI elements in the check out process that prompt the availability of money saving coupons or deals. Overall the flow is standard with some minor deviations.

      Navigation

      The crux of the user flow is the navigation bar. Perfecting this with the right elements allowed me to create anchor pages around: Home, Search, Bookings, & Profile. These four pages allowed for a more complex checkout flow that includes more bespoke UI elements.

      Cards

      Cards constitute the most used UI element in this app. Most of the information dispersion and overall structure is dictated by the format and styling of the cards on the right. Each conveys different information but they all serve to create a clear, concise & linear flow through a page.

      Checkout

      The checkout elements shift between pre-offer & after offer. The difference between these two "states" is that one leaves room for the surprise offers. The page distribution is weighted in favor of the offers for the pre-offer or subtotal checkout. Users will land on a more comprehensive finalized or after offer checkout screen that includes payment options and a T&C. The buttons also serve to reinforce the price point by dynamically changing to the relevant total amount.

      Final Design

      The final designs below are organized from start to finish of the user flow. This design was created in Sketch & handed off through Zeplin. There are optional screens at the end that the user doesn't necessarily have to engage with but they're there to reinforce the overall engagement experience by letting the user optimize their results. This design was a quick process and it taught me a lot about communicating clearly and effectively with developers.

      Handoff

      I built the designs in Sketch, used Anima to export CSS & then pushed the project to Zeplin to make sure the design was spec'd in exactly the way the design required. The whole process from handoff to a finished app took 2 weeks. I'd say the process was successful.

      Takeaways

      This was the first time I shipped a project through Zeplin & exported CSS snippets to maintain styling from Sketch to the development environment. This was also the first time where my focus was mostly on creating UI from already created research & business goals.

      If I were to re-do this project, I would make sure to get a clearer idea of what the development team understands from my designs. I would push incremental changes from the start instead of as a single push for the whole design followed up by incremental changes.

      Next

      About

      Get to know me & get in touch