Janarayson

Designing the Hermo iPhone app

Projects6 min read

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.

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 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. 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.

The Hermo splash screen: the plum H mark above the HERMO wordmark on whiteThe first onboarding slide: pink lipsticks on red, More than 10,000 Trusted Reviews, Browse first and sign up later, and Login and Sign Up buttonsThe 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
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.

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
Signing up, as a flow.

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.

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 DealsMarch 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 CartThe March design of home in plum: an Etude House banner, coloured Hot Deal, Attendance, Bundle Buy and Mask Box icons, and a Taiwan collection bannerThe 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
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.

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 textNew Beauty Review: Show off your purchase and earn 50 credits, with fields for the order, comments and a photoExplore: Skin Care, Make Up and Bath & Body tabs, New Arrival and Just Restock banners, top brands, and hot categories like Cleanser, Mask and Moisturize
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.

Mask Box: a DS.1 banner, sheet masks with prices and Add buttons, and My Mask Box (1/12) at the bottomBeauty Bundle Box, 1 Price of My Top 3 Favourites: Aritaum, Innisfree and Hera products, one of them sold outAttendance taken: Congratulation, continue for another 5 more days to get FREE 200 CreditsBeauty Grab: add-on products like a Regen Cosmetic mask for RM5.90 and a Laneige Water Sleeping Mask trial size
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.

Check Out, step 1: choose a shipping address, then step 2, Hermo will arrange my deliveryCheck Out, step 3: Online Banking picked, with AmBank, CIMB, Hong Leong, Maybank, RHB and FPX, then PayPal and Manual Transfer / ATMMy Order: a list of orders, each with its number, date and status, Received, In Progress, Shipping, Unpaid, Canceled, Shipment Delayed and PostedOrder details: the shipping address, a Poslaju tracking number, a tracker at Shipping, and Confirm Received for 20 credits
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. 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.