ATLAS — Courtney Schultheiss

CASE STUDY 003

Atlas is a web app for creating and
sharing interactive maps based on
books, using a pre-built system to
explore its possibilities and limits.

VIEW PROTOTYPE

DISCOVER

MISSION

Allow users explore and present ideas with interactive maps, blending creative freedom and a structured design system.

USER STORIES

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.

DESIGN 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.

USER TESTING

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.

AVATARS

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.

HOVER STATES

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.

HOME

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.

CREATE A MAP

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.

COMMUNITY MAPS

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.

COMMUNITY POST

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.

CREATORS

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.

MOBILE VARIATION

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

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.

COMMUNITY POST

Social features feel more natural on a phone, so this layout works well. Placing comments and likes at the bottom was intuitive right away.

CREATORS

Same as before—social features feel more natural on a phone, and the design stays consistent with the vertical layout.

BEHIND THE SCENES

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.

LET’S TALK

RESUME