Crossing Over

Skills: UI Design, Branding, Creative Direction, Coding (HTML & CSS), Graphic Design
Tools: Adobe XD, cPanel, Visual Studio Code

Created in 2022

This project involved redesigning the Los Angeles Times long-form story “Crossing Over” as an interactive, responsive web experience. The goal was to transform a traditional article into an engaging digital narrative that adapts seamlessly across mobile and desktop.

From initial wireframes, to high-fidelity mockups, to fully coded prototypes, I focused on improving readability, visual hierarchy, and user flow while preserving the story’s journalistic integrity. The result is a design that enhances immersion through thoughtful typography, pacing, and multimedia integration—bringing the story’s human impact to life in a modern digital format.

Each of the steps’ “Mobile” and “Web” headers are linked to the respective XD file or live webpage.

Wireframes

I designed fully functional wireframes of the website on Adobe XD with working links to various pages. Chapters 3, 5, 7, 9, and 10 were not created for this project.

Mobile Wireframe

Click the heading above to be taken to the Adobe XD mobile wireframe.

Web Wireframe

Click the heading above to be taken to the Adobe XD web wireframe.

Mockups

I designed fully functional mockups of the website on Adobe XD with working links to various pages. Chapters 3, 5, 7, 9, and 10 were not created for this project.

Mobile Mockup

Click the heading above to be taken to the Adobe XD mobile mockup.

Web Mockup

Click the heading above to be taken to the Adobe XD web mockup.

Prototype

I designed and developed a fully functional website–including all 10 chapters, menu, profile (overview), profile on Mary Lee Bendolph, map, and timeline–using only HTML and CSS. The remaining individual profiles and the search menus were not built out for the assignment. Click the heading above to be taken to the live webpage, built for mobile and web browsing. The following images are screenshots from the home page on my iPhone and laptop, respectively.

This file was created for non-commercial purposes as part of an assignment at the University of North Carolina at Chapel Hill. All of the images and text have been used in accordance with the U.S. Copyright Office’s educational fair use guidelines.