Responsive Marketing Website

Project Background

September 2014, I was tasked with designing a responsive marketing website for the DataSpark suit of products. There was no content or brand guidelines, but the product owner was keen to build the shell in which the content (still in production) would live.

My Role

The content production plan and sitemap had already been developed from a SEO centric point of view by my colleague. And while they were search engine friendly, they were not user centred. I worked with our geographically dispersed team consisting of a UI designer (Sydney), the product owner (Singapore) and developers (external agency) to deliver the best possible experience for our end customers.

The Outcome

dataspark-laptop-mobile-small
The process

Research

After meeting with the client to find out her exact requirements, i looked at the content plan and other artefacts already developed by the project team (including an initial sitemap, infographics, copy, case studies, whitepapers and video).

As part of this research phase, i also looked at the competitors in this space to consider what they are doing well and not so well.

Dataspark-Sitemap

Content is king

content-blocks

90% of the content was yet to be developed, which made wireframing challenging. While adding ‘lorem ipsum’ to wireframes is common practice, you really should be building your user experience around the content.

Starting with a mobile first approach helped us focus on the important calls to action and content grouping for mobile users, and what that might look like for the desktop audience.

Wireframing

Once everyone was in agreement with the priority and placement of content, i wireframed key screens (covering all template variations). Showing the content (as much as possible) in wireframe format helped drive more discussions about requirements with the client. For example she realised an Events and Media section would be necessary, in the future. After 4 rounds of feedback and changes, the UI designer brought the site to life with visual design.

This wireframing process was also necessary for the developers, who were building the site on WordPress and needed to define the CMS fields necessary for each template type.

The site was next prototyped and user tested, which lead to further refinement. The site is expected to go live early 2015.

wireframes