Skincare is a booming industry, projected to have surpassed $120 billion in 2016. As such, there are myriad webpages that make it possible to buy products from every part of the globe. Competition is stiff, and with more than 75% of consumers abandoning their shopping cart before making a final purchase online, it’s more crucial than ever to provide a positive purchasing experience.
Salm provides an easy and intuitive checkout process for the skincare consumer by building one-click purchasing, offering multiple payment options, and providing guest checkout options.
In order to understand my users in the most thorough way possible, I developed and distributed a survey across social media channels aimed at frequent online shoppers. Specifically, I aimed to discover:
I found that, overwhelmingly, users employ cell phones and laptops to do online shopping. I found that 75% of users browse while shopping online, either sometimes always, indicating that in order to create a purchase. Ratings and reviews were incredibly important; 90% of users stated that they rely on ratings and reviews in their purchasing decision. Finally, only 15% of users always create accounts while shopping online, while 85% do so either most of the time or occasionally; the latter group’s decision to create an account was based in factors such as easy access to purchase history, an incentivized offer contingent on account creation, or to expedite future transactions. In order to address these needs, I’d need to create an e-commerce experience that was responsive, easily navigable, with prominent positioning and access to ratings and reviews, and that included simple account creation.
One factor in creating a successful e-commerce website for a skincare brand was to fully understand the competition; it was important to understand and leverage exactly what competitors were doing right, as well as their areas of growth, in order to create a standout purchasing experience for users. I analyzed two industry leaders, Sephora and Ulta, as well as niche Korean product vendor SokoGlam, in order to gain insight into existing user experiences in the realm of skincare e-commerce. See my competitive analysis here.
I then developed user personas based on specific users for a skincare e-commerce website. The goals of these users were to easily browse skincare products, create accounts so as to partake of any customer loyalty program, easily access the website from a mobile device, complete a one-click checkout process, and save products for future purchase.
In keeping with the results of my survey and the concerns of my users, I set out to create an responsive MVP that allowed easy navigation while browsing, easy access to ratings and reviews, the ability to quickly create a user account, and an intuitive and punctuated checkout process for both guests and returning users. Simplicity here was key, as I aimed to minimize the number of steps necessary to complete any one goal, thus encouraging users to see their purchase through to the very end.
Revisiting my user personas, I set out to create a brand identity that would speak to the product’s target demographic. My user personas indicated that the use of sheet mask products provided users a time for pampering, self-care, and relaxation, as well as an opportunity to treat any skin concerns. I wanted to take these feelings of relaxation and refreshment, as well as the idea of skin revitalization, into account when naming the product, and additionally, wanted to honor the fact that the specific products originated in South Korea. The name “Salm” achieved all these goals. One of many Korean words meaning “life,” the word “Salm” honors the products’ Korean traditions while also indicating an objective toward bringing life to the skin. The phonological structure of “Salm” includes soft fricatives, liquids, and nasals, is absent of any aspiration or stops, and are accompanied by a lax low back vowel; the resulting pronunciation of “salm” is soft, calm, and open, as thought it were a relaxing sigh. For the logo, I wanted to create something minimal and fashion-forward that nodded to the Korean origins of the products; I therefore created a simple, monochromatic text logo consisting of the brand name in both its Romanized spelling along with its Korean Hangul. I paired this with a color palette of soft yellow, green, and purple to emphasize the calming experience provided by sheet masks. The typography I selected included Playfair, a serif font reminiscent of magazine editorials, for the headers as well as the Romanized portion of the word mark, and Raleway, a sans-serif font, for body copy.
Revisiting my user flows, I set out to create a responsive e-commerce experience that provided easy navigation to products, prominent display and access to product reviews and ratings, intuitive account creation, and a simple and expedited checkout process for both returning users and guests. I began by laying the designs out with Balsamiq.
With wireframes in hand, and a thorough understanding of how to provide solutions that addressed my users’ needs in mind, I brought the design to Sketch, where I laid out the User Interface for Salm. After creating artboards for the entire purchasing process, I exported my work to Invision, where I created a clickable prototype, with the aim of gathering design feedback and user testing.
After creating a clickable prototype, I wanted to verify that my design indeed met my users’ goals. As I am not my user, I instead turned to individuals who shopped online to complete a filmed test. I met with my informants on Skype, and asked them to complete a series of tasks while I recorded our interaction via Lookback. Overall the informants found it easy to navigate the site, were able to quickly access reviews and create accounts, and were very pleased with the checkout process; however, one overwhelming piece of feedback that I got was that users didn’t initially know what the site sold. Initially, my front page included no headline, and the visuals were consistent of abstract photos of different ingredients. This abstractness, combined with a word mark from another language, confused most users.
Taking this feedback into consideration, I tested and added a headline to the initial front page; I then tested the updated front page by creating a test on UsabilityHub asking individuals what they thought this website was for. With the new headline of “Sheet Masks for Skin and for Life,” users were easily able to identify that the website sold sheet masks. After adding the headline, I set out to create clearer visual cues on the homepage; earlier feedback indicated that the abstract photos not only did not indicate what the website sold, but that the lack of faces on the website created a somewhat cold and uninviting experience. Multiple users mentioned that faces would drive the point home that this was a skincare website, and that they would look longer and more closely at the page. With that in mind, I removed most of the abstract photos, and replaced them with stock photos of human faces. Following this, I created a preference test between the old page, utilizing the vector images, and the new page, utilizing the photos. Overwhelmingly, users preferred the design utilizing photos, leading me to switch homepages.
My final step in the design process was to show that my design was responsive to all screen sizes. Using Apples Human Interface Guidelines, I created mobile screens for iOS devices, therefore providing a seamless shopping experience both at home and on the go.
Salm was my first experience in creating an e-commerce store, and attempting to solve the problem of shopper retention and purchase follow-through. As an avid online shopper myself, I am certainly set in some ways of doing things, and have my preferred websites with my preferred checkout processes. However, after running my survey, creating my wireframes and UI, and completing user testing, I realized that my experiences and preferences are not all encompassing. I am a user, but I am not all users. Salm also provided me with the opportunity to explore masonry and grid layouts as a part of the UI process, and solve responsiveness issues that might come into play with them. Solving the problem of how to extropolate a responsive layout out of the previously designed desktop page was an exercise in geometry and logic, and while the result was a responsive page that could be viewed easily on mobile and tablet platforms, it also made me appreciate design philosophies centered around and driven by the maxim "mobile first."