Destination France — A Landing Page & Coding Adventure

This is the landing page of the French Embassy: https://franceintheus.org.

It is…bountiful. Chock full of information. Except…how does one find the information necessary?

Project Scope and Purpose: The French Embassy in the US is the primary point of contact for the French government in the US and plays a significant role in promoting study abroad programs. Upon review, however, the Embassy has noticed a decrease in enrollment which may be indicative of the website’s poor UX. There’s a secondary partner site, frenchculture.org, that also provides information on study abroad options, but the overall experience is disjointed and cluttered.

While the Embassy should re-evaluate their overall site experience, a landing page with clear directives would help fill in some of the gaps and provide targeted information for tourists and students.

Users and Research: Since this project is relatively simple, my research focused more on the study abroad process and competitors first, before soliciting general feedback from peers on whether the landing page was well-organized and serving its intended function. I looked at various aspects of the most popular study abroad programs and compared the websites and ease of navigation. The competitive analysis also included external factors, such as cost and the different types of programs.

Design Process: I studied a variety of one page sites before pulling together aspects that I liked into a series of hand-drawn sketches. Next I built a wireframe in Sketch, searched for relevant images (just a test, after all!) and wrote some loose copy for the sections. After I was satisfied with the wireframe, I increased the fidelity by adding images, colors and copy.

The first low-fi wireframe had a few design inconsistencies, as well as a rather rigid symmetry. I’d designed on a strict column layout and while it was functional, I thought it was also a little boring.

After receiving feedback, I adjusted the design and found it to be more appealing than my initial product. I corrected the inconsistencies within the sections (just things like rounded corners and shadows) and used my final design to code. Testing for the landing page was not particularly formal — mostly I just asked for feedback on the clarity of the design and the CTA, so that I knew users would understand to download the guide or connect with a mentor.

Front-End Coding: While I have some experience with HTML and CSS, I overestimated my ability. My design was somewhat more complex than anything I’d previously attempted. Fortunately, I’m well-connected: one of my friends sat down for a dinner with me and explained the best way to break up a site with div tags. For help with CSS, I enlisted another friend from California. He’d just finished a coding certificate and was kind enough to hone his skills by helping me with my landing page. We collaborated via Zoom and I showed him my coding process. The slightly off-center images were difficult in CSS, but I was able to create the sections in HTML. The coding is a bit of a work in process, since it’s largely self-taught.

Conclusion & Next Steps: One of the additional requirements was a product roadmap. Typically, a simple landing page wouldn’t require a roadmap (aside from the creation of an in-depth guide), so I looked at the French Embassy’s brand as a whole.

The landing page is a temporary solution; the Embassy should rework the entire flow of their site. The information architecture needs a complete overhaul, branding inconsistencies need to be addressed and the structure could be simplified and improved by reordering the sections. I’d start by pulling out all of the information under each tab and section, then deciding what the purpose of it is and whether it’s necessary. Next I’d use card sorting and concept mapping to determine a more user friendly set-up. From there, I’d move into a new site map and style guide.

And there you have it, everybody. Another UX Adventure in the books.