Mapping
We started the project doing a full-blown content inventory of the previous site, using a multi-level site structure to document each page, what content should be migrated and start conversations with our client on the objective and target audience of each of their products.
Sketch / Wireframe
Then, we proceeded to sketch out and test different options in Adobe XD. This process allowed us to quickly think about several ways to present the information and guide the user to the product they are interested in. XD's prototype functionality simplified the presentation process, making an abstract black and white wireframe, come to life as an interactive piece.
Design
Working in XD helped us get to understand the project and have a refined idea of the layout and content before starting the visual design process. With a more matured documentation for the project, the design process was a breeze. Being able to rely on the client's very complete brand manual, was also beneficial.
Production
Instead of jumping directly into Wordpress to implement the design, we worked in a couple of iterations: first coding everything in static HTML/CSS files using Bootstrap as a framework, to test how the content will look and work in different screen sizes and when we reached a version we where happy about, then proceeded to implement over Wordpress.
