GeoJournal
For the final project in my Hypertext Course, my group members and I used CSS, TypeScript, React, and MongoDB to create a system that organized documents both geographically and temporally. After the creation of a location-specific document — which could be a video, image, or text — it is added to a timeline associated with that location, which is represented by a pin on the map. In addition to map and timeline navigation, the user can also search for specific documents. GeoJournal was a month-long project with two additional team members.
On the development side, I handled Google maps API functionality, image documents, the text editor, and search. You can find the GitHub repository here.
Part 1: Ideation and Empathization
Tasked with creating a hypertext corpus, my group members and I originally conceptualized the product as a travel journal. To help guide, narrow the scope of the project, and define our goals, we created two user personas: Bill and Kate.
Part 2: Wireframing
With these two users in mind, the team mocked up wireframes for the application. In both Bill's and Kate's use cases, we saw that in addition to the original map functionality, a time-based element would be important to organize their information. As such, we added a timeline for each location.As GeoJournal's niche is location-based tagging, the design is primarily figured around the map. Each location was given a pin that, when clicked, took the user to all the notes associated with that area. On the left side of the home screen, we included a menu where a user could access all their notes in chronological order, rather than the geographical grouping found on the map. We then added a navigation bar that was consistent across the screens, anchoring the user no matter where they were in the corpus.
Part 3: Implementation & Conclusion
When implementing the project, we added a few more features than were included in the wireframe. Namely, we added a few more buttons to edit rich text, sliders to crop images, and the ability to "link" notes to a "parent" note (i.e., one node could be a collection of other notes).GeoJournal was one of my first forays into UX and web design. Although there are things I might change (styling, more rigorous prototyping, and timeline functionality), this project introduced me to the excitement of designing useful applications for users. On the whole, I think it was successful. It exposed me to the power of design and the importance of taking an empatheic approach with both project team members and the user.