Unbuilt Labs is a think-tank exploring sustainable innovation & strategies through its own research, editorial, e-commerce and marketing ecosystem.

As a product design intern at Unbuilt Labs, I am responsible for rebranding their website to bring a new editorial experience to the company's online products.

Two main goals in this project are:

• Building brand guidelines for unifying its entire online presence, internal communication and marketing purpose;
• Designing a research feed page under its business website to showcase its teams' research projects.

• Scalble: using grid system and each article preview should be a repeatable component;
• Consistency: to allow articles on research feed can be merged with other editorial article preview on homepage, image ratio and content elements in each component are fixed.
• Marketing plan: the company plans to release 1-2 new articles per week, using big image is preferred;

My plan is using a web-first strategy to define the information architecture of the research feed page at first.
Using web-first approach instead of mobile-first web design because I realized that the grid system is the key point I need to tackle with, on which web design has more challenges.

A survey was conducted by me to understand user needs for an editorial website experience. Results show that users like stylish, modern-look design and they're usually drawn attention by article title, tagline and image preview. Thus,

• I chose 5-column grid as a start point because it can bring the best variations on each grid layout but also maintains enough space for large image preview.
• I kept zero margin around each grid component to create a modern aesthetic.

In the brand guideline, I've already create rules for brand color palettes, font choices, structure of types and photography usage. I used them as references to create wireframes (shown below) to compare 3 different approaches on grid layout I sketched above.

A questionnaire was used for testing users' satisfication on overall design , asked question including: impression on page layout, information density, visual style, etc.
Question and responses are summarized below.

As a product design intern at a startup, I got a valuable chance to build the company's brand guidelines. I was able to take a close look at how it helps to form my outputs as well as the company's marketing campaigns.
I was also impressed by how design constraints can fasten my work through giving me a focus to deal with. Like in this project, while I had constraints on image ratio and visual style, it actually led me to understand that playing with grids is the way I should go with.