Products & Markets Management Tool
Jupiter is a tool to help connect marketing and supply chains in global food franchise companies with over 170 US markets. It allows local markets to track campaigns and create detailed reports regarding their media-related marketing activity while giving visibility to upcoming promotions with calendar and quick-search functionality.
Dashboards summarize activity at all levels of the organization and track timeliness to ensure local markets are updating information promptly.
It helps multiple cross-functional stakeholders receive daily detailed information and status updates to constantly check and support activity that is vital for their business success.
Build a design system which could be used in a Platform Suite with a minimum of 3 different applications that were based on different functionality patterns.
Design Jupiter Platform to work on desktop and tablet without extra development time and be adaptive to large amounts of dense information.
Lead the team that was building the other applications related to the same platform suite to keep consistency and help drive the unified design language.
Process started with a project matching session inside the team, assigning each type of project from the suite to the right person. Each project was inclined towards different patterns and functionalities so the idea was to let each person pick the one they liked most to have a qualitative turnaround with positive reactions on both sides.
The general direction of the design system was a fast navigation process through dense information lists and heavy option groups — to solve this I simply reduced the number of patterns the user had to interact with producing a small cognitive load and an increase on the data at hand.
The first item addressed was the font which will be used in the whole suite of platforms keeping in mind one simple rule - to fit as much information on one line as possible given that the width of the working area was 1024px.
Weissenhof Grotesk from Indian Type Foundry was picked because it was a neutral grotesk but still had a bit of personality, it had a narrow width acting like a simulated condensed, full detailed numerals & overall tight spacing and kerning without it affecting legibility and readability.
There were 3 main patterns and 2 secondary which acted as a status indicator also.
Helped for faster switching between different sources of information and always acted as a parent container for tables and forms.
The table headers were used as the main interactive nodes, filtering, sorting, searching and also selection for multiple actions, behaving in a fixed way when the user would scroll information for fast accessibility. Secondary actions/actions per item were moved inside each table row, hidden or visible, depending on their importance.
Were used for fast navigation and to not lead the user through numerous pages to make the needed changes or updates. By using overlays, the user could do what he/she needed and return quickly to the active query.
Dealing with large chunks of information & being used in different countries with different internet speeds the platform had to have a status indicator to not leave the user in the dark while long queries were made to servers, to that end the footer was given 2 properties: the standard informational one and a status indicator one.
A very nice project presentation, one of the best I've seen from your organisation, very well organised, thorough, I'm very impressed!
