Worked on this fun project alongside developer Nick Akey.

Tools used: Figma, uizard.io

Methods: Secondary research, Wireframing, Beta testing

Timeline: 40 days from inception to beta launch! 🚀

The goal: to make a product that allowed users to customize their Notion covers with text.

The website (now live on beta! 👉 www.notioncovergenerator.com) emulates the sleek, minimal design we know and love Notion for, and even though it seems simple enough, it proved a fun, challenging design exercise.

Let’s dive in!

After defining functionality, the first step was to create wireframes to establish information hierarchy and positioning. The desktop version was very straightforward and its layout mimicked Notion’s –a sidebar to the left and content displayed on the rest of the space. Keeping the layout as similar as possible to Notion’s ensured a smooth transition from the app to our website, since users would be already familiar with the position of information categories.

On top of this, research revealed that this layout is also favored by most image generator/customization websites, such as Canva and Hotpot.

The main features needed were:

• Image search
• Image display
• Text input and customization (choosing a font, size, style and color)
• Background customization (adding filters and previewing the actual display size of both desktop and mobile formats)
• Download button

Text and background controls were kept in the side bar, while image search and image display were distributed in the content area.

Now, the mobile version proved trickier. Having less space and going from horizontal to vertical meant a completely different layout was needed.

While Notion tends to solve this spacial issue by having the sidebar triggered by a hamburger menu, that was out of the question for Notion Cover Generator.

At first, a bottom bar was considered. It would contain 3 icons representing our 3 main edit categories (image search, text input/customization and background customization).

However, we wanted the flow to be as quick and easy as possible –the less clicks, the better–, and for the users to be able to edit and watch their image update live. Plus, after placing the image (the website’s main point of focus), we were left with quite a bit of white space at the bottom, rendering the bottom bar pointless.

For that reason, the sidebar controls went to the bottom and we were faced with yet another challenge: where to put the image search?

We went back to Notion in search of answers.

The way Notion solves this is by adding a “change cover” button that takes you to a separate image search screen. We decided to use the two-screen approach, and added its respective “change image” button.

Since the main purpose of Notion Cover Generator is to create an image, we opted to change the button’s placement to underneath the image, so to not block it by having it be directly on top.

The image search screen remained almost the same, with the exception of the images displayed: their size going up for better visualization.

With the wireframing process done, we moved on to UI design. We wanted to keep it as minimal and as close to Notion’s as possible, so their color guide was used for color palette reference, Inter was chosen as our main font, and instead of creating custom icons, emojis were used to help identify categories 😉.

The website is currently live on beta. It’s already received good reviews and useful feedback, and we’re already working on new features that will be implemented soon. Stay tuned 👀!

*Update – 01/09/2021

Notion Cover Generator now has a landing page. Here, new users can get context about the product and be onboarded. The design follows the same minimal style of the product (and Notion itself, of course).

Mobile and desktop versions are now live on the website! Go check them out 😉