Ushahidi 3.0 visual design mockups

One of the most exciting things about the next major release of the Ushahidi platform, Version 3, is the opportunity it presents to build the software all over again; but with the knowledge that’s come from using and developing the platform with our community these past four years.

So when we set out to define how Version 3 would be different, we started in May by asking those who use it most:

  • Stakeholders within the Ushahidi organization.
  • People in the Ushahidi and crowdsourcing community.
  • Our user community (deployers, contributors and reporters).

These conversations influenced the design concepts and strategy that Ushahidi’s core team is now using to build the foundational elements of the platform’s next major release.

Ushahidi 3.0 Design Framework

David Kobia, Ushahidi’s Director of Technology Development, has lead the design of Version 3’s API. Small Surface’s Gabriel White created a visual design framework for the platform’s web application. And Ushahidi’s designers, Jepchumba and myself, have jumped into the detailed visual design of Ushahidi’s web software.

With each decision Jepchumba and I make about how Ushahidi 3.0 will work, the software becomes more exciting to use. We want to use it today, even though it currently only exists as static pixels on our computers.

But the software has begun to take on enough of a personality that I’d like to start a conversation with you – our community – about how it can better work for you.

Jepchumba and I have started to develop a visual language for Ushahidi 3.0 by simultaneously creating visual mockups, stopping to discuss what’s working in one another’s designs and going back to our respective corners to iterate. One natural result of this strategy has been for my work to focus on how the software will work on small-screen, mobile devices. At the same time, Jepchumba’s work has focused on how the same tasks will work on large-screen, desktop devices.

So we’re designing the same thing, but with the needs and constraints of different devices.

While there will naturally be stark differences in how the user interface will work across these different screen sizes, some key design principles we’ve kept in mind include:

  • Parity: When Ushahidi’s web application offers tools to complete a task, those tools must be available to the user no matter what size their web-browsing device is.
  • Shared visual language: While the layout may differ depending on the device being used, the look and feel of Ushahidi’s web application will remain consistent.
  • One URL: Every web page within an Ushahidi 3.0 deployment will have one URL. If a user opens or saves a URL addressing an Ushahidi 3.0 deployment, it will take them to same place within the application, regardless of the device they’re using.

Design Conversation

I’d like to start a conversation about the design process today by sharing a document I’ve prepared, called “Visual design mockups.” It includes annotated images of my work on the proposed user interface for small-screen, mobile devices.

“Visual design mockups”
also serves as a companion to Gabriel White’s “Design Framework” document, which he created in August to communicate a high-level description of Ushahidi 3.0’s user interface design. It includes wireframes and notes describing some of the key introductions Version 3 brings to the platform.

Reviewing these two documents together, I think, will help shine light on much of the thinking Jepchumba and I are bringing to the design of Ushahidi’s next major release.

I’m eager to hear your thoughts. Don’t hesitate to connect with me via this post’s comments below, email or Twitter.


Join our Community Call on October 20th to share your input.

Previous posts about Designing v3:

Which is better, 10, 000 reports or 10, 000 maps
Disrupting Ushahidi

One Response to “Ushahidi 3.0 visual design mockups”