IHS Jane's 360 Responsive Web
Responsive web redesign of Janes.com to meet the needs of sponsors and site visitors while future-proofing for trends toward mobile.
Challenge
Redesign Janes.com by creating future-proofed UX and design templates that are scalable for other IHS open access portal websites of industry-specific news for professionals, sponsorship for advertisers and product promotion for IHS.
Solution
Create seven templates for a responsive website with two break points (three scales), based on Janes.com editorial content.
Process
Discovery & Scoping
Cardsorting exercise during the Phase 1 workshop
This project was conducted in two phases. Phase 1 was a concept project to get business buy in and Phase 2 was to expand the concept designs to be responsive and development ready.
In Phase 1, I assisted in conducting a two-day workshop to identify business challenges, users, user needs, priority features and design inspiration prior to delivering concept creative. In Phase 2, we had another workshop to revisit the concept designs, user personas and requirements.
Strategy & Research
To deliver the concept designs we conducted competitor research to help define the information architecture and analyzed customer research to create two personas based on current product subscribers.
For delivery of the development-ready assets we revised the information architecture, defined the grid and responsive breakpoints, expanded the number of page templates, and reviewed how the requirements mapped back to other industry news needs.
Defining breakpoints and considerations for the Janes360 responsive design solution.
User Experience
Based on updated requirements we delivered revised wireframes from the concept templates, created three new templates and designed the wireframes for the breakpoints for each template. The information architecture was defined by the director of user experience, but I lead the content prioritization and wireframe development process continually pulling the visual design and development teams in for feedback.
Homepage content definition.
Content prioritization chart for the homepage.
Challenges that arose throughout the project included designing desktop down due to an imminent deadline for a desktop site, handling advertising while scaling down, and creating a scalable navigation pattern given the expansive information architecture.
Below see wireframes for the multimedia page at three scales:
To resolve the challenge of wayfinding in the deepest section pages we used a slide out menu to access the top three tiers and utilized a filter to access the fourth tier, Air Platforms under the Defence section.
Visual Design & Development
Visual design for the large scale multimedia section page.
The concept design style was developed by Johanna Kenney, carried through by Nayong Park on the final designs. All art direction was done under design director Chad Wetherbee.
Development was carried out by the client's technical team under the consultation of our technical lead, Colby Dauphinaus.
Results
Enables readers to view content on devices ranging from 320px to 1140px width.
Responsive solution live at Janes.com. Template is used for other similar content marketing platforms under the IHS brand.