Type Journal Hero

Type Journal


description


Type Journal is an app aims towards type enthusiasts who enjoy spotting different typefaces being used in real world situation. With the app, the users can log in whatever typefaces they recognize and track their locations whenever they find them in use. I created this app for a project where I learned to create a mobile app for tracking hobbies or habits. As a designer, trying to identify typefaces used in real life is something I would often do so I wanted to create an app for those who share the same interest.

tools


Photoshop
Illustrator
Sublime Text
XD
Google Map API
HTML & CSS
JS & PHP

01.

Branding


Moodboard


Moodboard


Logo Explorations


Logo Sketches
Logo Explorations

Brand Guidelines


Branding Branding

02.

Interactive design


Sitemap


Site Map

Low–Fidelity Wireframes


Low Low-Fidelity Wireframes Low Low-Fidelity Wireframes

High–Fidelity Wireframes


High-Fidelity Wireframes High-Fidelity Wireframes

Task List


  • Task 1: Sign up for an account.
  • Task 2: Add a new typeface.
  • Task 3: Use the search function to search for a typeface.
  • Task 4: Edit the information on the typeface.
  • Task 5: Add a new location to the typeface.
  • Task 6: Delete a location.
  • Task 7: Add a user profile image.
  • Task 8: Log out then sign back into the app.

User Testing



Participant 1

The app looks good. The icons should be SVG instead of PNG so they’re not pixelated. The icon on the type’s map needs to be more clarifications and something should be done to the blank map page.

Participant 2

The app is pretty easy to use. The background image on the signin/signup page is pixelated when scaled up.

Participant 3

Easy and intuitive to use. Might want to consider adding search by descriptions.

Design Update 1

Fix: Updated the background image of the signin page to higher resolution to resolve the pixelation.

Design Update 2

Fix: Added search by description function and updated all icons to SVG files.

Design Update 3

Fix: Created a blank slate design with an instruction modal for the type map page to guide users.

Design Update 4

Fix: Updated the view icon on the map on the type profile so it is easier to identify.

03.

Coded Prototype


App


App Mockup