SkinDex
a Mobile eLearning Course made in Articulate360 using a tab interaction to showcase different skin types and skin concerns as well as the ingredients to look out for when trying to address the skin concerns.
INTRODUCTION
SkinDex started because I have always had a keen interest in the skincare industry. In the past, I had a hard time understanding what exactly my skin type was and why I was having certain skincare concerns.
After asking around to fellow colleagues what they though various definitions of skin types were exactly, I realised that no one knew exactly what these terms meant.
So I designed a quick, tab interaction mobile eLearning application to help address the definition of each skin type, as well as which common ingredients to look out for when selecting incredients in skincare products for that specific skin type.
Roles & Responsibilities
Research, UX and UI design, eLearning Development, Storyboarding and Mockups
​
​
Which tools did I use?
Figma, Notion & Storyline360.
Full Process & Design Documentation
The turnaround time for this was rapid, as I tried to make this project as swift and clear to the point as possible. I did a few mockups in Figma, wrote a short storyboard in Notion, along with planning my design document, researched some information about skin types and various ingredients beneficial for each skin type, and set to work on creating the interactive prototype in Articulate360. I would say that I definitely worked on a quicker, iterative approach compared to my FinFree project.
​
For the Development and Design choices, as I mentioned, after a few conversations I had, it seemed like few people actually understood what ”dry skin” or “combination” actually meant, even less which ingredients to search for and which to stay clear of. So I focused on categorizing it between the typical skin care groups we always hear about on my index page, and then giving a solid definition and a link to each skin care type’s best ingredients list.
Visual Mockups & Design Choices​
​
The style and feel that I was going for was more minimalistic, classy and light. I took a look around pinterest and Dribble for some inspiration on current skincare app designs, and noticed that skincare usually gets marketed to create an impression of luxury.
​
I also went ahead and did some visual mockups in Figma. My worry was at this point that perhaps storyline wouldn’t be able to accommodate my vision as clearly or seamlessly as I wanted it to, but I was ready for a challenge.
.png)
Creating the Interactive Prototype & Testing​
​
I went ahead and made a prototype in Storyline360 to get the animations and transitions as smooth as possible, while paying attention to whether or not the participants that I asked could navigate through the app as effortlessly as possible.
​
After my observations, I made changes to the animations in the triggers panel in Articulate360 and played around with more transitions to give off that luxurious vibe skincare apps are famous for. I then focused on refining the rest of the course and its functions and layout before going ahead and publishing the full project online and to my portfolio.
​
However, the moment I tried to publish the storyline output, I realized that the font, Rasa, was not exporting with the letter i in the document at all. I had to change my font family completely at the end, which was a first for me to experience during the publishing of storyline files.
​
​
Storyline360 as a Tool​
​
IStoryline360 was definitely more pliable than I originally thought, especially when I've been using Figma a lot for more advance graphics and interactions to try and get a point across. However, I took this project as an opportunity to help improve my comfort in designing for mobile on Storyline360 and would say that the outcome I expected and hoped for had been achieved.
​