Dashboard for Ghost
The redesign of the dashboard for Ghost that brings in a brand new experience with richer analytics and a better home experience. With the help of a small team of two engineers and myself, we designed and built a brand new dashboard experience for customers of Ghost.
Setup of the team
We had a small team of engineers, with me as the designer, and we were tasked with redesigning the Dashboard for Ghost. As a business, we knew we wanted more member analytics to help customers understand their audience growth better. Ghost follows the Shape Up methodology of building products, championed by the chaps at Basecamp and Ryan Singer. With that as a framework, we knew the appetite for the project was big and so set ourselves six weeks to get designed and shipped.
Design-led company
One of the core principles of the Shape Up methodology is that scope is variable but the time spent is not. Regardless, we would be shipping at the end of those six weeks. To make that a reality, tough decisions had to be made along the way. With Ghost being a design-led company, we had the opportunity to visually push the Dashboard and make it a more appealing entry point for new and returning customers. We wanted a useful, engaging and attractive place for people to experience on sign-up or to return to every day.
Sanne de Vries — Product Designer at Ghost
“From the get-go, James showed how deeply he cares by asking the hard questions. His inquisitive nature combined with his resourcefulness enables him to think outside the box and come up with inspired solutions. But where his true quality lies is his ability to jump from this high level understanding to being meticulous about detail and translating ideas into quality code. He would make an asset to any team that cares about delivering high quality work — not only for his skill but also for his kind, fun, and light-hearted spirit!”
Fast iterations
As well as working through design iterations in Figma, I used my coding chops to iterate through various prototypes fast. Before this, I had worked on smaller projects for Ghost, but this was a major one that used the main codebase, written in EmberJS. I also learnt how to use ChartJS, which we were using for the charts. I could draw on my experience of using Highcharts when working at Buffer on analytics. I used a combination of Figma and code to work through many iterations and prototypes and would share these regularly with the rest of the design team. I would work closely with the engineers too as we had to sync up the more technical aspects with what we wanted to achieve in the front end.
A super strong brief
Though our team was small, we'd have support from the head of product, Peter, and our head of design, Zimo. As part of the Shape Up methodology, a “shaping team” would dive deep into a project beforehand and provide a brief that the team works from. The outcome can then be executed in many ways but there are always core aspects of the brief that ideally need to be implemented. With that, our team already knew what metrics we wanted to present, which included member totals, engagement, free and paid, recent posts, and updates and resources from Ghost itself.
How the design came together
Early on we wanted a large member totals chart, front and centre. Not only would that be visually impactful, but would indicate to customers this metric was important to their newsletters. With this new Dashboard design, we wanted to balance “at-a-glance” metrics that would be useful for high-level, daily check-ins as well as provide enough depth to the metrics to be meaningful and useful.
With every major release of Ghost, the company makes big pushes to the admin forward in how it looks and it functions. The new Dashboard was part of the next major release, so though it had to be useful, it had to have a visual impact, too. We couldn't go too crazy though. We wanted the graphs and tables to look fresh and modern, whilst still fitting the general aesthetic of Ghost. We leaned on a colour palette of neon purples, pinks and blues. These felt right within the current design language of Ghost as well as feeling modern for future versions.
We went through quite a few iterations, in Figma and code, to get all the pieces to fit together. On a single page we had total members, engagement metrics, free and paid metrics, recent posts, what's new from Ghost, resources and more. In the end, using code was the best approach as we could use real data, real charts and real text and images to see how all those elements truly fit together. Through multiple rounds of feedback and iteration, we found a happy balance that not only looked nice but provided so much more functionality and usefulness than what was there before.
Product Design
UX
UI
Prototyping
Figma
CSS
JS
Product Management
