ZenHub

2014 - 2019

ZenHub is agile project management for today's most innovative teams. I’ve worked on the product and on the website.

Homepage redesign

Goal: Update website content and redesign some sections for www.zenhub.com

Interviews

With marketing and product, we decided to refresh and align the website message to target the most important ZenHub personas. The first phase took place with a series of customer interviews to understand their needs when they’re looking for in a Project management app and the language that resonates better with them.


After the interviews, the team started to analyze the results, to write and organize the content for the website.

ZenHub website

Wireframes

With marketing and product, we decided to refresh and align the website message to target the most important ZenHub personas. The first phase took place with a series of customer interviews to understand their needs when they’re looking for in a Project management app and the language that resonates better with them.

ZenHub website

Mockups

Once we were confident the lower fidelity designs did a good job addressing the initial requirements, I started working on the visual layer. I kept the process very open with everyone by posting the progress on the shared board and looking for feedback.

ZenHub website

Landing Page

Designing a landing page is often about writing compelling copy and building an interface to highlight it using some animations for the top hero section. We identified who would be looking at the landing page and what their most pressing point points were. The goal was to write copy that makes it irresistible for them to sign up – "This is exactly what I was looking for."

ZenHub website

Roadmaps Landing Page

Goal: Create a new landing page for the new upcoming ZenHub feature called Roadmaps www.zenhub.com/roadmaps.


I've been working closely with the Marketing team by defining the message we wanted to provide, how to display and organize the content and deciding the interaction animations for the video in the section at the bottom of the page.

ZenHub website - Roadmaps

Add Pipeline description

Goal: Add the ability to have a pipeline description inside the ZenHub board.

Personas and Requirements

During some discovery phases, the Product and Design team realized the need for users to have not only the title for each ZenHub pipeline in the board but also a description tied to it. We started to unpack the missing feature by defining personas and creating user story map and job stories.

ZenHub product - Pipeline description

Flows and Design specs

Defined the requirements, I worked on the design solutions by focusing on every user flows and persona.

ZenHub product - Pipeline description
ZenHub product - Pipeline description

Interaction Design

We paid particular attention to small interaction details and made sure to address those - like error states behaviour or how to show the description when the pipeline has or doesn't some cards inside.

ZenHub product - Pipeline description

Sign up page flow

Goal: Review the user flow when sign up to the app and review the UX-UI for the sign-up page for the website.

ZenHub product - Sign up flow

Website styleguide

Goal: Create a live style guide page on www.zenhub.com/style-guide by documenting all the website interface components; align those elements in the Sketch file by using a library working as a version control system.

ZenHub product - Styleguide