OpenUps Approach to Flexible and Intuitive User Testing

How OpenUp used Webflow to efficiently implement flexible and intuitive user-testing in the Case Management System project

This article is the third in a series of four. In the previous article, we discussed implementing a person-centered project design approach, and the value of conducting research directly with end users. During the various phases of research it was important that the team was creative in the way they conducted research with CAOSA and the Working Group to generate useful data.  

This article will highlight one of the new approaches to user-testing and describe how the feedback helped us streamline the journey towards a more compelling user experience. 

Our goal when following this approach was to explore the user's preferred client page layout  for the case management system that OpenUp was commissioned to research, design, and build. The intended purpose of the system is to help caseworkers better manage cases and improve the quality of data being collected at their offices. The users who took part in the research process were members of Community Advice Offices South Africa (CAOSA). 

Through this approach we were able to explore a question that needed answering, which was, "As a CAO, when I visit a client's file, what am I most often looking to accomplish?" From this question the assumptions that we explored were:

  1.  "I want to see the client's details in order to contact them", or
  2.  "I want to review or add to one of their cases", or
  3.  "a balance of both of these options is best".

The whole point of adopting this approach was to create designs that would help us understand the users needs and how this can be translated into a more useful final product and NOT us just creating tons of options and asking which they prefer. Each option should always be backed by a user story. The options tested with the working group were: 

  1. No tabs. This option represented a more equal weighting of both client information and case information, where one would have to be put above the other. (below left)
  2. Client info tab to take priority.This option represented client information as being most important to access first. (below middle)
  3. Cases tab to be shown first. This option represented case information as more important than client information. (below right)

Implementing Webflow Mockups of the app

To capture this information, we used a webflow preview page to quickly create functional designs that a user could access on any device. Webflow is an online visual editor software that allows its users to design, build and launch websites. A staging or preview site was built on webflow to test the users' assumptions regarding site functioning and design. This initial design was then duplicated and tweaked to reflect content layouts that would address each of the proposed answers in our form. From this page members of the working group were able to click through an accurate preview of what the different options would look like and then were redirected to Google form sheet to pick their choices. 

The layout of the form was as follows: 

  1. Brief description of the intended purpose of the questionnaire with a focus on the question we were looking to answer. 
  2. A section to select the users preferred layout which corresponded to the layouts they could preview on the preview website.
  3. A text box for other suggestions and feedback.
  4. Other information captured in the form was the participants name, email address, and whether or not they would like to be contacted for further opportunities to provide user feedback.

Analysing the process 

Based on our experience using a webflow preview page for user testing we can see there are many areas that this approach can be developed. In future we would like to ensure that we capture what the role or position of the person providing feedback is. eg. "case worker", "openup employee", or "citizen". By doing this we could potentially open up the research to a wider audience while still being able to prioritize the results.

Another improvement that we would make is to test both how something looked and functioned. eg. As a citizen I think this approach looks better BUT as a caseworker, this approach would suit my needs better. Another adaptation we would make is to add descriptions of what each of the different designs are addressing on the demo site. This way someone who wasn't intimately familiar with the tool could get a sense of why we took the time to create the alternate layout and might be inclined to provide feedback even when it wasn't directly requested.

The implementation of this innovative digital tool was useful for a number of reasons: 

  1. It gave our development team an opportunity to quickly and concisely test the preferences of the working group. Although this is possible to do through more manual processes, integrating the feedback form directly into the live demo meant that there was a higher level of understanding and a lower barrier to providing feedback.
  2. Another key advantage of using this approach for user-centered testing was the simplified structure in which the decision could be offered or displayed to the participants taking part in the user-centred testing. This feature is important when working on social impact products, as digital knowledge and skills may differ tremendously. In a way, methods such as this can close the gap between non-tech savvy users and developers designing and building a system.
  3. The last major benefit of using this approach is its ability to test, adapt, and repeat the process. We learnt the value of using webflow as a staging site (demo platform) as the creating, duplicating, tweaking, and deploying these different designs is simple, fast, and free (staging of webflow sites is free across all account types). This shows the importance of being experimental internally as solutions used to solve project-related issues may be applicable on a wider scale.

Coming soon 

In our last blog post, we will discuss the project in the context of civic technology and the role that research design played in the implementation of social innovation. The post will discuss the importance of having a clear design and research approach when embarking on a project and how this was fundamental in the case management system. 

OpenUp is committed to keeping our research process as transparent as possible. With this in mind, if you are interested in diving deeper into some of our research for this project linked above! Please let us know at shaun@openup.org.za, or jonathan@openup.org.za

