top of page
On This Day
Mobile Journaling Application
__________________________________________________________________________________________________
OVERVIEW
This was my first design project, and I began working on it towards the end of 2022. The project is a journaling mobile application called ‘On This Day’ and is focused on creating a simple and aesthetic visual design while including the most important user-desired features such as simple navigation and more security. The app was designed using Figma. Below you will find a preview of the finished product followed by the process used to create it. This process includes defining the problem & goals as well as a chronological design procedure which addresses these goals along the way.
PREVIEW
Welcome & Security Pages
Main Pages (Default Theme)
Main Pages (Light Theme)
Main Pages (Dark Theme)
PROBLEM
User reviews of the 5 highest-rated journal applications showed a desire for a journaling app with more security, organization, and the feel of hand-written journaling.
GOAL
The goal was to create a new journaling application that addresses the aforementioned issues while maintaining the functionality that made the previous apps successful. By grouping user reviews into similar categories it was revealed that the features which competitor apps implemented well were appropriate amounts of customization and a search/calendar feature. Features which could improve the existing apps were a classic design and color scheme which would resemble a physical journal as well as additional security options such as a fingerprint scanner and password protection. It is also important to avoid any app features that the users disliked. These included too much customization (which became distracting) and a password-free login (which raised privacy concerns).
Features Table
STYLE GUIDE
To give the application the “classic journal feeling” desired by users, the color scheme needed to resemble that of a physical journal and paper. Similarly, the layout needed to encourage repetition that users claimed was lost when transitioning from handwritten to digital journaling. To accomplish this, the background color was chosen as a stained white while the accent colors resembled that of a brown leather cover often found on traditional journals. Repeated geometric patterns were also used to create the previously mentioned accents and encourage the users to “keep the pen flowing” as they mentioned was the case before making the digital transition.
Default Color Guide
While the initial plans were for a typeface that resembled hand-written text, any hand-written typeface chosen would be unlikely to match every user’s handwriting and could pose problems if difficult to read. Instead, a neutral Sans-Serif typeface was chosen for readability and simplicity. This avoids the accessibility problems that come with a hand-written typeface style. The typeface chosen was Alata and was used for all text throughout the design.
Alata typeface in H1, H2, & H3
SETUP
To avoid finding out mistakes later in the design process, laying out the general locations as shown below gave an idea of a low-fidelity prototype of what the app would look like. Each horizontal line within a solid box represents a non-editable text location. The darkest colored boxes are linked to the H1 color in the style guide, the lighter colored boxes H2, and the lightest boxes with H3. The outlined boxes such as the one in the left frame represents a text box that is editable. Shapes without horizontal lines represent the location and general structure of any icon, button, or extra shape located within a page. This layout was created to give a rough idea of spacing and location.
Low-Fidelity Wireframes
CREATION
Once all features fit appropriately on the pages, next up was creating the finished version of the application. I first completed the designs for the default color scheme as this would likely be used the most often. Once it was complete, I chose appropriate color schemes for the light and dark versions of the app. After reviewing and making any minor fixes to the pages, the main application pages were finished.
Finished Figma Pages
When the main application designs were complete, I created a set of welcome pages to welcome the user to the app and give a quick breakdown of the available features so that they are not overwhelmed upon entering for the first time. I also added any additional needed pages such as the fingerprint reader page and the device PIN page.
Additional Figma Pages
FINAL THOUGHTS
Overall, I think the project was successful. I did not run into any extreme problems, and it was fun to learn about Figma as I completed my first project. I also learned the importance of making sure the details were implemented correctly and that each interaction had a design for the outcome. For example, mapping each button to a page helped make sure all buttons were linked and had appropriate design features available to appear once pressed. Similarly, by reviewing each frame after they were completed, I realized several small features could improve the user experience. For example, adding back buttons to the welcome pages was useful in case someone missed something or accidentally clicked the advance button when they did not mean to. These were just some of the ways to improve the design that I noticed while doing this project and that I can continue to implement in future projects as well.
bottom of page