CASE STUDY 003
VIEW PROTOTYPE
____________________________________
DISCOVER
___________________________________________________________________________________________________
Allow users explore and present ideas with interactive maps, blending creative freedom and 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—revealed that boxing every element made the interface feel cluttered and overly interactive. To improve clarity, the design moved away from the box-heavy neobrutalist style. The ‘Following’ screen shows this, with
large components 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 is usually a routine step, so I added playful illustrations and blue accents to make it more engaging. Interactive buttons create a small moment of delight and
set the tone for the rest of the app.
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 was 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.