Pre-design brainstorming exercise exploring product concept and language with the goal of aligning the team on definitions and direction, the result of which allowed for consistent storytelling when socializing ideas to stakeholders.
Early wireframe exploration into using polymorphic patterns for responsive treatments with break points. This proved to be a bad direction.
Early wireframe explorations into potential responsive treatments, layout patterns, and transitions.
Mid-stage exercise to determine optimal content creation process: Writing a succinct story describing purpose of page, supporting the story with a content outline written in a semantic HTML format, using the content outline to develop and form page structures that consume the structured content, and finally inheriting responsive patterns best suited to the content to optimize layout for multi-device use.
Exercise hoping to prove current direction was able to handle existing landing pages, by deconstructing the pages into cards and then down to structured content.
Wireframe explorations into potential multi-device header directives for handling site navigation, CTAs, branding, search, and other typical masthead elements.
Whiteboarding session to establish a test plan for usability sessions on proposed content, user flows, and themes.
Wireframe exercise to explore use cases and task flows for the usability sessions. These were used for review in order to get buy in before building out the interactive prototype used for testing.
Based on the results of the testing, theme content was refined. Following is an exploration into differentiation by showing how a single content outline visually changes when rendered by three different themes.
Mockups exploring device handling of responsive content.
Mockups exploring theme and responsive patterns.