It’s common for marketers to use a dozen different tools (third-party analytics apps, custom back-end systems, elaborate Excel spreadsheets) to track program performance and activity levels, and still only achieve a cursory understanding of how marketing initiatives connect with business goals.

ReportGarden helps online ad agencies create analysis and performance reports for their clients. The company Does this by linking their AdWords, analytics, bing ads accounts using APIs and loading data into their reports. The Statlab pulls data from multiple sources in real-time and displays it in a single location. The tool provides an at-a-glance summary of how campaigns are performing, giving both marketing specialists and C-level executives a single source of truth, and the ability to drill down for deeper investigation.

It’s a herculean task for the marketers to use more than a dozen different tools like analytics-apps, custom backend systems, and the number of excel sheets to track down the performance, and still, they will be able to achieve only some of the desired results.

This leads to the design of the product which can be employed by modern marketers. One of the major concerns was to create a product that is visually appealing and easy to read and also displays key marketing metrics. We also wanted to incorporate the tracking functionality so that the marketers can act on the data immediately and improve the performance.

In the Discover phase, we spent a lot of time analyzing the requirements. We followed the standard user research methods and combined them with contextual and individual interviews. In this phase, we started with documenting our requirements and conducted 1:1 user interviews. The user interviews were a core part of our research methods. It gave us a great way to gain fundamental knowledge about the problems our potential users were facing. Rather than just asking the users what they like and dislike we focused on trying to get to the core of what the users are expecting from the platform. we proceeded further for a competitor analysis where we tried to know about the products and services which can be our potential competition in the market out there. Once we finished the competitive analysis we spent a good amount of time in brainstorming and whiteboard sessions, Along with the internal white-boarding session we ensured that we spent a good amount of time with the client in the whiteboard sessions. These sessions were more than just ideas; it is during the whiteboard sessions that it opened a lot of new ideas for the team to explore.

Once we had a base level idea on how to build the product we wanted to freeze the requirements and features that are required to build our world-class product. We used mind-maps and user scenarios to connect the dots systematically. During the second phase of the design process, we started creating user personas to synthesize the research and finding we collected. The user personas worked as a guide for ideations and helped in getting a better idea of understanding the users, the needs of the users, and the goals of the user. Once we were clear about the user needs and their expectations from the product we wanted to interpret the user flow. we tried to create an overview that describes how the users can navigate in our product. We created flow charts that helped us in visualizing the routes users take when they are using the platform. Once we completed the Define phase we got various ideas and material which we could use as a reference to build our actual product.

Soon after having a complete direction on how the users interact with the platform. we wanted to create a blueprint, A  visual representation of the product’s infrastructure, features, and hierarchy. by creating the information architecture we were able to provide a bird’s-eye view of the entire product to the product and as well as engineering teams. based on our Information architecture we started sketching our ideas.  We used simple pencil and paper to create a low fidelity wireframing, this helped us in engaging all the members of the team to experiment with the basic wireframes and helped in reconfiguring the elements and most of the time it also helped us in coming up with a new approach. Once we have put all our ideas together, We wanted to make a low fidelity prototype to understand the possibility of the design, while considering the most cost-effective and quick methods, we wanted to test our idea by paper prototyping. Paper prototyping was great for exploring design possibilities. The biggest advantage was we could try as many times as we wanted and when things didn’t work we could start over again.

We wanted to ensure that visualizations are easy for all users to understand the analytics. we wanted to make a special case for non-technical users, to allow them to participate and understand the analytics process by compiling data and visualizing trends and occurrences. After getting a clear idea of what we wanted to build the next big task was to materialize these paper sketches into high fidelity wireframes. The high-fidelity wireframes also helped us to validate the complex interactions during user testing. We ensured that the wireframes provide realistic representations of what the product will look and feel like. After the high-fidelity wireframe, the fun part was making a clickable prototype using Adobe XD, for most of the design tasks we used Adobe XD to make it convenient to access across various windows and macintosh machines. Soon after having a clear idea of how the product has to be built, We proceeded further to make a mood board. setting the mood is a very important step to make a perfect product. It helped me and stakeholders get on the same page for the visual aspects of the project.

With the mood boards and high fidelity wireframes in hand, we were clear where we’re heading and how the final product would look and feel like. We wanted our tool to be easily customizable by dragging and dropping widgets onto the interface. we restricted Certain higher-level data may be restricted to managers or executives using role-based access controls. Another major aspect of the design which we took care of is scalability, We ensure that the platform can expand as the data on the project grows and become more resource-intensive. We used the material design standards to design our overall platform, however, the UI part was quite complicated to get it right. we ensured that the UX and UI both stayed very close to each other. we were strict on colors, spacing, padding, font size. What we often did is we created a UI style guide, this helped us a lot to keep our designs consistent. The UX part is not finished there yet, we still wanted to ensure the usability of each UI element was accurate.

Once we are clear with the screens, We proceed further to make the UI specifications which is the main source of implementation information for how the software should work. We created the UI specification to bridge the gap between product management functions and implementation. One of the main purposes of a UI specification is to process the product requirements into a more detailed format. We ensured that the document described how the requirements are implemented in practice. To ensure that this process was smooth we used Zeplin, Zeplin helped our developers to see details of the design without opening the design files, hence made the overall design-developer sync easy. After the UI specification and asset creation we did an initial round of user testing before launching the product to the actual users, we aimed at a smaller group of participants since the aim of the session is to gather qualitative data. We used remote testing tools like canvas flip and google analytics to analyze the flow and study the heatmaps to be clear that the goals of the user are met.