Actually, Our New Website Design Has Something To Do With Design!

Orry Barbosa
Forest Admin
Published in
6 min readApr 17, 2018

Two weeks ago, we released our new website. A brand new way to showcase our product and all its features.

Seven terms “Browse, Organize, Reconcile, Streamline, Manipulate, Listen to, and Collaborate onto better describe how Forest Admin back-office solution can help you fully exploit your data.

To explain how we came up with these seven terms and this idea for a new website design, we published a blog post (link below) in which we declared this has nothing, well almost nothing, to do with design.

As Forest Admin Product Designer, and especially as the team first designer, here is the other side of the project story behind our new website.

By joining the team, earlier this year, I knew there would be a lot of projects waiting for me, including some outside the product scope that I was going to cover. The redesign of the website, planned in the global roadmap well before my arrival, was one of them.

This project was for me an excellent opportunity to discover the product and its features, and better understand marketing and sales needs. If I am honest, it was also a chance to bring my design style to Forest very quickly and see my work online only a few weeks after joining the team.

From a simple design optimization to a global website redesign

At Forest Admin, we usually work in small groups of two to three people to avoid mobilizing too many people on the same topic. It definitely helps us be more productive. Of course, we regularly share our projects progress with all members of the team, at least once a week during dedicated meetings.

I teamed up with Tancrede Le Merrer, Head of Sales, for this project. While I had to produce the design part (obviously), Tancrede was in charge of defining and organizing the content.

He was the most qualified for the job as he had gathered a lot of feedback from our customers during the past few months. Sandro Munda, CEO, also joined us from time to time to help us and follow our progress.

To start the project we carried out several brainstorming sessions during which we collected as much information and as many ideas as possible. I soon started drawing out some sketches to illustrate some basic UX improvements.

At first, I chose to redefine the header, the navigation and some other parts that were, in my opinion, too complicated to be easily understood. It helped me create the homepage workflow (shown below) with the associated links architecture. The idea was to make sure Tancrede and I were thinking the same way about how to organize the website content.

Homepage workflow — first version

After two weeks, during our weekly meeting with Tancrede, we realized there was something wrong with what we had done so far. We felt we hadn’t really tackled the main problems of the previous website 🤔

The objective was clear: the new website had to be more comprehensible, allowing our audience to more quickly recognize the added value of our back office solution.

Knowing that the central element of our solution was data, we focused on this word during an intense brainstorming session, before ending up with the concept of the seven terms.

Very early stage of the illustrations, the copy and the composition on the homepage

Back to the beginning

Fortunately, thanks to these seven terms, I now had a better vision of the structure that I would apply to the website design and its elements. Indeed, there was now a real logic and continuity between them.

This had to be reflected in the design, both structurally and visually.

After several iterations, I found the right version. I ended up with the data conceptualized in the form of bars with a color scheme to showcase their origin or to symbolize the possible actions associated with it.

Finals versions of the illustrations

This design concept was quickly validated by Tancrede and Sandro. I was then able to use this as a basic starting point when creating the Home, Features and Developers pages.

Not having enough time to create all the details of these three pages before the next team meeting, this time with everyone, I decided to focus on the most important parts of them.

It took me a week to refine the main blocks of these pages. Hard to work on such an important project when, in parallel, you also have to help the Tech team with new product designs.

As I presented my work to the team, I received a lot of feedback. Thankfully, much of this was positive 😅. Except for a few adjustments here and there, everyone was fully on board with this new design direction.

Last, but not least, the final stretch!

Since the beginning of the project, I had worked with Trello (for project definition and management), Zeplin (collaboration on design) and Sketch (final designs).

These three tools combined allowed me to easily collect feedback from the team in almost real time. For example, thanks to the Bullets feature on Zeplin, anyone can add a feedback on the exact spot of the visual.

Collaboration with Zeplin

By now, everything was really coming together. The UX seemed logical and consistent across all pages. But, one point was yet to be decided: the colors.

What colors should be used for all of the page elements? Which colors would match perfectly with our green? What secondary and tertiary colors should we adopt?

Although I was the most appropriate person to answer these questions (even if my opinion constantly changes when I look at other websites), I decided to ask the team to vote on Zeplin so that everyone could give their opinion. Chaos ensued! 😱

“Color is like cooking. The cook puts in more or less salt, that is the difference!” — Josef Albers

The choice of a color is totally subjective. After a few days of exploration, I finally came down in favor of colors that complement the green of Forest. My final choice was a range of green, blue, and purple.

After a few optimizations, the various pages were ready to be integrated into the website. We decided not to fully re-design the other pages so that I could save time and start working on other projects. Their optimization is already planned for the coming months.

The integration took a week and the new website was live on April 3, two months to the day the project was launched. It was hugely satisfying for all the team, but for me in particular. The end of my first big project as Forest Admin Product Designer.

What is next?

I believe wholeheartedly that, like the product, a company website must evolve regularly, to reflect the growth and maturity of the company.

Shortly, it’ll explain why I’ve already updated several elements on the website over the past two weeks and why I am still working on design improvements.

Could a new version of Forest Admin back-office solution be forthcoming? Time will tell! 😉

Thanks for reading!

To be the first to be notified next time we release a new design, join us on Dribbble 🏀 Our page is brand new, like our website, so expect more shots soon.

I am curious to know what you think about our new design. Feel free to share your feedback or questions in the comments below or to drop me an email at hello@forestadmin.com

Otherwise, to know more about Forest, join our newsletter 👇 or visit our website to request a demo for a live presentation 🌲

Do not hesitate either to follow us on Twitter, Facebook, LinkedIn, and Github 😍 to stay on top of our news!

--

--