Share this post:
Email iconTwitter icon

How OpenUp used Webflow to efficiently implement flexible and intuitive user-testing in the Case Management System project

This article is the third in a series of four. In the previous article, we discussed implementing a person-centered project design approach, and the value of conducting research directly with end users. During the various phases of research it was important that the team was creative in the way they conducted research with CAOSA and the Working Group to generate useful data.  

This article will highlight one of the new approaches to user-testing and describe how the feedback helped us streamline the journey towards a more compelling user experience. 

Our goal when following this approach was to explore the user's preferred client page layout  for the case management system that OpenUp was commissioned to research, design, and build. The intended purpose of the system is to help caseworkers better manage cases and improve the quality of data being collected at their offices. The users who took part in the research process were members of Community Advice Offices South Africa (CAOSA). 

Through this approach we were able to explore a question that needed answering, which was, "As a CAO, when I visit a client's file, what am I most often looking to accomplish?" From this question the assumptions that we explored were:

  1.  "I want to see the client's details in order to contact them", or
  2.  "I want to review or add to one of their cases", or
  3.  "a balance of both of these options is best".

The whole point of adopting this approach was to create designs that would help us understand the users needs and how this can be translated into a more useful final product and NOT us just creating tons of options and asking which they prefer. Each option should always be backed by a user story. The options tested with the working group were: 

  1. No tabs. This option represented a more equal weighting of both client information and case information, where one would have to be put above the other. (below left)
  2. Client info tab to take priority.This option represented client information as being most important to access first. (below middle)
  3. Cases tab to be shown first. This option represented case information as more important than client information. (below right)

Implementing Webflow Mockups of the app

To capture this information, we used a webflow preview page to quickly create functional designs that a user could access on any device. Webflow is an online visual editor software that allows its users to design, build and launch websites. A staging or preview site was built on webflow to test the users' assumptions regarding site functioning and design. This initial design was then duplicated and tweaked to reflect content layouts that would address each of the proposed answers in our form. From this page members of the working group were able to click through an accurate preview of what the different options would look like and then were redirected to Google form sheet to pick their choices. 

The layout of the form was as follows: 

  1. Brief description of the intended purpose of the questionnaire with a focus on the question we were looking to answer. 
  2. A section to select the users preferred layout which corresponded to the layouts they could preview on the preview website.
  3. A text box for other suggestions and feedback.
  4. Other information captured in the form was the participants name, email address, and whether or not they would like to be contacted for further opportunities to provide user feedback.

Analysing the process 

Based on our experience using a webflow preview page for user testing we can see there are many areas that this approach can be developed. In future we would like to ensure that we capture what the role or position of the person providing feedback is. eg. "case worker", "openup employee", or "citizen". By doing this we could potentially open up the research to a wider audience while still being able to prioritize the results.

Another improvement that we would make is to test both how something looked and functioned. eg. As a citizen I think this approach looks better BUT as a caseworker, this approach would suit my needs better. Another adaptation we would make is to add descriptions of what each of the different designs are addressing on the demo site. This way someone who wasn't intimately familiar with the tool could get a sense of why we took the time to create the alternate layout and might be inclined to provide feedback even when it wasn't directly requested.

The implementation of this innovative digital tool was useful for a number of reasons: 

  1. It gave our development team an opportunity to quickly and concisely test the preferences of the working group. Although this is possible to do through more manual processes, integrating the feedback form directly into the live demo meant that there was a higher level of understanding and a lower barrier to providing feedback.
  2. Another key advantage of using this approach for user-centered testing was the simplified structure in which the decision could be offered or displayed to the participants taking part in the user-centred testing. This feature is important when working on social impact products, as digital knowledge and skills may differ tremendously. In a way, methods such as this can close the gap between non-tech savvy users and developers designing and building a system.
  3. The last major benefit of using this approach is its ability to test, adapt, and repeat the process. We learnt the value of using webflow as a staging site (demo platform) as the creating, duplicating, tweaking, and deploying these different designs is simple, fast, and free (staging of webflow sites is free across all account types). This shows the importance of being experimental internally as solutions used to solve project-related issues may be applicable on a wider scale.

Coming soon 

In our last blog post, we will discuss the project in the context of civic technology and the role that research design played in the implementation of social innovation. The post will discuss the importance of having a clear design and research approach when embarking on a project and how this was fundamental in the case management system. 

OpenUp is committed to keeping our research process as transparent as possible. With this in mind, if you are interested in diving deeper into some of our research for this project linked above! Please let us know at shaun@openup.org.za, or jonathan@openup.org.za