Professional Media Site Platform UX Project
Business Media Site Platform Design
The Next Generation of Media Websites.
Role: UX Architect & Designer
Project Goal: Build a compelling, easy to use platform for website users
Client: A BtoB publishing company owning over 50 professional content and event websites within 11 different industries.
Pilot Brand: The Journal of Emergency Medical Services
Timeline: August 2017 - Ongoing
This project guide walks you through the stages of the process first. The data, research, sketches and related materials generated from the project follow the process outline.
Process
Evaluate
Plan
Build
Design
Launch
Evaluate.
This is all about deep research. The discovery of what already exists, what the users really want and what's needed to improve the business.
Activities Include:
Raw data.
Qualitative research.
Quantitative research.
Stakeholder interviews.
User interviews.
Analysis and review.
Shared knowledge.
Lean Business Canvas.
Plan
The planning stage involves taking a closer look at the research results. The team takes that data and then works on brainstorming, diagraming, outlining various experiences the users currently have with the team.
View the larger, interactive User Empathy Map here. P.S., there's much more in that link which shows more research results.
Activities Include:
User insights.
User journey diagrams.
Affinity diagrams.
User empathy map.
Persona development.
Build
I constructed outputs based on the insights and activities of both the evaluation and planning stages. For instance, the research showed a high exit rate from the home page and based on the data from website statistics and user interviews, the team knows now what the readers are looking for the most. With this information, we can reorganize the home page so the content is more enticing and relevant for the users thereby increase the pages viewed from the home page.
Activities Include:
Paper prototypes.
Wireframes.
User journey paths.
Conversion Funnels.
Low-fidelity prototypes.
High-fidelity prototypes.
Design
After reviewing the research, we now know some of their needs, wants, pain points, joys, and relevancy in our solution to reach them. The designers gather together to collaborate and discuss tested prototypes to begin building out beautiful designs.
Activities Include:
Refined prototypes.
Usability testing.
Sketch & InVision.
Full Designs.
Design Hierarchy.
Layout.
Launch
The digital media team: product manager, audience advocate, front-end developer, UX researcher, digital marketer, and designer work together to code, test, launch and retest the website. The launch and follow through is a key part of success.
Activities Include:
Development handoff.
Accessibility standards checks.
Quality assurance testing.
Post-launch usability testing.
Follow up and support.
The Goods
Interviews, Surveys, Analytics Review
In the evaluate stage of my project, I conducted user interviews in order to get a better understanding of the problem.
Launched new analytics using Mouseflow to compliment the existing Adobe Analytics Data to gain easy to access observations of user behavior across multiple websites.
Interested in learning why users come to visit the websites.
Pursued a better understanding of the user benefits.
Learned there are loyal brand followers and fans.
Some of the users appreciate a few of the more comedic-toned articles.
Certain topics are most valuable in helping them maintain accreditation in their respective industries.
As a result, the design featured restructured information architecture to better meet the user's needs.
Personas, and User Empathy Maps
In the planning stage, using the interviews and analytics analysis, we set up a few personas. We referenced these base needs throughout the design process.
Used interview data results to inform the persona.
Built out the persona and user empathy maps including:
demographics, pain points, motivators, personality type, skills, desires, relationship to technology, preferred channels to receive information and interests.
Presented these to the product and JEMS staff for their edification and insight.
It helped humanize the audience to the team at large.
Sketches, Wireframes, and Iterations
In the building stage, I started with basic sketches and collaborated with the product team. I then built wireframes for review, feedback and testing purposes.
Created sketched wireframes on paper, then used Axure and Balsamiq to validate those sketches.
This stage of the project was very helpful because it revealed some major flow design issues.
Combined a bit of both low and mid-fidelity wireframes.
Provided nearly 7 different iterations of the design at this stage.
Sketch Design, Standards, and Launch
In the design and launch stages, the team reviewed, tested and changed the design.
Chose a light and clean design.
Began a new design system standard for all sites.
The design was built to work in the Adobe Experience Manager CMS.
The team collaborated so well which helped to move the project forward with clarity and direction.
We learned the current users found the website very clean and professional in its original state.
We decided to iterate the existing design in light of its well-perceived branding.
Results
Lessons learned(ing)
In light of needing to move forward more quickly, the project's focus changed from being centralized to one single brand website to a generic Vanilla Design which could be applied to all media websites. The team chose to go in a more compartmentalized direction and broke down the site's elements in pieces which were put through the UX Process individually. This put the project into hyper speed resulting in an Agile workflow with the development and product team.
The digital media and brand teams learned a lot about the website's audience, teamwork, collaboration, communication, workflow, tools and the value user of experience research and design work for the company.