Product Design
Brainstorming, Competitive analysis, User flow diagram, Usability testing, Visual design
Desktop
2022
Bedrekommune.no
Bedrekommune helps Norwegian municipalities track the quality of different services they provide to people within their jurisdiction. They achieve this through a series of simple but elegant surveys.
The team at Berekommune had specific and unique requirements when it came to their survey builder to make it work seamlessly with their other inhouse applications and reporting needs.
The survey builder had to be highly customisable, including:
- Setting properties to questions (include emoticons for scale questions, creating relationships between pages and questions, min and max lengths etc).
- Reuse and customisation of surveys (e.g. hide questions in the survey etc).
- Marking mandatory questions, which cannot be removed even by an editor etc.
While we were aiming to do an amazing job with the entire solution, our main focus was the survey builder, the success of the entire project hinged on this one module.
The challenge is to build a custom survey builder — similar to Google Form, Typeform, or Zoho — that is easy to use and stays consistent across the page no matter how the user arranges its content.
The good folks at Bedrekommune deserve a product that is efficient and functional, while being easy and intuitive to use. To achieve this, we interviewed the Bedrekommune team, understood their demographics, and used this information when brainstorming solutions.
As our next step, we got down with the clients to brainstorm the issues they are facing and to find potential solutions. There were certain restrictions and personas that we brought to the whiteboard to help us stay focused on building the correct solution for the audience.
For example:
- Our audience mostly consisted of users between 45 and 60 years of age.
- A no-code survey builder for effortless survey building.
- Intuitive layout and design to reduce the learning curve.
- Differentiate between finalised and work in progress elements.
- Reduce the margin for error in form design while adding and removing content.
Using 'Fig Jam' for whiteboarding we discussed and documented our thoughts related to the pain points, solutions, and ideas to make the survey builder the best fit for the customer. Taking different user stories and figuring out how to solve them, discussing within the team the advantages, disadvantages, and how to improve each proposed solution.
Once the Berekommune team shared their requirements and user stories with us, we researched other popular survey builders in the market such as Google forms, Zoho, and Survey Monkey. We studied the survey sections in all its facets (create, edit, publish, gather data, view data, etc) in depth, paying special attention to where they fell short on the customers' specific requirements. Analysing each aspect of other survey builders to find which solutions would appeal most to our audience:
- How to add questions to the form (drag and drop vs click and add).
- Changing form statuses and how they affect the team (private, public, locked etc).
- Intuitiveness when creating different question types.
- Allowing users to customise created surveys by hiding irrelevant questions etc.
- Adding different weights for responses.
- Unlocking and displaying questions based on previous responses.
The user flow diagram helps us to understand and plan how users will navigate through the survey builder. In the case of Bedrekommune, we also used the user flow diagram in tandem with the brainstorming session to map requirements that were not previously revealed. Such as:
- Adding owners and collaborators to the surveys.
- Drag and drop reordering of answer options.
- Undo and redo options.
All features to be designed should be captured in the user flow diagram map to avoid any unpleasant surprises in the future.
We created our wireframes based on the information gleaned from the user journey flows and brainstorming sessions. Using Figma we created wireframes for different interfaces to identify what works best for our audience. Since we had the design patterns we focused on designing new elements and on where each element should be placed for maximum effectiveness.
As we were modernising an existing application, the customers had certain design elements they wished to persist in the new design as well. We worked with the Bedrekommune team to ensure that the application maintained familiarity, while introducing new design elements. A secondary font was chosen to work alongside the customer's previous font. Colour palettes were designed and chosen that worked with existing colours. Different options in terms of colour, size, and feel were created for elements to find what works best for the clients.
Together with the berekommune team, we decided to go with tasks based moderated usability testing. Before the tests were conducted, the teams discussed which flows would be the most useful to test for, and created real world scenarios for these flows. With the help of Useberry, we created a prototype that caters for this remote usability testing..
We tested the module collaboratively with the clients and we explained the scenario and presented the prototype to the users along with the expectations. Users would follow the scenario to accomplish a task, while we observed how they interacted with the system and assisted them if they encountered any difficulty or confusion. At the start we requested consent to record the meeting. During the test we followed these steps to ensure that we captured as much information as possible to further refine the module by asking the users to:
- Think aloud, step to step while following their task.
- Discuss any elements they find confusing while trying to achieve their goal.
- Share they're final thoughts and feedback.
At the end of the meeting we reviewed the recordings together with the documented findings to understand what elements needed to be refined and where users were facing issues. Then, the refinements were carried out and reviewed with the clients.
Nearing the end of our road, we approached the final UI design. With our findings from the previous steps, we designed and created the interfaces covering the whole gamut of the module, and every single element. These were then handed over to development together with the design notes and discussions to minimise the risk for any confusion.
Our in-house illustrator created these illustrations to match with our brand colours and styles.
Over a period of 12 weeks we worked worked closely with the client and end users to align features with business model, which led to inreased enbagament, more referals for new user signups and new partners on-boarded.
custom surveys created in just 2 weeks
reduction on average time to create a survey
lesser customer support calls per day
enterprise users rates 5 stars on new experience
Project manager of More software Solutions AS
Head of Delivery
