Embedded Files
Responsive Website
Responsive Website
The Associated Press is an well-established, highly-respected global news organization. Because the AP already has an online presence, this project was conceptual and focused on creating a responsive website that would showcase the broad range of AP content available through desktop, tablet and mobile devices.
Project Inspiration
Project Inspiration
With a journalism degree and background working in multimedia, I immediately gravitated towards this project prompt. I also worked for a global newswire service in the past, so I was familiar with how wire services function and the sheer breadth of content available to different audiences.
Project Research
Project Research
Organizing the available content was the first step in the original design planning process. Emphasis on the video, audio and photo content was included among six main site categories that could be narrowed down even further: "Top Stories" served as an umbrella category for US Stories, World Stories, Politics, Sports, Entertainment, Business, Technology, Health, Science and Miscellaneous (More). User personas also helped define the potential audience.
In interviews users were asked questions about their online news habits. A competitive audit was then conducted, focusing on competitors Reuters, CNN, and BBC News.
Mockups (PC and Mobile)
Design Process
Design Process
Step 1: Wireframe Drawing
Step 1: Wireframe Drawing
Step 2: Desktop Wireframe
Step 2: Desktop Wireframe
Wireframes
Wireframes were drawn and digitized, then mock headlines were added to demonstrate where content would be placed.
Connections were made to conduct a low-fidelity usability test. Users were asked to try and locate the top stories under 3 different categories. After the usability test, modifications were made where needed and mockups were created.
Step 3: Low-Fidelity Prototype
Mockup Pages (Desktop)
Mockup Pages (Desktop)
Additional design elements were added, including mock imagery and branding, to create the final high-fidelity prototypes.
Video Page
Story Page
Photography Page
About Us Page
Mockup Pages (Mobile)
Mockup Pages (Mobile)
Mobile Pages
Desktop Version
Desktop Version
Hi-fidelity Prototypes
Hi-fidelity Prototypes
Color, Imagery & Typography
Color, Imagery & Typography
The Associated Press publishes its own style guide so the color scheme had to fit within their specifications, including "AP Red" FF322E. The text font used by the AP was not available through Figma, so a simple Roboto font was used in the prototypes. Images were taken from various publicly-available stock photo sites to illustrate possible news stories and other features.
For more information on this model project, please see the "Case Study" posted above. Click below to view these additional projects:
Page updated
Google Sites
Report abuse