Women’s Fitness – User Experience and User Interface Responsive Site Design
Women’s Fitness – User Experience and User Interface Responsive Site Design and the back stage admin UX was commissioned by Citrus Media in May 2015.
Citrus Media needed an online platform that could have its content easily created by staff, drive revenue through advertorials and advertising with bespoke and standard ads, cater to all reader types, who will be accessing the site across devices in different contexts. Focussing on providing an easy to read and exploratory navigational experience, with a photographic rich site that enabled chance discovery (like flicking through a magazine).
The project starts with a process of defining the challenge and desired outcomes. This includes understanding; all users and the contexts within which they will be experiencing the site, the business needs, and brand objectives. For external users, this could mean people browsing the site on a device whilst commuting, or perhaps in the kitchen following a recipe, someone in the supermarket finding ingredients for one of the recipes, or a user on an exercise mat following a set of exercises. For the business and brand objectives, this deals with the back-stage content creators who need to use as straightforward content system without mucking around with a technical WordPress backend, and other content and marketing managers who will be dealing with the advertising side of things.
Below I’ve outlined some of the processes that I undertook to create the User Experience and User Interface Responsive Site Design for Citrus Media.
User Experience (UX) Design
I started off working with the client, editor, writers, and other stakeholders on defining what existed in the published magazine and other content they would like within the site, and also ensuring the business model and possible revenue channels were covered. Quickly fleshing out the skeleton of the site structure, content, and broad user flows.
Women’s Fitness – Front-stage page structure
Women’s Fitness – Content creators, User flow diagram
With the structure starting to tick all the boxes with what would be desired in the final product, the design process of wireframing started. For me, the wireframing process is a process that incorporates design synthesis. Collating and sense-making of all the data gathered. Knowing; the users and the contexts of their experience; business objectives; brand requirements; and short and long goals of the site.
Detail of Women’s Fitness Homepage Wireframe – detail showing wireframe integrating functionality for business objectives and encouraging browsing and exploration of the content
User Interface (UI) Design
The layout and typography decisions across all site sizes was informed by the browsing experience the publisher and editors were after for their audience; namely encouraging exploration of the site and chance discovery; similar to picking up a magazine a flicking through it, and enjoying the experience of stumbling across an article, eye-catching photography, or a suitably crafted heading. At the same time the site needed to address business needs both the back stage processes of adding editorials and managing and measuring advertising on the site, but equally the advertising could not detract from the experience of the user wanting to browse the site.
Women’s Fitness Homepage – The overall design for the first page people are likely to see for the first time, was to capture the essence of the front cover of a magazine and its masthead.
The biggest struggle with this site design was balancing competing priorities from stakeholders and audience needs. The site needed to be cost effective to create and maintain and be scalable, be typographically strong yet light and approachable in style and allow people to read articles without being overwhelmed by distractions. Photography had to take the lead but site advertising part of the business model. The end result was a platform that remained true to the printed version’s heritage and wouldn’t alienate the existing readership.
Women’s Fitness site detail of the Nutrition Articles page
The Women’s Fitness site naturally keeps the magazine experience flowing through all the variations the site would take on across devices. This meant enlarging photos and focusing on titles and pushing back deeper information and body copy. This allowed the content to be consumed easily while people were trying to browse the site on their commute, while grabbing a coffee, and anywhere else busy, active people, may be trying to consume Women’s Fitness content.
The end result of this User Experience and User Interface Responsive Site Design has been a product that offers Citrus Media a publishing and brand platform that has both front-stage and back-stage users in mind, as well as creating a system to meet business objectives.