Building a mobile website for EngagementHQ

About EngagementHQ

EngagementHQ is an online community engagement platform with a collection of community feedback tools in a single online platform. The tools include:

  • Surveys: To voice peoples opinions in a guided fashion
  • Forums: To create a space for discussion, dialogue, and debate
  • Q&A: An issues management and communication risk mitigation tool.
  • Guestbook: To capture people’s thoughts via a simple text comment, which will be moderated.
  • Polls: To encourage people to give a quick answer to one single question with real-time insights.
EngagementHQ Tools Spectrum — via Bang the Table

EngagementHQ Tools Spectrum — via Bang the Table

The platform also includes a variety of information widgets to keep people informed and provide them with helpful data such as key dates, venues, news articles etc. All the tools and widgets are a part of the home page for a particular project, which is known as the project page. This is, in turn, part of a larger hub, which the consultation hub. A consultation hub could have multiple projects and if there’s only one, the hub and the project page is one and the same.

Premise & Challenges

For a good part of the ‘mobile era’, EHQ didn’t have a mobile friendly version or an app. When our web statistics started showing a consistent increase in the number of mobile devices accessing the EHQ platform, we decided that it’s high time we had a mobile friendly version of EHQ.

The information we present to the desktop user is enormous but well presented and laid out. It worked well for the web users, despite being vast and distributed across different tools and pages and in different projects. This would fare poorly on the mobile version, if not well thought out.

v1.3.jpg

EHQ

Homepage Design

The initial and obvious engineering approach to the problem was to merely make the page responsive. This would solve the technical issues with navigating the page but it also means that all the information on the page would be stacked vertically and the user would have to scroll endlessly and aimlessly to read or interact with what’s relevant to them.

For most projects, the masthead of the project would be a banner with a large description. Most mobile users would lose interest fast and just ditch the page.

2.jpg

EHQ

Older, Existing Design

We decided to design an entirely new mobile experience. In order to make the process fast, simple and lean, we followed the Lean UX design process and IDEO’s Human Centered Design principles. We got the entire design, business and development team together to collaborate on the sessions to procure as much feedback as possible in a short turnaround time. 

We had our personas and archetypes defined from the existing EngagementHQ web users and the community engagement guidelines defined by the brand. The challenge was to how do we present the users with the most relevant and interesting information and how to let them participate in the easiest possible way. A way they could do on their commute to work, just like checking their favourite news channel in the metro journey.

Brainstorming

Scenarios & Storyboarding

We split our participants in teams and we all created different user stories. We used templates and scans from comics like Google Chrome comic and The Zen of Steve Jobs, printed them out and had them cut out for the participants to use as they please.

Since community engagement is about stories of citizens and interacting with them, so it was ideal (as well as fun) to portray our own users and their stories. We had some insightful stories at the end of the storyboarding session.

We rephrased our questions to the How might we format to turn our insights and challenges to opportunities for design.

  • How might we incentivise a citizen to engage in a consultation
  • How might we help the citizen get informed and participate in a consultation using a mobile phone.
  • How might we inspire and enable communities to take more initiative on consultation using mobile phones
  • How might we help passive citizens become active contributors in local government consultations
  • How might the local governments engage with communities meaningfully using mobile technologies.

Hundreds of ideas were generated by the 6-odd people who participated in the brainstorming session. I classified and prioritised them based on the user insights and engineering challenges. I then organised them and conducted a dot-voting.

dot.jpg

How
Might
We

Brainstorming with the How Might We questions

Results

We came up with a list of tools and requirements which makes most relevant for maximizing user engagement.

  • User should have quick access to Engagement tools like
    • Quick polls
    • Upload Pictures
  • Real time push notification and updates
  • Geo location
  • National community hub
  • Close the loop by the client responding to important client-action items
  • Gamify the system to motivate users
  • Admin dashboard and easy admin stuff.

Prototyping

wireframes.jpg

EHQ

Paper Prototypes

We started with a phone template and started prototyping based on the goals we came up with. 

usability_testing

EHQ

USABILITY TESTING

These prototypes were given to 5 users for using and a few changes were made. Getting feedback at this early stage helps in reducing time to generate an end-to-end wireframe and change it again.

Detailed wireframes

Surveys Wireframes.png

Wireframes are not complete unless it covers all the scenarios and if there’s no exit route for the user. Our paper prototypes were enough data for me to create detailed wireframes. We had four members assigned to use and test the wireframes. A few more changes were made from observing how the people were using the wireframes, where they got stuck.

ehq-mobile-wireframes.jpg

EHQ

WIREFRAMES

 

Mood, Theme and Styles

I generated a palette and a style tile based on the emotions we wanted to instil in the users using the mobile version. Later it’ll share the theme of the City Council’s or the consultation websites’ branding, but we needed to have some sensible default theme and typography in place.

Theme, mood and styles

Theme, mood and styles

I presented a few styles of different palettes to the stakeholders and community engagement experts and they were happy to go with my primary theme choice as the default.

High Fidelity Screens

ehqmobile-slick.jpg

EHQ 

Mobile UI Design

 

High fidelity visual designs were generated as a final step for the design process. We iterated a few times more based on some engineering challenges, but tried to keep the visual design as close to the detailed high fidelity designs.

UX Process.jpg

EHQ

UI For EHQ Mobile interface

While most of the icons were available to be purchased or procured, we had to make a few bespoke icons. Also the icons needed to work with all the theme colors and backgrounds. After the design phase was complete, we started building the mobile app. A few things were prioritized based on technological and timeline limitations.