SustaiNet Builds Stakeholder Management Hybrid Mobile App

The Client

The client is a global provider of web-based stakeholder information management and online community engagement software for organizations that value the input, interests and concerns of the audiences they serve and the communities in which they operate.

The Challenge

The client, a supplier of software designed for managing public consultation and stakeholder engagement projects, was looking to develop a smartphone application for iOS and Android platforms.

In addition to providing the PhoneGap development services, Optimus also provided UI/UX services to complete the user interface design.

Key Challenges

– The application was to be built in HTML5 (PhoneGap) for iOS and Android but the user experience had to be consistent with native apps.

– The application was to be cross-platform (iOS and Android) and needed design principles that would be acceptable on both platforms.

– The purpose of the application was for users to have rapid access to review, edit, and add data on the go; therefore, the user experience had to be optimized for this purpose.

– The application had to be designed to support a wide range of devices from 2.5″ screens to 5″+

The Process

  1. Gather requirements through brainstorming sessions.
  2. Create a non-functional prototype to see the app screen by screen.
  3. Create a functional prototype to see the implemented design.
  4. Test and deploy.

How Optimus Helped

After the high-level requirements were gathered, we began on the user experience and user interface design. We worked closely with the client’s UX expert and collaborated on creating efficient workflows that suited both business and technical needs.

Step 1: Create Interactive Wireframes

The first stage was to create the complete application in a low-fidelity tool so that we could optimize the workflows and focus on user-experience. We choose low-fidelity graphics at this stage so that the conversation is focused on the user experience and not the design itself.

By creating an interactive prototype, we’re able to step into the shoes of the end-users and imagine what it’ll be like to tap through the application while conducting the most common workflows.

Once we have optimize the workflow, we bring in more people to get feedback on the usability.

In this case we discussed the interface with end-users, customer support, and a of course the client’s in-house product team. Insights from these sessions leads to improvements and iterations.

Step 2: Create High-Fidelity User Interface

Once the team is happy with the wireframes, we move onto developing the final UI. First we propose a few different designs in order to get the proper brand messaging across. In this project the client was looking for crisp, clean and trustworthy.

Step 3: Work with Development Team to Implement Designs

Lastly we work closely with the development team to ensure the designs are implemented accordingly. This is a crucial step in case there are any changes made during implementation.

We followed an agile methodology where each feature is designed, developed, tested and deployed at a time. This ensures that the team is flexible and nimble to respond to changes in requirements and priorities.

Download a copy of this case study.