Conceptual stage
Color palette and layout ideas
The project only had a single established base color, a darker blue shade used in the existing logo. Based on this, we explored a primary color approach by using shades drawn from this blue and bright contrasting colors like oranges and reds to create a visual dynamic. We conducted thorough research on various strategies in this direction, looking at competitive products in the charting vertical. To expand our ideas, we enlisted the services of Mid-Journey to explore additional possibilities.
Prototyping
Functionality prototyping
Functionality prototyping
Functionality prototyping
We designed an easily modifiable sketched interaction skeleton in Adobe XD for the product, from site navigation to interactive customer forms. This prototyping allowed all stakeholders to comment on functionality that was easy for us to adjust. We could then plan and define asset classes and naming across the product from the final flows, allowing for easy model expansion in future rounds.
Layout prototyping
Functionality prototyping
Functionality prototyping
The project included a lot of data points and informational elements such as charts and indexes. Each layout was, in turn, mocked up in multiple formats in XD, from extensive detailed views down to small blocked stacked condensed forms. Keeping the consistency of information was a significant challenge to retaining the crucial plots across this scaling. To manage this, we created several layout examples in XD before we attempted to design these in Figma.
AI generated project imagery
Get our Newsletter
Join us for an exclusive look at trends and tools from the AI generative world and online digital design with our newsletter, curated for clients and colleagues of Crown ADAM AG.