What I did for this project:
lo-ol type Studio
Summary
lo-ol studio is a multidisciplinary studio with a primary focus on typography and type design. The website serves as a platform to showcase its activities (workshops, talks, webinar,…), share knowledge, and sell fonts as digital products. Users can test the fonts or download trial versions to familiarize themselves with the products. This project required us to learn frontend and backend development, modeling in Blender, motion effects in After Effects, and usage of AI.
Problem
The studio specializes in both Latin and Hangeul scripts, requiring us to navigate two distinct cultures. With the multitude of globally accessible type foundries available online, understanding our specific audience was essential. Furthermore, reaching a global audience while respecting data privacy presented an additional challenge. Designing fonts for designers proved to be a considerable task, as there's always a risk of overshadowing the product with visual demonstrations.
Role
In collaboration with my partner on the concept and product, I undertook the full stack development. This involved designing the backend schema, constructing the frontend architecture, and mastering the products. I was also fortunate to work on the brand identity for each typeface collection, 3D modeling, and motion, partnering with Railway AI for the final touch.
Approach
Before beginning our research for launching a new version of our product, we had access to three different user groups. The first is the active users we could meet face to face, with whom we engaged in one-on-one interviews and card sorting activities. The second group comprises customers who have already purchased our product and who can be reachable online. Through conducting more than 12 online interviews, we learned about their consumption habits and why they initially chose our product. Lastly, we had users who couldn’t participate directly. For these users, we sent a form and three prototypes for testing. From all this, we gathered enough information to develop the first version of the new website. We gradually conducted more tests with on-site users, refining and adding features for a smoother user experience. This involved improving discovery on the website, testing, and generating visuals through our specimen generator.
Solution
For the website, I opted to use Next.Js 14 for the frontend, Sanity for the backend, and Firebase for the database. We selected this stack after testing multiple libraries, as it provided us with the optimal balance of flexibility and performance. The decision to use a headless CMS was made to accommodate the need for frequent updates and to better adapt to potential future changes.
3D modeling is done in Blender and Houdini for the main page. This concept harkens back to the craft of type design. Although usually associated with molten lead, we aimed for a stone carving experience that reveals the beauty of letters and glyphs.
The interactive block presenting each collection of the foundry collection. Each of these possess a whole identity based on the typeface history. Some are historical and some answer a technical challenge.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper.
Different kind of full screen card are used to highlight services and events.
From desktop to mobile, the user have access to a playground section. This help him testing the typeface and changing weight, width, optical size and many other properties.
The studio also organizes event. Each page tells a different stories about the future workshop or talk that will touch typography, design or type design.
Different kind of cards were created to organizes the different kind of content
Image of communication mixing pure flat typography and motion made both in Blender and AfterEffect.
