UX / Product Design

An interactive gallery, media database, and submission tool for an urban planning documentary about Hank Dittmar


Hank Dittmar, a recognized figure in urban planning, renowned global urbanist, sustainability advocate, lyricist, author, and father, passed away on April 3rd, 2018. In commemoration of his impact, a group of Dittmar’s peers and family members (the DIY organization) set out to make an urban planning documentary cast through the lens of the late luminary’s life. I was asked to design a digital gallery for the project to store and showcase media submitted for inclusion in the final film.


  • UI Design (90%)
  • UX Design (95%)
  • UX Research (100%)
  • Visual Design (100%)
  • Development (70%)


  • HTML / CSS / React
  • Figma / XD
  • Adobe Suite
  • Github / Jira
  • VSCode
  • Maze

UX Process

UX Process illustration
UX Process Map
Previous Image
Previous Image

    One of the central goals of the DIY project is getting users to participate by submitting media to the gallery. The ease and speed with which users can understand the project’s intention and how to participate will determine how effectively they can garner submissions and meet said goal.

    How can we clearly communicate the intention of the project and inspire visitors to contribute?

    Stakeholder Interviews

    After interviewing stakeholders and reviewing project requirements, I was able to outline some of the core features of the project. I organized these features into a hierarchy of primary versus descending components to help guide my research methods and paint a broader picture of what needed to be defined. This prioritization strategy assisted in later design stages, as it narrowed the scope of potential design solutions, which resulted in a more compact ideation and experimentation phase.

    Hover over a feature to reveal its corresponding rank.

    Tap a feature to reveal its corresponding rank.

      Feature Icon
      Call to ActionA description of the project that invites users to participate by submitting media
      Feature Icon
      Digital GalleryA gallery where users can browse media submissions divided by content categories
      Feature Icon
      Submit PageA page where users can upload and submit media for the gallery
      Feature Icon
      Media AuthorizationUser acknowledgement of media ownership and approval of media use
      Feature Icon
      Contact InformationContact information for users that submit content to the gallery
      Feature Icon
      Access ControlRole based privileges for reviewing, approving, and editing submissions
      Feature Icon
      Media MetadataRequired details that provide a basic description of the content being submitted

    Scenario Mapping

    Information from stakeholder interviews allowed me to craft primary and secondary user personas and stories. That information was then used to conduct a scenario mapping workshop for primary and secondary tasks. The final scenario map added contextual breadth to the initial project requirements by outlining essential tasks, potential complications, and future design solutions.

    User Persona - ContributerScenario Map
    User Persona - ViewerScenario Map

    Comparative Analysis

    I conducted a comparative analysis to identify trends and opportunities for best design practices. Given the unique purpose of the DIY project, I chose to represent direct competitors with entities that used a similar online presence, either in the form of a digital gallery or a non-profit website, as they both require a clear statement of purpose to propagate user participation.

    The analysis assessed each site’s ability to create a memorable visual presentation, effectively communicate the organization’s mission statement, and incite user interactivity. I recapitulated the assessment criteria into ten unique standards or practices. Using a 10-point scale, those comparators that scored a five or above were marked as exemplifying each respective standard or practice.

    Comparative Analysis

    Observations & Opportunities

    After reviewing the results of the analysis, I was able to extract four overarching similarities among comparators with the highest scores. The following findings were used as inspiration for best practices during later stages of the design and revision process.

    Loud Color Palette
    Striking Typography
    Trendy Web Design

    Sitemaps & Userflows

    I created a sitemap that inventoried all the necessary project pages, followed by a user-flow chart that established the navigational and hierarchical layout of said pages. The user-flow chart underwent several rounds of stakeholder reviews and subsequent revisions before arriving at the final architecture.





    Moodboarding & Ideation

    Visual exploration started with the creation of a mood board that coalesced media from two distinctive subject areas pertinent to Hank Dittmar's background: punk and urban planning. I analyzed the sentimentality and aesthetic of each motif before recognizing a point of convergence in brutalist design.

    Evocation CriteriaMoodboard

    The brutalist style epitomized the architectural focus of urban planning with an assertive flare akin to that of the punk ethos. Brutalism established itself within the digital realm as a popular web design trend in the early 2000’s and made a recent resurgence in 2019. The signature black and white color scheme provided a suitable backdrop for loud pops of color. The geometric lineaments could effortlessly translate into a clean, minimalistic layout while creating an opportune canvas for striking typography.

    Brutalism quote

    Mockups & Prototyping

    Design kicked off with exploration of different structural layouts for the home page. As the first thing users would see, the page needed to create a statement, rouse inquiry, and provoke exploration. I experimented with various fonts and oblique formations curated around an embedded navigational approach, wherein any click made by the user would redirect to a relevant page of the site and encourage interactivity.

    High Fidelity Mockups

    High-fidelity mockups were produced for two design variants, each with distinctive gallery layouts but with a shared design for the Home and About sections. Criteria for the Submit page was still being defined at this time, so the section was excluded from the mockups until later stages.

    Design A
    Design B


    Design B was selected after both options were reviewed and compared using A/B testing. This design was preferred due to its higher ease of use ratings. Although Design B was less interactive than its counterpart (Design A), its comparative simplification better suited primary users who have lower patience for abstract design models. The high-res prototype and UI kit was then completed for Design B in preparation for the build phase.

    Style Guide
    Prototype Boards

    Remote Unmoderated Testing

    User testing was conducted with Maze and included a combination of opinion scales, multiple choice, and yes/no questions. User types were split 60/40 with 60% being secondary users (viewers) and 40% being primary (contributors). Testers were asked to complete 6 tasks and rate their experience by reporting the perceived difficulty. Task rating follow-ups required users that reported a neutral or negative rating to provide specific details about what made the task challenging and how any task-related features could be improved. The test concluded with subjects being asked to assess the entire scope of the application with a modified Ease of Use Survey and User Experience Questionnaire.

    DIY Testing Overview

    Results & Findings

    100% of users were able to understand the purpose of the DIY gallery. The chief complaint among all users was that the application seemed unreliable due to poor video playback latency and media loading times. The second most common criticism was that the application seemed cluttered.

    An equally popular, yet positive insight, was the purported novelty and stimulation of the application’s presentation, with the highest itemized UEQ ratings being creativity, inventiveness, interestingness, and attractiveness. The application’s text size and legibility garnered unanimous approval from primary users, while positive sentiments from secondary users largely congregated around satisfaction with the application’s overall appearance.

    UEQ Results by ScaleUEQ Mean Value/Item Results
    Polygon GraphicPolygon Graphic

    of below average usability ratings stemmed from the submit feature

    Polygon GraphicPolygon Graphic

    users understood the main functions and underlying objective of the application

    Polygon GraphicPolygon Graphic

    of users felt confident using the application without technical support

    Polygon GraphicPolygon Graphic

    users found the application to be unnecessarily complex

    Polygon GraphicPolygon Graphic

    of users felt that the application’s functions were consistent and well-integrated


    Several sub-standard usability ratings converged around difficulty using the media gallery’s adjunct features (sort and filter). Most of the users that reported confusion over these features didn’t review or access the application’s tutorial during their test session. This factor was considered during the first round of improvements, where we chose to focus our efforts on features that offered clearer feedback.

    The lowest task assessment ratings from Secondary users centered around the upload component. This component was used to submit content for inclusion in the gallery and required multiple sub-steps. Users struggled to deduce which steps remained during the task process.


    We installed a loading bar on the submit page that appears when a user submits batch submissions or media with large file sizes, where the heavier data transfer elongates processing time. The loading bar illustrates that the transmission is still in progress and reduces the probability of a user misinterpreting the delayed confirmation status as the application freezing.


    Contrast Graphic
    Contrast Graphic

    The original Review page auto-populated the titles of each text and audio media item as the focal point for the tile’s default and hover state. We changed the hover state of text media tiles within the Review page to include a graphical preview of the featured text document. This update created a visual distinction between text and audio items which otherwise look quite similar. We applied the same update to the Gallery page for consistency.


    We modified the note that instructs users to fill out the form that accompanies each uploaded media item (a pre-requisite to submitting). The styling was adjusted to have a higher contrast and only appear during applicable stages (when an item has an incomplete media form). This modification supports a more gradual task flow, where presenting the instructions in incremental steps gently guides the user and reduces the potential for confusion.


    Contrast Graphic

    The original blueprint for the Gallery and Review pages didn't provide an option for deleting media, editing metadata after review approval, or removing media from the gallery without accessing the backend. We added an access-controlled delete button to media items within the Review page and a revert button to media items within the Gallery page, to accommodate those functions. These updates allow admins to move media items back and forth between the Gallery and Review sections where they can be edited or deleted as needed.


    The revised product should be tested with stakeholders and a new batch of users to assess the impact of the cited improvements and detect any lingering sub-par usability ratings. Usability tests should also be updated to require that subjects review the tutorial prior to beginning assigned tasks. This adjustment would clarify the origin of poor ratings associated with media gallery features from the first round of testing.

    A tutorial shortcut button should be added to the lower right-hand corner of every page. This button would grant users one-click access instead of the two steps currently necessary from its location within the main menu. Additionally, the tutorial would be more intuitive if it was programmed to automatically load content related to the page the user is on.

    Utilizing a CDN and other streaming optimization tools and practices would improve video playback. Current data-handling is insufficient for supporting smooth previews of larger video files, which are expected submissions once the project is live.