Developer Center

Mobify Developer Center Docs Home website

B2B, technical documentation

2019

team shoutouts

Richard Sexton, Jennifer Mills, Jaybe Allanson, Docs Dev Team

Challenge

Technical documentation is key for developers to find what they need and apply it in the context of their project. The Mobify Docs site was full of navigation issues which made it hard for the user to find the info they needed. I helped create some of the mockups for the new Developer Center showcasing all the technical information about the Mobify Platform.
3 website screens showing the Mobify Developer Center Home page, Docs page, and the How To page
story

Need for scalability.

Like many SaaS companies, technical documentation was most often an afterthought and was usually given less importance compared to product feature work. The Mobify Docs site was built years ago, however the scale of documentation grew bigger than the site could handle making it harder for users to find the relevant information they needed to know about our platform quickly.

I came to this project after card sorting had already been done for improving the site’s information architecture. Using those results, Jennifer (another awesome designer) and the team had put together some initial mocks.

I had the privilege of working with the team to create the high-fidelity mocks. Just a disclaimer this project has yet to be released so the focus will be more on the design rather than the impact.

3 website screens showing the old Mobify Docs Home page, the Progressive Web SDK page, and the Commerce Integrations Overview page
a website screen of the redesigned search capabilities on the Developer Center home page overlapping an affinity map of sticky notes
approach

improving find-ability.

We affinity mapped all of the user issues from partner feedback as well as internal employees. Grouping all the user needs helped us to see two big user goals we could improve upon: find-ability and readability of docs.

The existing docs site had a heavy reliance on the search bar in our Google Analytics tracking and users had commented before how they couldn’t find what they are looking for since the sidebar nav changed depending on which section they were in. We focused our efforts on improving both of these user goals for the initial release with an emphasis on guiding new users.

features

reinforce consistency.

Since Mobify has other micro-sites like Support (for support tickets) and Mobify Cloud (logging into their account project dashboard), it was important to unify this experience to make it feel cohesive. Although the dream was to consolidate all of the sites into one, it would require a ton of dev work - another project for another day.

Instead, the team agreed on building the structure for the future vision and making the transition feel as seamless as possible with the header. We surfaced all other micro-sites at the top and made it consistent across every page on the site.

4 website screens overlapping one another showing the shared navigation bar style among each of the microsites
features

chunking information.

To increase find-ability for new and returning users, we used the new information architecture from the card sorting test to categorize the sub-navigation.

iterations of the side menu bar using accordions showing it collapsed and opened

Originally, we used the same accordions from the original site but quickly found it wasn’t working for the new IA with less content. After many iterations and running through it like an end user would, we ended up exposing more of the pages to avoid excess clicking.

final iteration of the side menu bar using small dropdowns and surfacing all of the content
features

surfacing content for new users.

We also focused on guiding new users to the right content to have more visibility on the entirety of our platform without overwhelming them with new info. I worked closely with Richard (our technical trainer) to chunk the information correctly and to link to the most relevant pages a new developer may be looking for.

2 screens overlapping one another showing the Developer Center Docs page and the Reference page

tech.

Sketch

I mostly worked in Sketch to create all of the mockups and helped build a design system with the other designer to make it easier for future maintenance.

Invision

Invision was used to create clickable prototypes and show the value to stakeholders.

Gatsby

The actual site will be run on Gatsby, which proved to have some feasibility constraints but were worked around.

reflect

the need for prioritizing.

A huge takeaway from this project was the need to prioritize earlier what was essential for the first release of the new docs site and what could be implemented later in a second release or small hot fix.

With a huge time constraint to get a site redesign finished in a few months and limited resources, there were battles we had to pick and choose to focus our efforts on making the user experience up to par with other standard developer documentation sites like React.

next project

The Scaffold.