• Van Nguyen

Redesign a monitoring solution for electronic communication- UX Design Sprint (Part 3)

Updated: Dec 29, 2018

Designing The Wireframe Prototype

1. Wireframe Prototype 1: Google Material

  • Dashboard: Follow up with the Google material style to display the metric analytic as a widget.

  • Main Menu: Write down all the core features like the navigation sidebar.

  • Messages: The message will be displaying as a list view.

  • Search: Search is one of the main features and lay on nav sidebar.

2. Wireframe Prototype 2: Work-space Concept

  • Dashboard: The concept is all about the flexible workspace 

  • Messages: Using the same concept to display a message list with wireframe option one.

Final Wireframe Prototype: Match work well with option 1 and 2 together

As discussed with team member and client, We come up with:

Main Menu Navigation 

I kept the main menu as a sidebar to navigate between each core features. Even though in somewhere on website, clicking on the menu item and easy bring you to expectation page. Besides that we also made a flexible way to collapse and expand the menu bar, giving our user a decision to viewing full components inside instead of  only fixed view.


Widget Data— We collected an overview of reports and metrics our user care about that. A widget is displaying the data of all track messages, social communication post and privacy policies.

Moreover, I added a widget on the “What I’ve done today”, it helps user to concentrate on the working tasks. This is a light reminder on need to solve the task on a specific day, push more productive in the organization.

Archive Message Listing.

Message List — The message will be displaying as a list view. Besides that, we also take two main actions of the message as Approve and Move to Folder on the message list.

Besides, we took two main actions of the message as Approve and Move to Folder on the message list, for sure the action will depend on the message status.

Multiple select message—We gave our users different access to any actions on many select messages. By the way, they don’t need to open on each message details anymore. When scrolling down, the actions bar will be floating at the bottom. It helps our user easy to choose and interaction on the message focused on.

Quickly view — Hovering on each item will show the popup to view the quick content inside.

Message Details

When the user click on the message item, the content will be dimming. Thus, the popup details are floating from the right to a half of page. It helps user convince act on the specific message but still have an overview on the rest of messages.


Because the search is the important feature that our client wants to bring out. Thus, we wrote down the high-level search component as the sidebar. Yet, we still have a way to collapse and expand the search bar like the new experience on menu sidebar. 

When our user applies to search results, they can see the results like tag-lines. Addition, they can remove the results that they don’t want to apply anymore.

1 view0 comments