Define Role & Contribution

Team

Radya (UI Designer, UX Tester) - Me
Raisa (UX Researcher, UX Designer, UX Tester)
Asad (UX Researcher, UX Designer, UX Illustrator)

Timeline

1 Months - Q4 2021

Industry

Agricultural Technology, Environtment, IoT, App, iOS

Main Responsibilites

As a UI Designer, I create the visual elements and promotional banners for the Ponica app, ensuring a user-friendly interface. In my role as a UX tester, I develop testing plans to identify and fix usability issues, ensuring the app meets user needs.

Brainstorm and Research

Since this is a competition, it is crucial for us to apply the frameworks taught at our respective campuses. Although it is a cliché, we are using the Design Thinking framework in our project. The processes of brainstorming and research also involve specific research methods and frameworks. More details will be provided in this section.

Research Process

Empathize - During this phase, we conducted desk research and literature reviews to gather statistical data on hydroponics, particularly in Indonesia. To validate the information, we conducted two additional types of research: in-depth interviews and questionnaires to hydroponic growers.

Our target users are young people who have experience in hydroponic cultivation. To help us understand the data we collected, we conducted affinity mapping and created an empathy map diagram.

Define - After gathering a wealth of data, we brainstormed to choose a persona for our app's target market. We defined the experience as that of a modern, young hydroponic farmer. To broaden our scope, we also created three points of view for more organic categorization. Finally, using the How Might We (HMW) framework, we brainstormed again and discovered three interesting conclusions.

Brainstrorm Process

To address the three How Might We (HMW) questions from the previous process, our team conducted a mini-workshop with our own team members as participants. The goal of this workshop was to generate as many ideas as possible to discover feasible features for the three HMWs. Here are some features that emerged from the mini-workshop results.

• Provide market demand for specific crop characteristics and harvest period

• Virtual assistant to manipulate plant trait genes and monitor growth with daily checks and instructions

• Chatbot with photo and sentence-based machine learning to solve hydroponic farming problems

  
  

Design Phase - UI Designer

App Structure

This is the beginning, before we start the design process, we need to create a map of the features that will be in this application, along with the details to ensure that the flow we create is the most efficient flow for users to use.

Ideate - In this phase, my role in the team is to design the information architecture, user flow, sitemap, and conduct prototype experience testing. The interesting aspect in my opinion is that in this competition we are experimenting with implementing the hook framework introduced by Nir Eyal.

Hi-Fidelity Design

Design the visual from the collected data, and make iterations for each page, because we believe the first design that come up is not the best design to use.

Usability Testing & Expert Review

Prototype & Test - We went through several rounds of usability testing to fine-tune the design of our application. Our tests involved real users who are young hydroponic growers. We conducted usability testing using Maze, an unmoderated usability testing tool. In this testing process, my role was to create a test plan along with scenarios for the users to follow.

The test is conducted through two iteration stages using the unmoderated usability testing method with the maze.co. Using that tools, we looked at the usability score for each task, the level of user satisfaction with a job in the test, and the comments they left on each task.

Maze - First Iteration

In the first iteration, the following results were obtained

From the first iteration, we can draw the following facts and conclusions :

• Registration in the application is smooth due to a familiar flow, but tasks 2 and 3 present challenges with misclicks and confusion caused by unclear button-like text displays.

  
  

• Task 2 shows a high bounce rate and users navigating to the wrong pages due to uncertainty about the information displayed, leading to longer task completion times in Task 4.

  
  

• Task 5 highlights user confusion in locating the AI camera button due to its search box-like shape, highlighting the need for specific screen repairs and improvements based on heat-map analysis in subsequent iterations.

  
  

• In the first iteration, the usability rate of the prototype is still low. So it is necessary to repair specific screens. For this reason, an analysis is used on the heatmap of each screen to examine further what makes the user unable to run the screen properly and then make improvements in the next iteration stage.

Maze - Second Iteration

After we improved the screens with poor usability, a second test was carried out on the enhanced high fidelity prototype. This test is given to different participants from the first test with the same category. This aims to avoid bias.

In the Second iteration, the following results were obtained

From the Second iteration, we can draw the following facts and conclusions :

• Through the changes made, the usability rating of the prototype has increased significantly.

  
  

• The prototype in the second iteration reduced the user's bounce rate. This is because, in this prototype, the navigation bar name is changed, which can eliminate user misperceptions.

  
  

• The addition of illustrations and explanatory copywriting is proven to increase the average success rate of the prototype.

  
  

• Even so, there are still some misclicks made by the user. This goes back to the user's understanding of the technology and their habits in using the application.

  
  

• All users managed to complete the task given to them successfully because of the prototype's copywriting assistance and explanatory information.

Hand Off Documentation

Documentation

In this package, you'll find a range of assets, including design files, wireframes, user interface elements, and detailed documentation. This collection serves as a valuable resource, helping you understand our design choices and providing stakeholders development team.