This case study focuses on an enterprise software design project for a group of global financial consultants. The goal of the project was to redesign an ideation and risk management platform to help the group work with clients to create, discuss and audit many potential cost-saving ideas.
Once officially hired for the project, I worked with a primary stakeholder to do research and put an initial package of information together for the group as a starting point for the project.
Kickoff meetings and workshops are great as it gets everyone in the same room to take part in very early steps of the project definition and design process. Research from the previous step helped set the stage for these workshops. The goals of the workshops were to discuss data intensive interfaces and the design process. As well as to create some early definition around visual aesthetic preferences and do collaborative design together. Below are a few activities from the workshops.
Design pattern reviews are helpful in educating the group on how and why specific design patterns are employed in certain contexts. Since this project included data intensive design, we reviewed data intensive UI’s to understand common patterns and have a general conversation about how these types of interfaces can be successfully designed.
The 20 Second Gut Test is a great way to establish early aesthetic preferences in visual design for project. I collected various UI designs with different stylistic executions. We used this exercise to quickly narrow in on three that the group preferred. When it was time to start the visual design process, this step made it much easier and faster.
Design Studio is an exercise where key stakeholders of different roles and or backgrounds are engaged to take part in a focused and time-based sketching exercise. We used design studio to sketch design ideas for the Workspac of the UI and one of the main screens. I then took these sketches into the next round and produced low-fidelity designs.
These low-fidelity designs are sketch style designs that are quick to execute but provide enough detail so the group can have a meaningful discussion and thereby provide useful feedback for the next round of designs. I used the pen sketches we created from our collaborative design sessions to quickly produce some higher fidelity artifacts.
This phase of work included multiple rounds of design for a multitude of screens and views, which took course over the period of two weeks.
These high-fidelity designs are fully detailed wireframes, including the proper grid layout, fonts and font sizes. The only difference between this and a visual design is color. These designs allowed the group to see in full the platform designed in full detail.
This phase of work included multiple rounds of design for a multitude of screens and views, which took course over the period of three weeks.
We started front-end development when the high-fidelity wireframes were complete so we could design and develop on two simultaneous tracks. As the wirefreames were being coded, I worked through the visual design treatment. When complete we simply updated the CSS to reflect the visual style.
I paired, remotely with my friend and colleague Rich Hollis in London for the front-end development. While he was in London and I was in the United States, we shared a screen as he coded and I provided design guidance in real-time to ensure the front-end development matched the final designs.