Morgan denner

Morgan dennerMorgan dennerMorgan denner

Morgan denner

Morgan dennerMorgan dennerMorgan denner
  • Home
  • About Me
  • Approach
  • Examples
    • A Language of Teamwork
    • Empowered Team Culture
    • Medical Billing Flows
  • Contact

Case Study - Chat App

2021


Lead UI Designer

Skills Involved

Client and Business

When there is no internet, it's currently impossible to send messages or files unless you have wifi or a hotspot. This application operates over a technology that allows to send files or messages when you don't have internet. 

Team

I took Lead UI Designer role on the team. There was a team of 3: me, a solutions architect, and a developer. I took part in backlog management and UI design.

Product

This is a Windows 11 tablet application specifically built for certain tablet devices that would host the software.

Timeline

10 weeks

Process

The team ran Scrum managing two-week sprints.

Background

  1. Current app allows communication over email, chat, or file transfer
  2. Users use specific laptops to connect to radios in order to operate the product
  3. The product requires custom setup ahead of usage
  4. The product requires heavy training to use today

Prior Phase Research

  1. Navigating the current app can be very confusing for inexperienced users.
  2. Training is not enough to master the current product, and it takes a lot of “guess and test” in the field to become an expert.
  3. Users often get confused with understanding how to troubleshoot when things go wrong.
  4. It’s not intuitive to understand which other stations someone might be communicating with.

Problem Statements

  1. HOW MIGHT WE make the product easier to learn and use for novices?
  2. HOW MIGHT WE modernize the product experience?
  3. HOW MIGHT WE create feature flexibility to apply to various situations in the field?
  4. HOW MIGHT WE rely more on visuals in the experience?
  5. HOW MIGHT WE create more consistency and uniformity for features and functions in the app?
  6. HOW MIGHT WE support users using this product without being experts?
  7. HOW MIGHT WE save users more time when troubleshooting and configuring?
  8. HOW MIGHT WE help users more easily identify who they’re communicating with?

Important and Common Features

I prioritized the features in the layout based on the most common and important features.


Most common or important

  1. Sending messages
  2. Receiving messages


Less common or important

  1. Message queue
  2. Address book
  3. Logs

Information Architecture

Version 1

Version 3***

Version 1

There are no menus; everything is on one page, and all sections are given equal treatment on the screen. The user can maximize to see one section at a time.

Version 2

Version 3***

Version 1

The menu is on the top and he sections are given "weighted areas of different sizes. The user can maximize an area to focus on one thing at a time.

Version 3***

Version 3***

Version 3***

What I decided upon in the final version. The menu is on the side and the sections are given "weighted" areas of different sizes. The user can maximize an area to focus on one thing at a time.

Heuristics I Applied

Keep Users on the Same Page

Help Users Follow a Path to Completion

Help Users Follow a Path to Completion

Each section has lots of features with minimal space, and the screen size is limited without any ability to scroll. Users can focus on a single task at a time by maximizing a portion of the messaging section. This helps to avoid distraction when someone is performing a task. When they’re done, they can minimize to go back to the default view. 

Help Users Follow a Path to Completion

Help Users Follow a Path to Completion

Help Users Follow a Path to Completion

The layout was designed for users to switch back and forth between their most common tasks: seeing the messages received and sending new messages. The secondary things (queue, menu, etc.) are lower in the information hierarchy and under the adjacent "send/receive" area. This allows users to follow an easier path to completion.

Progressive Disclosure

Progressive Disclosure

Progressive Disclosure

Instead of making everything available all the time, the new design focuses on initiating more details or “advanced features” that aren’t common 80% of the time. This helps more users focus on the most important tasks without getting distracted, but allows more advanced users to access the features they need. 

Show visual feedback

Progressive Disclosure

Progressive Disclosure

There are several examples of showing some kind of response to the user when they perform an action. This helps users understand what the system is doing and avoid confusion as to whether their task was a success. 

UI Designs

Copyright © 2025 Morgan Denner - All Rights Reserved.

  • Home
  • About Me
  • Approach
  • A Language of Teamwork
  • Empowered Team Culture
  • Medical Billing Flows
  • Contact

Powered by user-centered design

This website uses cookies.

We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.

Accept