Line-drawing of hands presenting an iPad to the viewer. On the iPad is a screenshot of the login to the NEXA app.

iPad App Design

NEXA is a system comprised of an iOS application and iPad camera attachment, built to take the place of a traditional pen and paper beauty/skincare consultation.

Role: UX, UI, Graphics, Interaction, Animation

Intro

The NEXA iPad app was the first significant project I took on after getting hired at Canfield Scientific, Inc. The previous designer had taken the app partway through to high fidelity mockups and what existed had gone through to development. As such, I was asked not to alter anything drastically.  I mostly worked on additional features and interactions throughout the app, maintaining consistency with established visuals but pushing where I felt it was necessary.

Goals

  • Enhance the user-interface by designing additional graphics and animations/interactions.
  • Develop the workflows for additional features that were requested by marketing and external clients.
  • Guide the beauty consultant through an entire skincare consultation process, from intake questions to regimen construction with a process that looked consistent and felt cohesive.
Screenshot of designs for gold primary and secondary buttons versus teal primary and secondary buttons.

From Gold to Teal

One of the changes I felt compelled to push for was to switch the primary CTA color from muted gold to bright teal. I advocated for this change because the original color did not contrast highly enough against the white background. Additionally, in researching several skin care brands, I noticed a common theme of blues and greens. With this in mind, I felt that incorporating teal into our product would help us convey an experience that combined science and beauty.

Screenshot of the old NEXA app demonstrating a dermal analysis of a customer's photo, as well as a list of featured products.

Guiding the Consultant

After photographing and leading the consumer through the initial steps of the NEXA workflow, the beauty consultant would land on what we referred to internally as "The Summary Screen". This screen, seen here as it existed when I got ahold of it, provided a very brief breakdown of features that the NEXA 'analysis' would display. I was asked to transform this screen into something more interactive and informative.  Something that would serve as part of the consultation script for the beauty consultant as well as educate the consumer about their skin.

Screenshot of an improved analysis screen of the NEXA app, along with two pages of hand-drawn wireframes.

I envisioned a screen that was more of a diagram, showing the features 'analyzed' by NEXA on a diagram of a face.  Each of the features would have a brief definition describing what it was along with an image that showed how it might typically manifest on the skin.  Additionally, these features could be further categorized by the level of the skin at which they would appear.

Screenshots of an improved NEXA app with selected products and a progress bar, along with hand-drawn wireframes of the same.

A Skincare Regimen

In our meetings with beauty brands, we identified that a large part of skincare consultations was the construction of a skincare regimen.  We realized that this feature needed to be integrated into NEXA if we wanted our product to function as a complete skin care consultation seamlessly.

I worked with the marketing department to outline the core steps we wanted in our regimen workflow. These ended up being: One, the ability to construct both a morning and evening regimen. Two, an interactive screen that displayed the skincare products by time of day and allowed them to be moved/duplicated between each. Three, an indicator to show which products, if any, the consumer was purchasing.

  • GIF of an example product. As a plus sign in the upper left corner of the GIF is clicked, an overlay with drawings of a sun, a moon, and a sun and a moon fill the screen. Upon clicking an X on the overlay, the overlay disappears.
  • GIF of a custom loading spinner. White outlines of different skincare product packages pop up and down as the spinner progresses. At the bottom of the GIF is the text, Building your suggested regimen.
  • A screenshot of three cards with graphics above and text below. The first card shows several electronic devices and the text Review your consultion [sic] on any device. The second card has simple drawings of beauty packages and reads Track your regimen. The third card has two drawings of anonymized avatars and an arrow pointing from the first to the second, and the text reads Consultation is saved for follow-up visits.

Interaction and Delight

I took every opportunity I could to propose interactions, animations, and illustrations that would make the NEXA experience delightful and interactive in ways that a traditional pen and paper consultation could not be.

  • Five screenshots of the NEXA app laid out horizontally. The middle screenshot is larger than the others, and shows the NEXA app login screen.

Conclusion

The NEXA app continues to evolve as we work together with different beauty brands to understand their needs. I continue to iterate and make improvements to the design whenever possible. Unfortunately, due to NDAs, I cannot display anything beyond the original NEXA workflow outlined above.