It's been ~2 weeks since I've released my second iOS app called Mirror Journal. I am currently marketing the app as a digital journaling app designed for self-reflection and secrecy. This app has been around four months in the making so I wanted to create an overview of why/how I made this app along with the lessons I've learned along the way.
In this part I will briefly go over why I created this app and talking over the choices I made evolving the home page's user interface.
Why I created this app
Look there is a ton of journaling apps... I am not going to lie. I am also not going to say that mine is the best because mine was designed around two specific use cases and it's all subjective in the end. Which depending on the person's needs/wants my app might be the perfect fit.
The reason I designed my journaling app the way I did is that I've realized that reflecting on the past... the decisions/thoughts I had was very beneficial for my mental health. And many journaling apps that I have tried does not really encourage (to be fair they definitely don't discourage) this action of looking back at the past.
Then building on top of that once you are looking back at the past... what tool can I create to make this process of self-reflection easier/more beneficial. What if you could write a journal entry on top of a journal entry? What if for example you can critique the negative thoughts of the past? I'll be talking about this feature in future posts (you can also download the app to try it out yourself ;D) but that was the main motivation in developing this new app.
An idea that kind of came mid developing this app was this idea of secrecy. Some people including me hesitate writing down their feeling/thoughts in the fear of it not being private. That's why I added the ability for a custom passcode that AES-256 encrypts your selected journal entries. Along with everything being locally stored... which of course has it's downsides but in my vision of this app I felt like it was important. Along with a snapchat like feature of expiring journaling entries... which honestly I added it just because originally but have found times where it was helpful to know that certain things wouldn't be there forever.
Evolution of the home page UI
First UI prototype made with Figma
Second UI prototype made with SwiftUI
Final release UI made with Angular/Ionic Framework
Mirror Journal has gone through a few UI tweaks throughout the months of creating it. But the original concept stayed pretty much the same... a simple home page that shows previews of each journal entry using a card format.
The final card ended up not too different from the original prototype... title, date and a quick preview of the content. The only large change is being that quick options are contained in a dropdown button. Originally it was planned for each of those options being in a separate button on the card. I realized that making those buttons especially a delete button so easily accessible could lead to unfortunate accidents. Of course there would/is a prompt to make sure you are sure about deleting... but sometimes a user can think too fast and click the prompt. Making deleting a 3 button press operation (click on the dropdown, click delete, then click delete again on the prompt) can cut down on those mistakes without being too much of a hassle. Also cleans up the UI a little more.
I was going for a very clean and simplistic user experience/user interface. That's why most of the home page's features are hidden initially making it not as overwhelming to look at vs if every button/option was there.
The navigation is represented by a FAB (Floating Action Button)/icons (there is an option to show menu labels in the settings) giving the user easy access to creating journal entries, unlocking encrypted entries and settings.
Originally navigation wasn't planned to be put in one concise place. For example a signaler "new entry" button (see SwiftUI prototype) navigated to creating an entry and a "swwwappp" button (see Figma prototype) navigated you to unlock your entries... originally I wanted to give the app "character" in the expense of making any sense.
My UI design process and making sure my app is super easy/enjoyable to use... is full of playing around with elements in small ways. Then running it through people who did not see the app/being told nothing. Seeing how they navigate around and what they try out is very revealing.
I've learned as someone who enjoys the design process of app development that it's super easy to design for yourself. Since you know the inter-workings of the app/you are the one wiring clicks to action... it's hard to think in the mind of someone who doesn't know these things. You may find it obvious for example that a pencil emoji represents editing but that doesn't always speak to everyone.
And at the end of the day there will probably be that person who still does not get it. And that's perfectly okay. That's why documenting how your app works in something like a tutorial is super important. Some apps lately have the tendency to throw users in... which for 95% of users it's probably fine. It's all in an effort for accessibility making sure anyone who wants to use your app can.
Conclusion
In the next post I will be going over the UI for journaling entries/the notes feature (along with the technical/ux troubles I had originally with this feature).
I hope you enjoy this series as much as I do writing it. Follow me on Twitter (@andrewrodebaugh ) where I talk a lot about this app and the development of it.
Also check out the app at https://mirrorjournal.app
Peace,
Andrew Rodebaugh
Top comments (0)