PROJECTS ABOUT
CASE STUDY 003
interactive maps based on books, using
a pre-built design system to explore its
opportunities and limitations.
VIEW PROTOTYPE
_______________________________
DISCOVER
___________________________________________________________________________________________________
Allow users to explore and present ideas using interactive maps, blending creative freedom with a structured design system.
Key features were defined through user stories, focusing on creating, customizing, sharing, and exploring interactive book maps with an intuitive experience for both new and returning users. These user stories informed the wireframes and made it easier to build within a pre-designed system.
The project started with a neobrutalism open-source design kit as a consistent foundation. From there, the system was customized—refining colors, typography, and components—to better fit the project’s needs and create a more functional, tailored design.
The neobrutalism kit included star-shaped cards, which I adapted as abstract avatars. This adds a playful, recognizable element for each user while keeping the bold, geometric aesthetic consistent across the app.
Two rounds of testing—after initial styling and at project completion—showed that boxing every element made the interface feel cluttered and overly interactive. To improve clarity and usability, the design moved away from the box-heavy neobrutalist style. The ‘Following’ screen illustrates this, with many large components that were often mistaken for buttons.
Since this is a desktop app, using hover states for each component was especially helpful. It made the interface feel more interactive and improved usability during testing. The hover effects on buttons were particularly effective—thanks to the drop shadow, they look like they’re being pressed even though it’s just a visual cue.
The sign-in screen isn’t usually the most exciting part of an app, so I added playful illustrations and blue accents to make it feel more engaging. Interactive buttons turn it into a small moment of delight and set the tone for the rest of the experience.
The Home screen serves as a hub where users can access their own maps, drafts, and liked maps, as well as create new ones. They can also view friends’ maps and explore community creations. A side navigation bar keeps key sections accessible at all times, while creating a map switches to a full-screen view for an immersive experience.
A full-screen experience is essential here because map details can be intricate. Users start by uploading an image or selecting a real-world location, then add book details to make the map accessible to others. They can also customize the map by adding pins, comments, and drawing lines or shapes in different colors to mark events.
Users don’t always have to create their own maps—they can explore others’ creations in the community. Maps can be browsed by genre or searched to find specific content.
When a map is selected, users can view the creator’s map along with comments and likes. They can add their own comments or likes, and also visit the creator’s profile.
A creator’s profile displays the same layout as your own for a consistent interface. The main difference is the creator’s avatar and name at the top. Users can choose to follow the creator or return to the community.
This was originally a desktop app, but to show our familiarity with the system, a few mobile screens were created, making the app accessible on the go. A note from experience: it’s always easier to scale up from mobile than scale down from desktop, so designing mobile-first is ideal.
Maintaining consistency with the desktop app, but in a more vertical layout with separate pages instead of combining everything.
Community Maps was the only flow I built due to time, but it remains consistent with the desktop app, adapted to a more vertical layout.
Social features feel more natural on a phone, so this layout works well. Placing comments and likes at the bottom made these pages intuitive right away.
Same as before—social features feel more natural on a phone, and the design stays consistent with the vertical layout.
With sooooo many hover states, I wanted to showcase all the prototyping behind this project! The best part—you can see how it all comes together. Link’s at the top.
LOGO
RESUME