Colorful line drawing of two hands showcasing a laptop. Visible on the laptop is a screenshot of the new Tall Poppy web app, complete with colorful illustrations and a clean layout.

Web App Design

Tall Poppy is a security company created to help people stay safe in the face of online harassment. The app is our flagship product, a curriculum based journey through implementing security processes to protect yourself online.

Role: Visual design, prototyping, illustration, accessibility audit.

Intro

The Tall Poppy App before I took over relied heavily on modals and animation in its UI. I wanted to move us to a page based layout in order to increase accessibility and make it easier to navigate around the app. Additionally I rebuilt and expanded on our design system and created a variety of new features for the app as needed.

Goals

  • Remove modal windows and find an alternate way to display content.
  • Redesign the dashboard page so that new content can be easily and quickly added to the app.
  • Expand the design system and utilize figma components so that features can be mocked up quickly and easily.
Screenshot of the Tall Poppy app before its redesign. The screenshot features repeated cards and a green and purple theme.

Planning a New Dashboard

The dashboard page I inherited was getting quite long and unwieldy in terms of content. Every time we would add a new module, the page would get longer. Additionally, each card would open up a modal window. Users were having trouble realizing that the content in these modal windows scrolled and would leave checklist items unfinished. The section at the top of the dashboard did not make the best use of that area either.

Screenshot of redesigned Tall Poppy app, featuring a progress meter, collapsible cards, and a color warm theme.

I decided to place each module into collapsable sections, shortening the page considerably. For the section at the top of the dashboard I placed the card for the module that the user was currently working on, making sure it was front and center.

Two screenshots, comparing Tall Poppy's app before and after redesign.

I got rid of the modal window altogether, opting instead for a full page layout with navigation to the left. This not only increased accessibility, it made it easier to navigate through the app without having to return to the dashboard page first.

Screenshot of a Figma screen with the heading Interactions & States. The screen shows a table of designs for various button schemes and states.

I rebuilt our design system and expanded it, creating all new components and colors. For colors I made sure to meet minimum contrast guidelines in order to maintain accessibility.

  • Three screenshots of the redesigned Tall Poppy app, showing the app's responsiveness at different viewport widths.

Conclusion

Working on the Tall Poppy App was one of the most fulfilling projects I’ve ever gotten to participate in. It was challenging and intriguing, presenting new problems regularly and forcing me to think outside of the box to solve them. I gained many new skills in pursuit of making the app more user friendly and accessible.