New shopping experience + design process
During pandemic, I feel like it is the right time to treat yourself right. Online shopping and some skincare routine won’t be bad for girls💅🏻.
In this article, I will present my skincare online store application. This app is mostly about my exploration in UI animation. The tools I am using are Figma and Illustrator. All the pictures & resources are belong to drunkelephant.com. And here it is.
As you can see above, there are lot of animations going on. The animation was all made in Figma using smart animate. Looking how it turns out, I can say that I am a big fan of it. I mean, look how fancy it is and girls love fancy things! (The animation is pretty much delayed because it was converted to GIF). In case you are wondering, here are the most settings that I used.
Despite of it is the right time to do some online shopping, I surely made a little data gathering for better experience. So, moving on to the design process.
Hypothesis : If people are satisfied with how the product result, they will repurchase the skincare product.
To validate the hypothesis, I asked 5 of my friends who I know doing some skincare routine to fill up two of my questions.
1. From the scale 1–5, How often do you repurchase a skincare product? (1 is never and 5 is always)
2. From these five consideration below, please list your most important consideration to least important consideration when purchasing a skincare product.
And here is pretty much the data I got:
Next we are going to analyse, Based on the answers for the first question, We can see that the hypothesis is 70% true. People tend to repurchase skincare products if they are satisfied with the result. It brings me to the idea of a simple product landing page without too much information and also a quick button for a repurchase.
What about the new customer? I am going to analyse from the second question, from the total points from each consideration, the three most important considerations are review, ingredients, and brand. So that are my top priorities information for the new customers to be on the details page.
And the analysis above had brought me some idea about the wireframe of the application. Here it is:
A simple product landing page without too much information and a heart button to ease the user for the next purchase. On the bottom of product landing page, I decided to put another brand’s products. As brand is one of the top three consideration to buy skincare product, if the user already into one of their product it is a big chance that they will also purchase another product from the brand. So yeah, a products suggestion.
Next, we got a product details page. Its consist information such as, product description, product review, and product ingredients. Before I fill the page with another top 3 considerations (review and ingredients) to buy a skincare product, I think it is important to acknowledge the new customer about what this product got to do on their faces with giving some description then followed by product review and ingredients.
The flow is user can get to the product details page by tapping the Read More button on the product landing page. It is the task that probably be done by new customer who have not tried or knew the product. On the other side, the customer who about to repurchase the product can do the task with few tap, if they add the product to My Favorite section by tapping the heart button.
Now we are moving to prototyping, from the idea above, I am trying to make the design from the wireframe and prototype it.
As you can see, I decided to make the design playful to catch the user’s eyes. The theme colour is basically changing based on the product main colour to make it less boring. I am using side slide menu to maximize the white space and focusing the view on the product. Fonts are mostly Poppins to achieve a good consistency but I also use Playfair Display as an ornament . Check out the details,
And here is the prototype result,
So, that is all about my exploration for the skincare online store application. If you got any suggestion or comment just let me know!
Thank you:)