Notebook sketches from briefing meeting.
Mock-up of NewsWall in atrium.
Screen capture of the actual NewsWall.
Background
Johns Hopkins University (JHU) was opening a new wing in their Whiting School of Engineering and wanted to showcase relevant news content to students and faculty. They commissioned Form and Content Media (FAC-Media) to create a video wall that would display both internal and external news content related to their fields of research. As Product Designer, I was tasked with designing the user interface for this video wall.
Task
The primary objectives of this project were to:
1. Design an engaging and informative video news wall.
2. Curate and display topic-specific news content relevant to JHU's engineering departments.
3. Overcome copyright restrictions on displaying full news articles.
4. Create a companion web app for users to access full articles.
5. Ensure the solution was scalable and responsive for various display sizes.
Action
Conceptualisation and Design
• Developed the concept of a "news tile" to display limited content within copyright restrictions.
• Created initial sketches of the news tile and overall video wall layout.
• Designed a UI incorporating JHU's color palette, fonts, and logo for brand consistency.
Sketch idea for a "News Tile".
Sketch idea for the NewsWall design.
Prototyping and Visualisation
• Built a mock-up of the video wall using Apple's Keynote
• Produced an animation to guide software developers in replication
• Used Balsamiq to design a cross-platform web app for accessing full articles
Balsamiq mock-ups of the web app.
Actual web app design.
News story, on entering four-figure code.
User Experience Optimisation
• Implemented a four-figure code system on news tiles for easy article access via the web app (4-figures provides 1,679,616 unique combinations).
• Conducted user testing to refine and simplify the web app's interface.
• Designed a responsive layout to accommodate various display sizes and devices.
Stakeholder Management
• Collaborated closely with JHU to ensure the design met their needs and expectations.
• Managed communication between the design team, software developers, and university stakeholders
Technical Implementation
• Worked with developers to create a system for scraping headlines, images, and brief excerpts from news stories.
• Ensured the video wall and web app were optimized for performance across different platforms.
Results
1. Successfully launched the video news wall in the new JHU engineering wing's communal area.
2. Created a live feed accessible online, allowing for remote viewing and monitoring.
3. Developed a (bonus) tablet-optimised version for demonstration purposes.
4. Implemented a user-friendly web app that allowed students to easily access full news articles using the four-figure code system.
5. Received positive feedback from JHU stakeholders on the wall's design and functionality.
6. Created a scalable solution for Form and Content Media that could be adapted for future projects.
Still from the live NewsWall.
Live Video Wall
The live video wall currently runs in in a communal area in the new Johns Hopkins wing, and the live feed can be seen here.
Testimonial
The commissioner of the video wall, Ralph Etienne-Cummings, provided the following testimonial:
"The video news wall project exceeded our expectations in every way.
Form and Content's ability to translate our vision into a functional, engaging, and uniquely-innovative solution was extremely impressive.
What stood out was their ability to balance technical requirements with user needs, resulting in a product that not only looks great but has become an integral part of our engineering community. The ability to run the news feed on tablets and other devices, combined with the companion web app also significantly enhanced the wall's utility for our students and faculty.
Throughout the project, communication was clear and consistent, timelines were met, and challenges were addressed proactively. This project has set a new standard for how we showcase and disseminate research news within our school. We couldn't be more pleased with the outcome and the positive impact it's had on our students' understanding of, and engagement with, current engineering developments."
END