App Prototype & User Testing

Dikshita k
6 min readMay 30, 2021

--

In Ux 2 third assignment, we are tasked to create two Storyboard from the scenarios ( User Research), Figma Prototype & User Testing Report. So, in this article I will cover project from Assessment 2 (User research report, to final prototype outlining the full process, challenges and reflections)

Chosen Project Brief : Sustainability Victoria

I chose to design a mobile app prototype for Sustainability Victoria which helps to solve the problems outlined in the brief overview — i.e. educating Australians on growing food at home (based on their location and weather) and providing recipe / cooking ideas.

User Research Report A2

Before jumping into designing the prototype, I conducted some research on Client/Topic Background and Existing solutions, Direct competitor & App design trends. In this way, I was able to get a clearer realisation of my prototype.

Client/Topic Background
Direct Competitor
Direct Competitor
App design trends

Then, I proceeded in target audience market research and conducted a User Group Research ( Interview & Survey ) to understand the views of the user group. After the research, a report summary was explored to find deeper findings and recommendations. With the user findings, I was able to work on the User Goal , Personas and Scenarios.

Target Audience
Target Audience
Report Summary
User Goals
Personas
Scenarios
Interview Questions and response
Survey Questions

With the user research, i have understand better the point of view of users. The interviews and surveys help me out to know more which features to add on the final prototype. The users have even give some recommendation which feature could be added. In the findings, one user commented to add the feature of reminder to make the user aware of the progress, this is good idea to make user engage and instil trust in the app.

For the third assignment we are asked to make two storyboards, each depicting one scenario each from User Research Report (assessment two),Figma Digital Prototype ( Visual Design & UX Flow) and User Testing Report.

Storyboards (x2)

To begin , I started with some thumbnail sketches and then proceeded to illustrator to make digital illustration with my graphic tablet. With this process, I was able to create the storyboards and take into consideration of these elements:

  • Storyboards depict situational context as well as app screens
  • Creative license has been applied, with professional quality “polish”
Storyboard 1
Storyboard 2

Figma Digital Prototype

For the Figma Digital Prototype I had to take into consideration of the Visual design and UX flow such as :

Visual Design:

  • Modern design patterns utilised to enhance user experience
  • Visual design principles adhered to throughout all screen designs, (i.e. colour theory, gestalt principles, affordances/signifiers, visual hierarchy, composition, typography, etc.)

UX Flow:

  • Prototype sufficiently address the user goals outlined in assessment two
  • User flow throughout app, efficient (minimal steps / clicks), is smooth and conducive to user goals
  • Animations have been utilised via micro-interactions and screen transitions to enhance overall user experience and trigger emotional response

Here is the Figma Prototype Link :

Figma Prototype

User Testing Report

For the User testing report, I had to interview 5 participants and make screen capture recordings. These participants had to test my A/B Split test prototype while I will be asking them questions.

Here is the public share link of all user test session screen-capture recordings (x5) : https://drive.google.com/file/d/1zQXfbMiKvZ1TJMlMtNjZlFB95xPkYQN2/view?usp=sharing

5 User Testers

A/B Split test

The A/B split test had two minimal difference from the final prototype.

Here is the prototype share link of 3–4 A Split Screens :

https://www.figma.com/proto/XhCEcLH3vi6ORbNZWs5DCH/A-test?page-id=0%3A1&nodeid=1%3A2&viewport=360%2C460%2C0.1946486383676529&scaling=scale-down

A Split Test

Here is the prototype share link of 3–4 B Split Screens:

https://www.figma.com/proto/1AGTowZNsObxZUBmhU9lAM/B-test?page-id=0%3A1&node-id=1%3A6 0&viewport=413%2C408%2C0.21269649267196655&scaling=scale-down

B Split Test

From the screen capture recordings, I had made a report summary of the user testers to understand better their complaints and recommendations.

Report Summary

Prototype summary

Challenges:

The most challenging part was to include animations and utilised micro- interactions, screen transitions to enhance overall user experience and trigger emotional response. I had to watch Youtube video and learn on Figma Animation to understand better how to manage animation. While following the steps as in the Youtube video, i had issue with the interaction details and needed to check well which interaction is working. Some of the interaction that i implemented was not working out (e.g on tap ), so i had to change to

Difficulties:

As we are in the Covid period, we were not able to screen record our user testers directly. It was difficult to find user testers and interview them. Luckily ,some of them agreed to be my user testers. Without the testing of the prototype, i would not gain feedback and recommendation to make changes.

Resulting Changes:

For the Final prototype I chose the version A as all of my testers preferred the screens of A than B. I made little adjustments as the user testers claimed when I interviewed them. I had included title to the navigational panel, add more interactivity screen such as the progression bar of the plant, the icon in the navigation bar link to another screen and hovering effect. I had change the interaction details to slide in and out for the version A. I even add details at the swiping circle image for the user know to swipe.

Reflections:

To summarise, this whole process till the final prototype was an amazing task. To explore on the existing client, competitors, target audience , interviews and report. I learned new methods of animations through Youtube Video.The final result came out outstanding with minimal steps which is smooth and conducive to user goals. Also, animations have been used via micro-interactions and screen transitions to enhance overall user experience and trigger emotional response .

--

--

No responses yet