Open mHealth site redesign

Facilitation, Healthcare, Strategy, UX Design

CHALLENGE

At Open mHealth, a health data non-profit where I have been Lead Designer for over a year, we needed our website to better ‘sell’ our audience on using our free, open-source platform.

MY ROLE

On this project I served as producer, content strategist, information architect, writer, and ux designer. I collaborated closely with our awesome developer Jasper, and we briefly worked with a great UI designer, Brian, who developed the site’s energetic and fresh look and feel. I populated the site with content and spent a lot of time looking at the wordpress admin console.

PROCESS

Content Inventory: Jasper and I sat down and inventoried the content of our existing site. What should we keep, remove or add? We realized that the existing site talked a lot about Open mHealth as an organization, but not a lot about why people should use its open source platform. We realized the site had to give a better sales pitch about the value of using Open mHealth.

Site structure: The team worked collaboratively to develop a new navigation structure that was more similar to a ‘product’ site than a ‘non-profit’ site. I used Trello as a card sorting tool to help the team move cards around and group them into lists during a series of remote screensharing sessions. I’m *kind of* a fan of Trello, to the point where some team members have nicknamed me Trello McCardy. Don’t judge.

trello_cardsorting

Competitive Review: I spent time looking at a series of direct and indirect, non-profit and for-profit competitor sites. One we really loved was Sentry – for its visual cleanliness, simple and direct communication about the value of using the product (and the risks of not using it,) and the slightly sassy tone.

Collaborative, remote “sketchingworkshops:  I created basic wireframes in Sketch for the primary pages of the site, and while on a hangout the core team moved content around and talked about our messaging flows. Since we are a fully remote team, this was a great way to keep people involved and all on the same page.

Wireframes and a basic prototype: I used a tool called UXpin to assemble the wireframes into a clickable prototype, which became the primary way we communicated about the project and was a huge asset to our remote UI designer. Here is one of the many wireframes in the prototype:

06_Schema detail

 

Collaboration with UI developer and creation of style guide: Brian created our UI styles, and I worked with him to tweak things from a UX perspective. After he was finished I created a style guide based on his comps that we used for the remainder of the project. Here is a chunk of it:

Production, content population, responsive QA, Launch!: I helped coordinate and plan the timeline for the site launch, and working backward helped do extensive QA and collaboration with Jasper to make sure that the site worked responsively and that the elements we needed were all there. I worked with the rest of the team to get all of the content into the site on time, and we launched the day before our inaugural Summit, which was very exciting.

RESULT

The site is hot stuff, and we are all very proud! It does a much better job at describing and selling our platform, and it looks visually cleaner and much more vibrant.

home_screenshot