Background

Manganum is the personal project of Vova Yankovich. We worked together on Alitools, and when Vova decided to make Manganum, he approached me with the proposition to join as a designer.

Manganum is a Chrome extension that transforms users’ new tab and adds a sidebar with various apps to other web pages. It solves two problems for Chrome users:

The default new tab of Chrome is boring and provides no customization. Manganum adds beautiful backgrounds, motivational widgets with quotes and a life timer, a handy clock, a weather widget, and quick access to favorite websites.
There’s a lot of back-and-forth between tabs. Manganum adds its sidebar to all pages to allow users access to common actions without tab and context switching: translator, notes, tasks, etc.

My task was to come up with a UI that is not only beautiful and easy to use but also one that fits overall Chrome aesthetics. At the same time, it should have its own character.

Process

It all started with looking at other existing solutions — competitors. The biggest player on the market is Momentum New Tab. It has more than 10 million installs on the Chrome Web Store. We decided to differentiate from it with several things: the sidebar, unobstructed hand-picked wallpapers, and video wallpapers.

The founder prepared his vision for the new tab and sidebar apps in the form of mockups. I used them as a starting point.

Example mock-up for the new tab and “Lanuchpad” sidebar app.

The first challenge I faced was making the information on the new tab highly readable on any background. My first approach was to use a shadow. A few tests showed that any background with a high density of details makes the text quite unreadable.

Untitled

The second approach I tried was to add a blurred layer underneath the text. It all looked quite alright in the design, but once I spent some away from the design and then looked at it again, I realized that the blurred part looked too much like a greasy screen… Also, changing the background to a different one showed that the result doesn’t look equally ok.

The next approach was to place the information on a solid background. The idea of widgets made of frozen glass was born. It provided both great readability of any amount of text and looked quite good visually.

Untitled

During these and all of the following steps, I used the feedback of the team a lot. Each new addition and idea was reviewed by the founder, who was and is a great source of feedback and new ideas.

Once the design was finalized, it was time for development. After each iteration, it was my responsibility to find and describe any discrepancies in the live UI. I provided the developer with a list of easy-to-follow items and details that needed a little bit more of his attention. Each item on the list was accompanied by a screenshot that gave more context.

Results

Since then, Manganum has grown into an impressive product with a lot of capabilities. Every feature followed the same road: requirements and/or mock-up → design of one screen → feedback session(s) → design of the rest of the screens and states → development → polishing → release.