Designing the PhoneGap Website
PhoneGap has been a facet of the mobile development environment since 2009, when it won the People’s Choice Award at O’Reilly Media’s 2009 Web 2.0 Conference. The project's web presence is an important tool for fostering the developer community that surrounds the project, and there has always been significant traffic to the phonegap.com domain—in 2014 there were more than 18 million unique pageviews—so an updated site that served users' needs was the ultimate goal of this project.
I worked to refresh the visual design, site architecture and content to modernize the site. Whilst constantly updated from a marketing content perspective, the design hadn’t been revamped since mid-2011. We had some responsibility to get PhoneGap looking a bit more like a part of the Adobe family, yet we still wanted to maintain our own identity and brand loyalty.
The old version of the phonegap.com website.
01 User Focus
I started by getting a strong understanding of users’ needs, based on site analytics, a thriving community forum, and regular face-to-face contact with users of all experience levels (via events like workshops and our own conference). I recorded areas for improvement and vetted these suggestions with developer advocates and product managers.
As the PhoneGap framework matured, our product offering became more diverse and we needed a way to communicate the expanding toolset available to our users.
02 Information Architecture
I began by documenting the existing site content, making note of what need to stay, what needed to go, and what needed to be updated or created from scratch. Then I developed a new site structure, including a massive upgrade to our documentation.
I shared a detailed information architecture document with the project team (a marketing manager, front-end developer, product manager, and developer advocate), which acted as a living model of the site's structure, content inventory, and implementation status over the course of the project.
Detailed IA spreadsheet, which acted as a touchstone for the project team.
03 Content Strategy & Copywriting
Writing and editing copy came next. I worked closely with our marketing manager to set the right tone and get the right information across to our users. We worked in text documents together initially, and then I mocked-up the content in the visual design phase.
04 Visual Design
Using the information architecture and content audit as the basis for understanding which pages needed to be developed, I created mock-ups, for multiple breakpoints, for all of the site's unique pages.
A sampling of mock-ups created for phonegap.com.
05 User Testing
At this stage, before moving to implementation, I created a script for usability testing the new design. I focused on areas that were entirely new (for example, the Getting Started page) and changes to the global navigation labels, as I wanted to understand if these updates would be an improvement. I used the services UserTesting to test the mock-ups with 15 users who had various levels of experience with the PhoneGap ecosystem.
After reviewing the results with my team, I made updates to improve the design and then moved on to implementation.
06 Implementation
My next step was to create a style guide, which broke down the components of the visual design into a single document. The goal was to make the development of the CSS very clear, and to also create a style guide that could be utilized for other PhoneGap design projects. I worked closely with the rest of the team to get these mock-ups made real throughout the duration of the implementation phase.
PhoneGap UI component style guide