Role
Senior Product & Web Designer
Code Charm Inc.
2024–2025
Scope
Dashboard UX/UI
Multilingual CMS
Website design and development
Where
On the Magma platform · December 2023
From brief to website launch
English, Japanese, and Korean
Magma is a collaborative drawing platform where artists create together on a shared canvas. Its community includes illustrators, animators, comic artists, and people drawing for enjoyment.
The team needed to move its custom-coded marketing website to Framer and launch Japanese and Korean versions alongside English. The deadline was a conference in Japan, two weeks away.
The existing site required engineering support for content changes and had no design files to work from. My role was to rebuild it from the live reference, refine its layout, and create a multilingual structure the team could maintain after launch.
The wider collaboration also included selected dashboard interfaces and materials supporting the conference.
Rebuilding without source design files.
The live website was the main reference for its content, layout, and behavior. I needed to translate that into a maintainable Framer build within a short delivery window.
Launching three languages together.
The English-only site needed Japanese and Korean versions ready for the conference. The content structure had to accommodate translations and give the team a practical way to manage them.
Prioritizing improvements within a fixed deadline.
The migration created an opportunity to address layout inconsistencies and bring more community artwork into the experience. Those improvements needed to fit within the launch scope.
Delivering in a new platform.
Framer was the team’s chosen platform, while my previous no-code work had primarily been in Webflow. I needed to learn its workflow while building the site.
I worked directly from the existing website, reviewing its pages and rebuilding them in Framer. This kept the live content as the reference while allowing me to establish a more consistent layout.
I focused the design changes on two areas: the grid and the presentation of community artwork. The grid provided a repeatable structure across pages, while artwork made the platform’s creative output more visible.
For localization, I organized the content so the team could add its Japanese and Korean translations and maintain all three language versions. Ongoing editing was part of the delivery scope from the start.
Beyond the website, I worked on selected dashboard views, focusing on navigation, flow, and the visibility of user-created work. I also designed event postcards and a sales presentation for the Japan conference.
DECISION 1: Build in the platform the team had chosen
I committed to Framer and worked directly in the environment the team intended to maintain after launch. This meant learning its workflow during delivery. I kept the implementation focused on the site’s immediate requirements: reusable layouts, editable content, and three language versions.
DECISION 2: Establish a consistent grid during the rebuild
I used the migration to resolve inconsistencies in the existing layout. Shared spacing, alignment, and page structures gave the rebuilt site a more consistent foundation.
The grid also provided a reference for future pages, so the team could extend the website using the same layout principles.
DECISION 3: Give community artwork a prominent role
I brought artwork created by Magma’s community into key sections of the site. This showed visitors the kinds of work being made on the platform and gave the product messaging a concrete visual context. The page hierarchy balanced artwork with explanations and calls to action, connecting the creative output with the platform behind it.
DECISION 4: Make multilingual content manageable by the team
I structured the CMS with clearly identified content fields for the language versions. The team supplied its translations and could update them within the same editing workflow. This made the handoff more useful: the site was ready for the conference, and the team had a way to maintain its content afterward.
A. The marketing site
A rebuild of the existing website in Framer, with a consistent grid, refined page hierarchy, and reusable layout patterns.
B. Multilingual
English, Japanese, and Korean versions, supported by a content structure the team could edit and maintain.
C. Community artwork
Artwork featured throughout key sections, showing the platform’s creative output alongside product information.
D. Dashboard and product UI
Selected dashboard views redesigned around navigation, content flow, and the presentation of user-created artwork. This work extended the collaboration into the product experience.
E. The blog
A CMS-powered blog with article listings and reusable post layouts, allowing the team to publish and update content directly in Framer.
F. Brand and event materials
Event postcards and a sales presentation supporting the team’s presence at the Japan conference.
The website launched in English, Japanese, and Korean within the two-week deadline, ahead of the conference in Japan.
The migration also changed how the team maintained the site. Content updates that had previously required engineering support could be handled directly in the new CMS, including changes to the language versions.
What I delivered:
A marketing website rebuilt and launched in Framer
English, Japanese, and Korean versions
A CMS structure for team-managed content updates
A consistent grid and reusable page patterns
Greater visibility for community artwork
Designs for selected dashboard and product interfaces
Event postcards and a sales presentation
Wojtek Jodel
CPO at Magma.com
