- November 2017 to November 2018
- UI, UX, Wireframing, Prototyping
Starting with a vision.
The first part of the project was very exciting as we were asked to work in a future vision of the platform to see how the final product would look and what features could be achieved within the project roadmap.
When I arrived to CloudMargin's offices, I joined the Norman & Sons team that had been working in the research and UX phase for a number of weeks before me, my task: to work on a high fidelity prototype that would demonstrate future system capabilities and also serve to stakeholders as a communication tool with clients and other firms to bring them on board for this exciting and new version of their existing product.
At this point another UI designer already worked doing some visual explorations which I took over in order to extend it an build the protoype in record time.
The dream team.
The project required finding the best tool combination in order to tick all the boxes and get the deliverables done in the right way, so we decided to go with the combo: Sketch + Principle + Invision.
I used Sketch to create wireframes and design a component library that is scalable, responsive and as dynamic as possible. A functionality among the new ones that Sketch has implemented - namely, linked libraries - allowed the team to work together by sharing the same set of components.
For the best performance in terms of animations and transitions we chose Principle for Mac. This app allows you to create a fast workflow that, once refined, translated into quick prototyping, well received by both the stakeholders and the development team, as we could test ideas rapidly before doing any code work. With Principle we created a desktop prototype with a resolution of 1920x1080 and more than 60 screen states in less than a week.
As there’s no such thing as a perfect prototyping tool out there yet, we had to choose a PC-friendly companion for Principle - as it only exports prototypes that run on Mac. Hence, the need for a tool to test user journeys and flows. Invision worked perfectly in this regard, as it is static in terms of animation but allows commenting and annotations that made it the perfect ally for the Principle prototype.
Prototyping a day in the life of a collateral manager.
The main goal of the prototype was to showcase the full workflow of a collateral manager during a normal day of work. They have a pretty well defined set of tasks and items to tackle during the day and the different items within the system have a lifecycle that updates and changes according to the actions triggered by the manager at a specific point in time.
So in order to reflect this on the prototype we created a script including several milestones that would be fully interactive within the prototype with different chapters so we could demonstrate the product capabilities.
After a milestone was triggered, the prototype would fast forward to the next chapter animating the different parts of the UI.
At this point we delivered:
- UX Documentation (in Confluence)
- High Fidelity Prototype (Principle)
- Click-through Prototype (Invision)
- Mockups for several screens
- Responsive designs for main views
Part of the UX work that had to be done involved re-visiting some UI elements and micro-interactions in a component-by-component basis.
From complex processes to simple solutions.
One of biggest issues with the user experience in their previous product was the vast amount of different data that need to be input into the system, we improved the way the information is presented on screen and simplify the interaction by including a side navigation into more complex dialog windows.
Presenting only the necessary information at once, and dividing processes into smaller steps helped reducing complexity and user errors.
Exciting and rewarding project from beginning to end.
I have to be thankful as this project involved lots of different responsibilities and challenges, I worked in both UX and UI design tasks trying to bring innovation and a refreshing note into a complex ecosystem. Working with a team that wasn't used to have a design team around was a very good opportunity to bring some best practices and design processes into play.
Before our team left, I help them to bring a full time designer into the company that would take things forward and continue to improve and extend new functionalities, using as a base the work that we did during more than 8 months.
I'm sure CloudMargin would keep improving their product over time, and now they have the design knowledge and necessary tools to do it with ease.