Designing a ‘Latest Updates’ modal popup

The Project:

One of the projects I am leading at TCI is to develop a new feature that will allow our users to view the latest updates in our app.

Tools & technologies used:

  • Adobe Photoshop (UI design & mockups)
  • Balsamiq (wireframing)
  • Sketch (wireframing)
  • HTML/CSS (mockups)
  • InVision (prototyping)

Considerations:

  • How much information do we want displayed? Software changelog style? Clean and concise style?
  • What kind of content will be featured?
  • Are there any existing functions & logic that can be reused in building this feature (to save time and resources)?

Looking at different applications such as Slack, Discord, and Adobe CC– it quickly became clear that the clean & concise style was preferred and made the most sense as a front-facing feature in our app.

We wanted our most biggest changes to be displayed in this modal as well as our most important quality of life improvements.

We also just redesigned our modals in the app so using a modal was the best method of approach.

Design #1: Horizontal Slider Modal

This slideshow requires JavaScript.

Simple design with placeholder fonts to demonstrate this style’s simplicity and usability.

Pros:

  • Each feature gets time in the spotlight
  • Design is not cluttered
  • Easy to build

Cons:

  • Visibility: User only sees one feature at a time (user may close out of modal after seeing first feature)

Design #2: Horizontal Card Slider Modal

mockup_announcementsCard2

Pros:

  • Modern card layout look (inspired by Facebook design)
  • Visibility: user sees multiple features (before closing out of modal)
  • Easy to build (function & logic already exists within app)

Cons:

  • Though card layout look is modern, the content is cluttered

 

Design #3: The Compromise – Card Scrolldown Modal

mockup_announcementsCardModern

Pros:

  • Clean, uncluttered look using modern card layout
  • User sees multiple features before exiting out of modal

Cons:

  • Horizontal card designs are not common (usually vertical)

 

Next Steps:

I’m currently working with multiple teams (Marketing, Product Development, Operations, CEO) to finalize designs for testing.