The American College of Sofia (ACS) is a 150 year-old private, international secondary school located in Sofia, Bulgaria with over 900 full-time students, as well as part-time programs offering English language courses for adults and young children.

In November 2021, I was hired via freelance contract to update and redesign their public-facing website for both desktop and mobile interfaces.

This involved reorganizing and streamlining the navigation, revamping the design system, and reorganizing individual page layouts to enhance readability, discovery and information flow.

Messaging & Communication

The existing site wasn’t effectively highlighting key content, or communicating with its users in an engaging, welcoming way.

Formatting & Readability

Text & information were poorly formatted overall. Large areas of text had no column width limit, and section titles were written in an excessively large font creating an unbalanced and awkward appearance.

Charts were not clearly labeled, and often formatted in a way that made them difficult to comprehend.

Content Organization & Navigation

Content was scattered across different access points, and certain areas were not accessible via the main menu navigation.

Visual Appeal

The site was monochromatic and text heavy, and awkwardly laid out overall.

Much of the homepage consisted simply of alternating blocks of purple and white, with navigation buttons placed seemingly randomly about.

Examples from Existing Site

Before starting the redesign, I requested a meeting with the developer in order to get a sense of how the current site was run, and what technical considerations I would need to take into account.

The site was being run on a CMS platform called Umbraco, with day-to-day content largely managed and updated by the College’s office of communications. Furthermore, the school was about halfway through a multi-year contract with the site provider, which meant that any changes had to be compatible with the existing platform, while still offering access to the communications dept. for everyday content management.

What this meant practically is that the redesign had to work as a module-based system using a limited number of repeatable elements that could be updated and modified by non-technical staff.

• Site runs on CMS platform called Umbraco

• Day-to-day content managed by non-tech staff

• Site built around customizable module-based system

This site map documents changes made to the main navigation while keeping the 2nd navigation menu intact.

In the “About” section, there were 2 submenu items that linked to pages that made more sense to include under the school profile page. (The “Mission” page simply contained a single sentence, while the “Innovative School” page contained information about a technology grant.)

In the “Academics” section, I added a direct link to an Academic school year calendar, which was a new feature not present on the original site. I also moved sections about the Library and Writing Resource center from the Student Life section as they were a better fit under Academics.

The second option build on the the changes made in the first, but eliminates that second navigation, folding the Parent and Alumni information into the main navigation, and reorganizing the menu sections.

The next step was to begin wireframing and designing new modules and page layouts. As mentioned, CMS platform requirements dictated that the new site would have to built build as a module-based system using a limited library of repeatable, customizable elements.

Keeping in mind that the day-to-day changes and maintenance of the site would be handled by school administrators rather than dedicated designers or developers, I wanted to keep the module library fairly limited and easy to work with, with no more that 20 basic elements forming the entirety of the site.

I also wanted to design the elements to be flexible enough to accommodate a variety of content and use scenarios.

1. Tighter integration of images with text

2. Improve formatting and readability across the site

3. Introduce additional colors and graphic elements

4. Make information more scannable and digestible through grouping & sorting

5. Create flexible page templates that can be adapted and built upon

One element I felt was missing in the existing design was an integrated unit that would engaged the user through both visuals and text, and help provide context and guidance throughout the site. I initially conceived of these “Info block” modules as an image with a floating block of text superimposed at one end and spanning the width of the page.

However, after working through some initial wireframes and getting feedback from informal user testing, there were some negative reactions in regards to hiding parts of the image underneath the text panels, as well as concerns about the about readability of the superimposed text.

Taking this feedback into consideration, I revised the module design to the third option seen below, which allows more of the image to be seen by floating only the title across the bottom of the image and moving the text and action button underneath.

Another priority was to reformat the text to improve styling and readability. Instead of the excessively large and chunky block titles used in the existing site, I chose a serif font for titles (EB Garamond) and contrasted it with a sans-serif font for the general text (Libre Franklin), restricting the maximum line length to 655 pixels, or approx. 12-14 words per line.

In order to highlight certain information, introduce new sections, and/or serve as standalone links, I introduced a series of photo-based banners to replace the large purple color blocks that were prominently featured on the existing site.

Student testimonials and faculty profiles are designed to provide quick snapshots of personal information, whether it be a quote, biographical information, or professional credentials.

While it made sense to keep Purple as the dominant color, as it was the official color of the school, I added a few softer hues in the graphic elements in order to reduce the severity of the existing design and provide more variety.