Final Project: LIT+ (UI)
Click here to read the UX process of this project.
With the research part coming to an end, I felt prepared and with a lot of insightful informations to start the Ideation Process. I will admit that I already had a pretty clear idea on my mind of what it was going to be the app, so I started to write down ideas to fulfil their main pain points through the How Might We technique. The three questions I tried to answer was: How might we incentive the reader to read more?; How might we create a place where the readers can feel inside a community?; and How might we facilitate the process of the user to keep track of the books they already read?.
After that, it was time to choose what features I would use from this exercise moving forward and set my MVP, so I decided to leave the community part for later (with a lot of pain in my heart, I admit) and went ahead for the creation of the Sitemap.
With all the structure ready, it was time to start thinking about how the app would look and feel for the users, so I started to put together images that showed how I wanted the user to act/respond after using the app and also started thinking about colors and icons that made sense with the message I was trying to send.
I chose the color blue as the main color since one of its meanings is wisdom, but I wanted to bring with it the color yellow to compliment and give a little bit of life and contrast. Also it was a nice way to stand out between the competitors who only used blue. After a few tests of what was working better, it was born my Moodboard.
Right after it, I started to think about names for the app and draw a few options for the logo and came up with the idea of LIT+. It sounded right since my goal with the app was to make the reader feel motivated to read more and bring more literature into their life.
I played around with a few ideas for the logo and started creating the base for my app with the Style Tile, bringing the hexa for the colors, the font I would use and a few variations for it and also started to draw how my graphics would look in the future. After that, it was time to start the prototype.
Since I already knew very clearly how the app was going to work, I made a few sketches for the Lofi but I used it more to guide my design than to test it. It was my personal choice to jump right to the High Fidelity and finish it faster to test it later with the prototype ready, and I’m really glad I did it cause it saved me a lot of time since the changes I had to make after testing were minimal like changing the color of the letters.
Anyway, I made the entire prototype already with micro interactions using Adobe XD and here’s the result:
A few things that are important to point out during the navigation:
- When logging a new session, the user can see the page they last read compared to the number of pages the book have and they only need to type in which page they stoped instead of telling how many pages they’ve read like all the others apps I’ve seen so far, the app can do the math for them;
- In case they forget to register a day, they can do it whenever they want;
- When finishing to read a book, instead of only rating from 1 to 5 like most apps, the user can tell how the book made them feel and what was their favorite character. This is importante since for most of them, reading a book is the same as watching a TV show, so they feel connected to the narrative and characters;
- When logging a new book they have the option to search at the database or enter a picture from the gallery or the camera, where the app can identify the informations and get the number of pages online. That way, for the heavy Instagram users, the register can be more personalized and it’s also a way to facilitate the process when logging books they already have read;
- At the progress bar, they can easily see how they are performing in comparison to the week and to the month, always having the pages and minutes at the same day;
- The Map of Genders was designed with the intention of them getting to know their profiles as readers better. It is a live organism who changes according to the books that the user logs inside the app;
- Below there’s a call to becoming pro and being able to personalize even more their experience inside the app;
- And at last, at the Goals section they can see how they are developing towards the intent they set for themselves though the months and the year and also check how many days of the week they could keep up with the habit.
Now talking about the next steps of this product, the fact that caught the most of my attention through the researches was that there’s an entire community build inside Instagram of people sharing experiences and tips, engaging in challenges and creating groups of conversation for the simple fact that they don’t have a platform who offers this to them. So my goal is to create the community tab inside the app, where they can do all that and more.
To make that possible the idea is to make collaborations now with a few selected Literary Instagram accounts that will help spread the word about the app and the functionalities of the pro signature so we can get more recognition and raise founds through them.
And thinking further ahead, I already build the Design System for the product with all the design information documented that is needed to take this product towards its next steps.
In conclusion, I could not be happier about my final project. I think it was the best way I could finish this journey at Ironhack. I felt connected with the theme from beginning to end and it gave me so much joy when later on I presented and people came to tell me that they saw themselves at my work and that they identify with my users pains. I felt like I could really make a difference on people’s lives, and that’s what I want from now on.
I would like to thank my wonderful mentor Mayra Sasso, I couldn’t have done this without you. And to Juliana Furtado and Constance Chen, thanks for listening to me and helping me every single time I needed during this past two weeks (or should I say 10?), you two are wonderful.
