"DeveloperHub is a white-label SaaS platform that allows companies to write and host their product documentation, making it easier for customers to access. Its highly customisable and automatically adapts to different devices and screen sizes. I was the only UX/UI Designer within the organisation, and I was responsible for designing and delivering workflows and UI to support their ever-growing list of features."
Role
  • User flows
  • Wireframes
  • UI design
  • Interaction design
  • Illustration
Tools
  • Sketch
  • Zeplin
  • Photoshop
  • Illustrator
Deliverables
  • Information architecture
  • User flows
  • Wireframes
  • High fidelity prototypes
  • Illustrations
Timeline
  • 3 months

An existing product

Developerhub was my first experience of joining an existing product. I worked on a number of different projects, including: improving the navigation on mobile; redesign of the sign up/log in page; history view feature; illustrations for the 404 and 403 page; and a number of promotional images.

Our users were technology companies (referred to as "writers") that needed to make documentation available to their users ("readers").

Autogenerated landing page

I worked on the autogenerated landing page from ideation to delivery.

The objective was to provide readers with a modern and smart entry point where they could explore their documentation easily.

The challenge was to not create any extra work for the writers, for the landing page to adapt automatically to the content, and for it to auto-generate according to the structure of the documentation.

The LESS approach

Learn
  • What makes a landing page?
  • Headers, text, buttons, cards, formatting, links, etc

  • How do clients organise their documentation?
  • Versions, user guides, references, pages, subpages, etc

    By establishing a hierarchy and defining maximum number of options per card.

  • Which colours are being used?
  • Main/link colour combinations, accesibility rules, establish parameters for colour changes.

Iterate rapidly - gather ideas through quick sketches.

Expand

Solve once, extend to many.

The problem: with increased flexibility comes increased variation.

Documentation was organised by reference, title, version, category, page and subpage. Some used categories as pages and pages as subpages, others used versions as different docs - everyone had their own method!

For the colours the situation was similarly inconsistent. Some users used the same (or similar) colours for both text and links, others used white for main colours (which looked transparent), others used black for both their colours.

Sketch

I whiteboarded several layouts and wireframes, and once I had a clearer idea of the way things should be organised I started to iterate the design of the page.

Using a customer with a brighter palette as a base, I experimented with different images, icons and calls-to-action.

My main objective was to allow clients to have a good-looking landing page without needing them to do any additional work.

Share!

Before building we shared the design with some of our users.

We selected users with a range of use-cases from simple to highly complex to ensure the design met the criteria.

Once we had validated the page design we started on other details such as how to personalise the page, how the interactions should behave, and how it'll integrate into the dashboard.

Allowing further customisation

The landing page submenu allows for further customisation of the Landing Page by allowing users to choose an overlay for their hero image

Writers also have to option of disabling the landing page if they wish

The hero text can be changed directly on the page, and they can also add buttons and links if desired.

Design for further personalisation and interaction

Real user examples

One of my favourite tasks at DeveloperHub was creating illustrations for the newsletter and error pages. The platform had a young and playful vibe and used emojis in comunications frequently. Combining that with the theme of "supercharge your documentation" I created the characters "Stu" and "Riz", who became the alien mascots of DeveloperHub.

β€” main takeaway, DeveloperHub

β€œIt is possible to achieve a lot with very little. We were a team of two, working remotely, delivering work alongside other personal projects. Shipping our improvements and new features each week felt like a win every time.”