Timeline: 3 months Type: Branding, Web Design Dev Team: Matthew Sun, Ivan Zhao, Deblina Mukherjee
Background
Kernel Magazine is an annual print publication by Reboot, a community reimagining techno-optimism for a better collective future. The 2nd annual issue of Kernel magazine, along with the website redesign, launched in September 2022 with the theme of “How do we get there?”
The Task
Our main goals were to revamp the appearance of the website and set up a design infrastructure for future issues. As the lead designer, I facilitated the art direction and visual design exploration, designed the desktop and mobile screens in Figma, and helped with web QA.
serving as a skeleton for future issues, able to be built upon
Versatile
adapting states as the magazine goes through promotional various stages
inviting
conveying warmth, optimism and openness to ideas
Fluid
accommodating different devices and environments
Determining a visual theme
We created various mood boards with screenshots of websites, illustrations, and cool typography.
Because the magazine’s theme was “How do we get there?” we decided on the space theme of travel, innovation, optimism, and wonder.
Information Architecture
Our next step was to determine what pages we needed to design for. We created some potential site maps, discussed them as a team, and combined several to create an information architecture of our website.
While we adjusted this map throughout design and development, it was a good guide for us to get started on some quick page designs.
Low-fidelity Design
Using our preliminary sitemap, I created some low-fidelity layout iterations for each page, which the team gave asynchronous feedback on. For the articles page, we opted for a grid over a list layout in order to include images and draw the eye to multiple articles.
Final Design
(These are some screens of the final design in Figma. Most content are filler images and text. The live site also differs in some areas since we made small adjustments during development.)
Landing Page
Our main goals for the landing page were to:
introduce the magazine to new visitors
direct visitors to read our articles
encourage readers to purchase the print magazine
Visitors first see a letter from the editor that introduces Kernel magazine and its theme. We wanted to convey a personal voice rather than just flat text.
After introducing the magazine, we added a row of featured articles to encourage readers to explore the magazine’s contents.
The table of contents informs readers on the exact contents of the print magazine. We added article links here as well for easy navigation to pieces.
Finally, we end the page with a call to action button to lead readers to the purchase process. After learning about the magazine and seeing a preview of the magazine’s full contents, readers have a good idea of what the magazine is and if they are interested in buying a copy.
Magazine issues
We created an issues page so readers could revisit past issues. The page organizes the contents of each issue in order to replicate the look-and-feel of the print magazine.
The table of contents includes links to articles as well as their color-coded tags/categories.
Reflections
This team created one of the most fun experiences I’ve had working on a design project. It was amazing to work with such talented people and see our website come to life little by little! I think our team lead Matthew put it best :)
What's next?
Still, there are lots of aspects of our website that could be added and improved on. Here are just a few ideas for future issues:
suggesting similar articles after each piece
adding interactive elements like annotations or highlighting to articles
introducing audio versions of articles
adding a search bar
restructuring the archives and past contributors page
Kernel issue 2 asks: How do we get there? Well, web team got there with countless Google Meet calls, a lot of Discord emoji reacts, and a disciplined commitment to craft, feedback, and learning. Not much blood, sweat, and tears - tons of of joy, showing up, and fun.
