Sony CSL
Research for the future of humanity and our planet
I created the website for Sony Computer Science Laboratories, a research institute of the Sony Group. The client wanted to rethink the entire site following a reorganization, and entrusted me with everything from design and system development through to migrating the existing data.
Approach
To move the discussion forward, build something that works first.
The client and an outside designer had been organizing the site's information. When they came to me, though, the discussion seemed to have stalled, so I proposed building a minimal skeleton site first and using it as a starting point. There was a great deal of information, and I suspected the discussion couldn't be settled because, with nothing working at hand, nobody could tell whether this structure could actually be built. Once the site took shape, the client's work on the requirements naturally moved forward, and the design direction became clear as well.
Design
Putting each researcher center stage.
I was originally brought in to handle the implementation, but as the project progressed I took on the design as well. The client wanted to put their researchers front and center. Because they value a culture in which researchers pursue their work freely and independently, they wanted to present them as "People" rather than "Members." So, using existing portrait photos, I placed a motif at the entrance to the site that shows Sony CSL's "People" through "windows" shaped like the outline of the logo. The design lets visitors feel, right at the entrance, the free and open atmosphere in which diverse researchers follow their own interests.
Data Migration
Automating a massive data migration with scripts.
The site stayed on WordPress, the CMS the client already knew well. However, the existing content structure couldn't support the new design that emerged from reorganizing the information. So I wrote shell scripts to adapt the content to the new design and automated the migration. This eliminated the gaps and omissions that come with copying by hand, making the migration both reliable and fast.
The researchers' papers had also been managed in a custom database separate from WordPress. I automated that migration with shell scripts as well, so that everything can be handled in one place in WordPress. The body of research the papers represent can now be managed and published alongside the rest of the site's content.
-
673
Papers migrated in bulk
Generated from the separately managed database. Each paper automatically received its post, BibTeX entry, publication year, related researchers, research areas, and a step in the translation workflow.
-
38
Name-matching rules
Absorbed the inconsistent spellings of people and projects that the old site treated as categories, and linked them to the related members automatically.
-
1,340
Posts made bilingual
Each Japanese post was automatically duplicated into an English version and linked to it as a translation. Including the papers, some 2,000 items are now bilingual.
CMS
Easy to update, no expertise required.
To keep day-to-day updates as effortless as possible, I customized the WordPress admin down to the details. For example, content on the "People" page is added as a dedicated "Member" post type, but the client also wanted to link "related members" to news items and projects. Normally that requires a separate category for linking members, which means the members shown on the site and the members used for linking each have to be maintained on their own. So I customized the site so that the members shown on the site can also serve as the members for linking. Member information is managed in one place and stays up to date wherever it's referenced.
Localization
Found from around the world, in each language.
The site was already multilingual, but because it simply switched the text on display, pages in each language often couldn't be found properly through search. This time, I rebuilt the multilingual system so that each language is generated as its own page, designed to reach search engines and visitors from abroad correctly in their own language. Not only multilingual content but even new languages can be added from the admin, so if another language is needed in the future, the client can handle it themselves without any development work.
Accessibility
A site anyone can find their way around.
At launch, the site met the high accessibility standard set by the Sony Group (equivalent to WCAG 2.2 Level AA). The whole site was designed on the premise that diverse users should be able to reach information without difficulty, whatever their environment.
Workflow
Running implementation and content creation in parallel.
Some of the new content still had no final text when implementation began. To keep either side from waiting on the other, I prepared a format for writing content in Google Sheets and set things up so that finished pieces could be loaded into WordPress with shell scripts. This let my implementation and the client's writing proceed in parallel and come together as soon as both were ready. As a result, the site launched without the release date slipping.
- Client
- Sony Computer Science Laboratories, Inc.
- Project type
- Website
- Information Design
- Sony CSL
- Art Direction
- Kazunori Miura
- UI/UX Design
- Kazunori Miura
- Front-end Development
- Kazunori Miura
- WordPress Development
- Kazunori Miura
- Launch
- 2025.03
- Related Link
- www.sonycsl.co.jp/en/