Cortex Report Product Design

From .Pdf to SaaS Platform

Project Cover-01.png

My Role

Product Design Associate


Photoshop, Illustrator, Figma


Cortex Internal team, with guidance from product design mentor in Boston TechStars

Project Time

January to April 2020, 4 months

Project Overview

Cortex is a leading marketers that built an artificial intelligence (AI) platform to fill the need for a dedicated social media data analyst. Our platform automates content calendars, content briefs, and competitor analysis. With the guidance from product design mentor in Boston TechStars, we iterated our report product from .pdf version to SaaS platform. This case study shows some design process I have participated in.


Interactive Product Demo

Project Timeline


Part1. Design Sprint

This was a 3-days design sprint, we mapped out Cortex core problems, and voted for important problems we were going to dig deeper.  Then we formed into 3 teams to focus on different areas: 1. Login 2. Data interactive 3. Report+. I participated in the team 2 from sketching out solutions to building prototype, we conducted user interview in the following days. 



Objective: Map out the problem and pick an important area to focus

Details: Brainstorming, HMW

Based on current social media market and what Cortex helps, we proposed core problems based on customer needs. Then we voted to prioritize the problems that are important and can be implemented within a short-term period. We listed two problems had most vote below:

  • Customers know what works, but they don't know why.

  • Content Customization.


According to our core problems, we put up with HMW questions to turn challenges into opportunities for design. How might we...

  • Make better visualization of larger dataset?

  • Make the UXUI flexible that is able to personalized to the customers/organizations?

  • Make these accessible?


Ideat & Decide

Objective: Sketch out solutions and make decisions  

Details: Whiteboard

We were planning to optimize our report services from three perspectives

  1. Login (smooth user flow)

  2. Data Interactive (Customized data) ---- Which I was in

  3. Report + (Better visualization of all reports)

Using whiteboard to show new user flow with our implemented feature. I listed BEFORE and AFTER to show the differences.



  • Receive request from customers​

  • Report generated

  • Email report link

  • Customer get report


  • Receive request from customers​

  • Report generated

  • Email alert

  • Login to report library

  • Data studio to manipulate dataset



Objective: Hack together a realistic prototype

Details: Prototype in Figma

I collaborated with team members to create data studio platform in Figma. The main concept in data studio are:

  • Customer can play around by filters to test different result (Which solve the problem they can know why our analyzed result works)

  • Customer can using data studio to create customized social media content by understanding the dataset


User Testing

Objective: Collect feedback from real customers

Details: note-taking

My team members conducted user testing with current customers and prospects, below are some quotes they said during the interview process.

The Good

The Bad


Key Takeaways

  • Design sprint is an efficient and effective way to test our design concepts. According to this design sprint, we brainstormed together, built quick prototype, and validated our prototype with real users. During this process, we cut off some unnecessary discussions.

  • Users should always be in centered. Our internal team really love the data studio idea, as content analyst, we are willing to try different combinations to see different results. But users are always need intuitive decisions, data studio at this time is not a good point.

  • Enjoyable and resourceful process. Design sprint is a good opportunity to sit with all stakeholders and discuss together. That's so enjoyable and it's also a good learning opportunity for me.

Part2. Combined Design Decisions

After the design sprint, I collaborated with growth manager, product design lead, developers, COO, and CEO to discuss the most reasonable design decision that meet our current priorities and conform to previous user testing results. Finally, we narrowed our scope down to the interactive report platform at this stage.



Objective: Redesign the skeleton of interactive report platform

Details: Whiteboard, Atomic Design

For improving the convenience of our design, we followed the atomic design methodology for creating design systems.


Overview of Pages connection.


Define Organisms, Molecules, and Atom pages

I came up with the expanded page idea to show more trend information



Objective: Create prototype for user testing

Details: Prototype in Figma

Our product design lead Ethan Pierce created the first version of our SaaS platform, main pages showed as below.

MacBook Pro - 12.png
MacBook Pro - 8.png


Objective: testing with our current users and prospects

​Consolidated Notes from Users

  • Not easy to navigate.  Our users mentioned that it feels interesting to bigger companies maybe, but they care more about single reports. 

  • Don't know what keywords should be searched. This is caused by the same reason as the first one, because the information presented on each report is clear enough, and they don't know what extra information we can provide. Therefore, they have no idea about searching keywords.

  • Feel tedious when get through a lot of report pages. Because our report pdf normally has more than 20 pages, and there is no clear navigation can direct them when they review reports. 

​Conversation with Engineers

  • Cost-efficiency.  This is the first priority of our team. We should try our best to shorten the design-to-development cycle. 

  • Clean UI. We were looking for some template that is clean and components can be reused.



Objective: Redesign by adapting Metronic theme

Details: Prototype in Figma

After we ended our journey in Techstars, I took the responsibility to improve our product from former testing results and communication with developers and COO.

Login Page.png

Better Login. Actually, this is a web SaaS platform, there is no need for uses to download the software on their desktop. Users can login or sign up to their account according to the website link.

Report Library.png

Clear and Clean Report Library. We decided to list users' report repository default by status (Report Created Time). It's easier for users to find which report they are looking for by different status. We also deleted the search bar, given the negative user testing results.

With Right Info.png

Left Navigation in Report Viewer Page. We got the inspiration from user testing, the clear navigation in the report viewer page can lead them play around within the report. We also added the quick share and download button if they just want to share or download single page.

Click Dig Deeper 2.png

Dig Deeper for More Information. Because a large number of users mentioned that they are looking for some way to learn more detail or the nerdy data, but don't want the detailed information to impact their experience when they are viewing normal report. The dig deeper button and pop-up design make it efficient and convenient to see detailed data.


We streamlined our design system with the Metronic Theme, I created the MVP prototype in Figma.