LentApp App Design — UX/UI Case Study

From the UX research to the UI elements, LentApp answers to a real user need to control and manage their lenses use.

Victoria Serrano
9 min readDec 30, 2020

Briefing: The game rules

  • Goal: To increase the people well-being by creating a new digital product.
  • Role: Individual project (my first individual project so be kind! 😜)
  • Duration: 2 weeks.

(Let me say sorry because all my original work images are in Spanish although I’ve tried to explain everything in English. I promise I’ll try to work my stuff in English next time 🙇🏻‍♀️)

UX Research: “The problem is to find a good problem”

Level 1: the first challenge to overcome when working in a briefing as open as this is to find a good problem to be solved. Well, the well-being of a person is a huge area to search, so I decided to focus my energies in a topic about which I could investigate more in depth, observing my friends and family.

I managed to formulate 2 interesting issues:

  1. The difficulty that students find to stay motivated when studyng in a remote way.
  2. The misuse of contact lenses and the ignorance of the damage that this can cause to the eyes.

Due to I have used contact lenses all of my life, I felt that it will be a great challenge to find a good answer to that theme, so I decided to delve into this.

UX Research: finding a solid base

To verify that the path taken was interesting enough, I launched a survey to contact lenses users, obtaining two pain points:

Data obtained through 53 surveys

Although it is well known by users that this two habits are harmful to their eye health, it is shown by surveys that more than a half still have them. Trough 6 interviews I could obtain more information about this:

  1. Users don`t pay attention to how long they have been wearing contact lenses during the day, forgetting about them.
  2. Users usually forget to write down the date when lenses are used by first time, so they do not know when they should be discarded and they end up using them beyond their recommended date.
  3. All of them knew someone who had suffered an eye injury due to misuse of contact lenses.

I also talked with some stakeholders like ophthalmologists about the real danger of this pain points. All of them said to me that eye injuries due to contact lenses are more common that everybody thinks. One quote that can make you have a mental image about the problem:

To clarify my ideas, I made an affinity diagram with all my investigation:

Affinity diagram with all the collected data

So, at last, I had a solid base on which to support my project. At that point, I decided to investigate about the market: Is there any digital product that already solves these issues? The answer was (obviously) YES. However, I found a good “blank space” where my product could fit.

Some of the Apps that I found

I saw that the available applications focus only in the “dates” aspects of the contact lenses. Moreover, they did not have an overly intuitive design and they had very low ratings from their users. Only redesignign one of this apps would make a huge difference but…

Where is my added value ? Well, I thought that it was a good plus to try to help users not only with dates but also with the time they wear their lenses during the day.

With all that information, I finished to build a first (but not last) Lean UX of the project :

First Lean UX of LentApp

UX Research: Connecting with my users

Using my experience during the interviews and surveys, I built a user persona and journey to delve into what impact my app could have on her/his life:

User persona for LentApp
User Journey for LentApp
User scenario for LentApp

This tools helped me a lot for the next steps where I imagined the path that Alejandra would follow into my future app.

UX Design: Starting to build the skeleton

Putting together all the investigation done, I created a MoSCoW to start defining the shape of my app:

I decided that LentApp must be a very simple app for not make people loose their time and increase its daily usability, so I eliminated all the functionalities that were not needed by users, like the ophthalmological and technical info. I was very inspired by the competitive analysis that I had done to discard some functions and include others, like a widget to a quicker start of the timer.

To sum up, LentApp was gonna have two functionalities:

  1. Timer for warning the user when wears conatct lenses more than 8 hours (time recommended by ophtalmologist).
  2. Control of the stock and the date of changing contact lenses.

And have arrived the most terrifyng momento when designign a digital product: The Crazy 8 🤯. For me, is a very useful tool, but also make my brain suffers a lot of stress. However, is a fantastic way to start to see the look of the project.

My crazy 8 (in the last screen my brain said bye 👋🏼)

Thanks to its crazy 8, I began to see how the site map of my app will looks like. Using my user journey I tried to make a user flow for Alejandra (my user persona) to clarify the steps and screens I would need to ideate.

Ideal User Flow into LentApp

Well, with all that stuff I was ready to make a low fidelity prototype to test it. How the lean metodology learns: Fail fast to iterate fast.

Some iterations I made after test the low-fi prototype with users

UX Design: Mid-Fidelity Prototype

LentApp mid-fi prototype

Thanks to this prototype I got a lot of feedback that I applied to my final app. One of the most interesting questions users asked me was:

what if I forgot to start the timer when I put my conatct lenses on?”

It was not an easy question to answer. I thought on including notifications but it is not very functional and users get tired of receiving everyday the same notification.

Finally, I thought in including an automatic start that the user can personalize for those who wear contact lenses on a regular way. Moreover, I thought in a widget like a way of making the app being always present in the desktop of the user`s smartphone. With it, users can start the timer in an fast way without having to open de entire app, helping to internalize its use.

UI Design: It seems simple but NO

Spoiler alert ⚠️ : I thought it would be the easiest part but I was SO wrong.

How my app is designed only for being seen a few minutes (its goal is to work most of the time in a second plane) I was looking for a simple interface, that not stress too much to users and don’t take to much time to find actions. For that reason, my Brand Atributes were:

Actual / Functional / Modern / Direct

Looking for express that atributes with my app, I bluilt a mood board and tested it with some users:

LentApp Moodboard

The results reflected I was looking in the right direction, so I used that mood board during all my project for helping me to take style decisions without go away of the brand attributes.

So next step: choosing colors. I took this challenge with optimism thinking that it would not be so hard to do. 😐 . Now I understand how innocent I was.

From de moodboard I stablished that the style of LentApp should be minimalist: the color would only appers in small details to clearly indicate de user what to do. My mantra during all the process was a Dieter Rams quote:

“Less but better”

Dieter Rams objects have been an inspiration for LentApp and…which is the closest thing to Dieter Rams work in the digital world? Apple! Yes, I found that te IOS style fit very well with my project.

Part of the UI Kit created for Lent App

So after all this reflexion that take me some hours, I stablished the colors : the famous Apple blue as the principal one and the unique Diter Rams orange for danger states. I also decided to use the IOS typography (SF Pro) to mantein a consistency in the apple style, as well as its own elements such as buttons or selectors.

UI Design: LentApp is ready!

In that user flow, our user Alejandra enters the app for first time, so she has to register her contact lenses.

After doing that, she programmes an authomatic timer (the timer will starts automatically every day at 8:00 pm.).

She starts the timer and the time goes by, changing the app color and the messages. When the timer arrives to 8 hours, sound an alarm to notify Alejandra that the recommended time has finished.

After getting out her contact lenses, Alejandra accidentally breaks his left lens and has to notify to LentApp.

Let’s see how works all together! For the prototype I decided to use Keynote because it it allowed me to add some micro-interactions that were going to provide a lot of veracity.

Esto es todo amigos!

And so far we have come with my first individual project 🤟🏼. It has been a true 2 week marathon in which I have worked a lot. Am I happy with the results? Yes, but I have a serious mental problem: always thinking things coul be better! So maybe retake this project in the future.

What I have learned: Minimalist interfaces are so hard! It is not easy find the exact point in which the app is minimalist but not bored. In fact, I am not sure I have got it. However, I think I have managed to capture quite well the IOS character and the functional aspects of my app.

I have also experimented how other apps or almost other objects can inspired you, like Dieter Rams with LentApp. It has been a very interesting experience.

If you have read that far…

Thanks for being interested in my project 🤩 I am still learning so if you have any question, suggestion or comment I will be so happy to hear from you!

✉️ viviserranovivi@gmail.com

--

--