We designed and developed a mobile engagement platform for digital marketing professionals. Linking their mobile app, they can manage pieces of contents and push notifications on mobile applications, and measure their impact as well.

 

My Role

I was responsible for turning the requirements into usable information architectures and interaction flows, as the functionality of the product was pre-defined by the product owner. Then, a visual designer translated my wireframes and prototypes into finalized screens and UI components. I also worked with developers in order to guide and inspect the compatibility of the final product with designs. As the product is in process of being shipped, the name is confidential.

Process

We kicked off the process with a competitive analysis of similar products. In this phase, we analyzed different solutions for the kinds of design problems that we would also face. We looked at different ways of utilizing and improving those existing solutions. Then, trying out possible ways of categorizing and displaying information, I sketched out each screen and flow on paper and whiteboard. I communicated the concepts to the product owner to make sure they fit with his vision about the product. As the concepts progressed, I also organized internal critique sessions with the design team in the company. After a few iterations of reviewing and refining the concepts, we created a detailed prototype and conducted user tests with potential users. The problems we identified in the tests were mainly regarding button and navigation labels, as well as some interaction flows in creating new push notification.

Information Architecture

One of the initial steps of the design process was to categorize each content category and create a structural framework that would be clear and also flexible enough to support the possible growth of the product. Here, I worked in collaboration with a business analyst.

 

Wireframes

Below are the wireframes that show the navigation and the general layout of each screen:

Interaction Flow: Creating Push Notifications

Creating a new push notification is an important functionality for the product. Working with the business analyst, we broke down the flow into 4 digestible chunks:

  • Deciding who to send the notification
  • Deciding where and when to send the notification
  • Composing the message
  • Previewing the notification

When designing the interactions, I tried to create an understandable order and hierarchy of actions. That includes each label is understandable enough, the possible actions and the result of the actions are clear to users.

Below are the interaction flows for these 4 steps:

Implementation

The following are the screens that are being shipped. I worked closely with our visual designer, who finalized the pixel perfect designs.

Save

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave