---
title: "Designing the Hermo iPhone app"
description: "We designed Hermo's iPhone app with their design team, built it in React Native while their API was still being built, and went down to JB to hand over the code."
url: "https://rayson.me/writing/hermo/"
category: "Projects"
author: "Janarayson"
published: 2016-08-08
---

We went down to JB this week to hand over the code for Hermo's iPhone app. We got a look at their office and the team, and a tour of the warehouse... oh, and there's a slide in their office.

[Hermo](http://www.hermo.my) is the online beauty shop from Johor Bahru. They raised a Series A from Gobi Partners last October, and [nearly half their orders already come in on the mobile site](https://techcrunch.com/2015/10/14/hermo/). In March they launched in Singapore too. They had the website, so apps were the next step la, and they came to us to build the iPhone one.

Hermo is about the second or third shopping platform we've worked on. The first was the OG, the Lelong team, when we built Superbuy, their shopping app for Nokia's Symbian phones.

<Screens
  screens={[
    { src: splash, alt: 'The Hermo splash screen: the plum H mark above the HERMO wordmark on white' },
    { src: onboarding, alt: 'The first onboarding slide: pink lipsticks on red, More than 10,000 Trusted Reviews, Browse first and sign up later, and Login and Sign Up buttons' },
    { src: beautyProfile, alt: 'The beauty profile after signing up: Tell us a little bit more to make you gorgeous, a 50% progress bar, then Skin Tone, Skin Type and Skin Concern' },
  ]}
  caption="The splash, the first onboarding slide, and the beauty profile."
/>

## With Hermo's design team

We did the UI/UX together with Hermo's design team from December to June, using Hermo's own brand. We started by going through other shopping apps screen by screen: Le Tote, The Honest Company, Lotte's Chinese shopping app, Jumei, The Fancy, even Foursquare's search. Then came the user flows, about 80 of them, and the first wireframes in January.

<Figure
  src={flowSignup}
  alt="The Sign Up flow: four grey wireframes, onboarding, the sign-up form, the skin type and skin problem questions, and home, with pink boxes on the buttons and arrows between them"
  caption="Signing up, as a flow."
  wide
/>

The design moved a lot along the way. We had to keep adapting, partly because Hermo's API was being built at the same time as our app. The side drawer in the January wireframes became a tab bar in March. By June, Home had turned into a feed of reviews from Hermo's customers, and the shopping moved to its own Store tab.

<Screens
  screens={[
    { src: homeJanWireframe, alt: 'January wireframe of home: a menu button, Home, search and camera icons, a 16:9 promotions photo, round On Sale, Premium, Flagships and Maskbox shortcuts, and Super Hot Deals' },
    { src: homeMarWireframe, alt: 'March wireframe of home: HERMO in the top bar, a banner, round Hot Deal, Attendance, Mask Box and Wishlist shortcuts, and a tab bar with Home, Products, Reviews, On Sale and Cart' },
    { src: homeMarDesign, alt: 'The March design of home in plum: an Etude House banner, coloured Hot Deal, Attendance, Bundle Buy and Mask Box icons, and a Taiwan collection banner' },
    { src: storeJun, alt: 'The June Store tab: the same banner and four icons, then an Oversea Zone with a Laneige banner, and a tab bar with Home, Explore, Store, On Sale and My Cart' },
  ]}
  caption="Home in the January and March wireframes, the March design, and the Store tab in June."
/>

Reviews are Hermo's big thing, about 50,000 of them on the Beauty Wall, and on the new Home you scroll through them: customers' photos, likes and hashtags, with the products in each one. Post your own from an order you've received and you get 50 credits.

<Screens
  screens={[
    { src: homeFeed, alt: 'Home as a feed: a customer review with a photo of four Acca Kappa hairbrushes and a Christmas card, 12 likes, and the start of the review text' },
    { src: newReview, alt: 'New Beauty Review: Show off your purchase and earn 50 credits, with fields for the order, comments and a photo' },
    { src: explore, alt: 'Explore: Skin Care, Make Up and Bath & Body tabs, New Arrival and Just Restock banners, top brands, and hot categories like Cleanser, Mask and Moisturize' },
  ]}
  caption="Home as a feed of reviews, posting one, and Explore."
/>

Credits run through the whole app. You earn them for reviews and for inviting friends, and Attendance, a daily check-in, gives you 200 credits if you keep it up for a few more days. Then there's Mask Box, where you pick 12 different sheet masks and Hermo packs them into one box. Bundle Box gets you your top three favourites at one price, and Beauty Grab puts RM5.90 add-ons in the cart.

<Screens
  screens={[
    { src: maskBox, alt: 'Mask Box: a DS.1 banner, sheet masks with prices and Add buttons, and My Mask Box (1/12) at the bottom' },
    { src: bundleBox, alt: 'Beauty Bundle Box, 1 Price of My Top 3 Favourites: Aritaum, Innisfree and Hera products, one of them sold out' },
    { src: attendance, alt: 'Attendance taken: Congratulation, continue for another 5 more days to get FREE 200 Credits' },
    { src: beautyGrab, alt: 'Beauty Grab: add-on products like a Regen Cosmetic mask for RM5.90 and a Laneige Water Sleeping Mask trial size' },
  ]}
  caption="Mask Box, Bundle Box, Attendance and Beauty Grab."
/>

Checkout takes three steps, and you can pay by card, online banking or FPX, PayPal, or bank in at an ATM. Every order then gets a tracker with its Poslaju, Skynet or GDEX number, and confirming you got your parcel earns another 20 credits.

<Screens
  screens={[
    { src: checkout, alt: 'Check Out, step 1: choose a shipping address, then step 2, Hermo will arrange my delivery' },
    { src: payment, alt: 'Check Out, step 3: Online Banking picked, with AmBank, CIMB, Hong Leong, Maybank, RHB and FPX, then PayPal and Manual Transfer / ATM' },
    { src: orders, alt: 'My Order: a list of orders, each with its number, date and status, Received, In Progress, Shipping, Unpaid, Canceled, Shipment Delayed and Posted' },
    { src: orderDetails, alt: 'Order details: the shipping address, a Poslaju tracking number, a tracker at Shipping, and Confirm Received for 20 credits' },
  ]}
  caption="Checkout, paying by online banking, your orders, and one on its way."
/>

## Building it in React Native

Going with React Native was a risk at this point. Facebook only open-sourced it last year, iOS first, and [a new version comes out every two weeks](https://engineering.fb.com/2016/04/13/android/react-native-a-year-in-review/). Some of the libraries we used weren't mature yet either. But our team is comfortable with JavaScript, and React Native meant we could iterate fast without having to deal with iOS native code. Working with the simulator and React Native has been pretty good.

We started the code in March, on the first round of the design, and kept going through the second. Getting it onto the App Store is up to Hermo's team from here.