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.
OCN Host Web Redesign
11
102
2
Published:

OCN Host Web Redesign

11
102
2
Published:

Tools

Adobe XD
Adobe Photoshop
Copyright Info

Attribution, Non-commercial, No Derivatives

Read More