Final Navigation Diagram after many many iterations
If you haven’t checked out Part 1 of Help Together, don’t hesitate to bring yourself up to speed on the project.
Starting on the High Fidelity Prototype
In Part 1, we talked about the initial low Fidelity (paper) prototyping phase. After it was all done, we started to create the actual Prototype. The very first thing we needed to do was to finalize the target phone model and audience.
We chose to design for IOS, with the chosen phone model being iPhone X (375 x 812) as we felt that there are more iOS users than android among youths. We decided on iPhone X as we felt that it was not too new or too old, and many IOS users would be using it. We also chose Figma as our prototyping tool because the majority of us were familiar with it and we appreciated the ease of use plus collaborative voice chat.
Changes from Heuristic Evaluation
From the Test Stage that we previously did, we shortlisted a few key errors to change.
- Lack of consistent back buttons
- Username and Password issues
- Ambiguous and confusing icons in the navigation bar
- Implement a System Confirmation Screen after a user registers for an activity
Standardisation
We moved on to standardizing our Prototype. We borrowed a component library and standardized the colors and typography.
We have chosen red to be the main color of HelpTogether as red signifies passion, energy, and warmth. These are the attributes that we want volunteers to have when they volunteer for the activities. HelpTogether will also follow a warm tone throughout the application to match the passion and warmth from the main color, red.
For the fonts, we decided on Inter (Sans Serif) as our standardized font. We want to portray an elegant and modern user interface while looking approachable and friendly to the users. We refrained from using Serif fonts as we do not want to look too traditional, given the nature of our application.
We also wanted to achieve complementary color harmony in our color selection as it is the easiest to balance the colors and maintain consistency throughout the application, as compared to other color schemes such as triadic and tetradic schemes. We also categorized the colors of our status according to the bootstrap conventions (referred from Bootstrap).
You can interact with the box below to see our Standardised Design Libraries.
Completing the Prototype
I will not go into too many details as to how we completed it. I will not touch upon many UX/statistical theories, such as internal/external validity for experiment design, etc. This may or may not be covered by me, in another post if I have more time.
In total, we spent many weeks designing and touching up on our Prototype, and below is the finalized version. We have 2 different User Scenarios and created 2 Prototypes for them.
Easy Scenario Screens
I have also embedded the Figma screens for the Hard Scenario so you can play around with our prototype. If you want a deeper dive into the prototype, click on this link to access the entire Figma File.
Internal Lab Study
As we did not have much time, we didn’t manage to do a full-blown Lab Study. A Lab Study is a study done in a controlled environment, usually intending to test your Prototype. We each conducted an informal lab study by asking people about their opinions on our entire application. This was a biased test, but it beats having no tests at all.
If time permits, it is paramount to conduct a User Lab Study to decipher the key bottlenecks and pain points of the application.
A/B Testing
To end off the project, we needed to conduct an A/B test. An A/B test is a test used to test a hypothesis of your application. In A/B testing, you would usually want to make a very small change, and observe the impact. If done well, a small change should be able to amount to a big impact.
For us, we decided to explore the usability of a design that does Vertical vs Horizontal Scrolling. Vertical Scrolling allows you to see more events at once, but a horizontal design allows you to see more of ONE event at any given point in time.
| Version A (Control) | Version B (Alternate) |
|---|---|
|
|
We chose to use MAZE as our testing tool because it nicely integrates with Figma. You can also click here to take a look at the A/B testing experiment.
Statistical Analysis
On the whole, we chose to do a Within Subjects design to the A/B test. This means that users will test 2 designs back-to-back. This experimental decision has its Pros and Cons, but I will not talk about it too much. If you are interested, you can find more information about it here
Variables
Independent Variable
The independent variable chosen is the discover view’s layout. Inside the discover page, we will compare displaying it in a full-length card view versus a list view.
Dependent Variable(s)
Primary:
The user’s preference between the 2 screens, whether the user likes version A or version B more, will be recorded as a nominal variable (A/B). The data will be recorded by Maze in a CSV file.
Secondary Variable: User’s usability rating for each version on a Likert scale from 1 to 10, which will be recorded as an ordinal variable (refer to internal validity). The data will be recorded by Maze in a CSV file.
Hypothesis
Preference
H0: There is no user preference between version A and version B.
H1: There is a user preference for version B over version A.
Usability Rating
H0: There is no difference in usability between version A and version B.
H1: There is a difference in usability between version A and version B.
Statistical Tests
After finalizing our variables and hypothesis, we launched the MAZE link shown above. We performed 2 statistical tests on our gathered data.
- binomial test to test whether there is a preference between version A and B as the variables are nominal.
- Wilcoxon signed-rank test to test whether there is a difference in usability between version A and B as the variables are ordinal.
Main Data Summary
For Brevity, I have only included the Key conclusions from the Statistical Tests. You can do these tests either on Excel or through R.
| Wilcoxon Signed-rank Test | ||
|---|---|---|
| Mean Usability Rating | Standard Deviation | |
| Version A | 8.13 | 1.81 |
| Version B | 8.47 | 1.58 |
| Conclusion | From our Wilcoxon Test, there is insufficient evidence to conclude at 5% significance level that there is a difference in usability between version A and version B as the p-value is greater than 5% significance level. Therefore, there is no difference in usability between version A and version B. | |
| Binomial Test | ||
|---|---|---|
| Number of users who preferred | ||
| Version A | 26 | |
| Version B | 34 | |
| Conclusion | From our binomial test, there is insufficient evidence to conclude at the 5% significance level that there is a preference between version A and version B as the p-value is greater than 5% significance level. Therefore there is no preference between version A and version B. | |
We were close to getting statistically significant results. I believe that if we were have gone on to increase our sample sizes, we would have gotten better results. Qualitatively though, it seems to conclude that Version B (Vertical Scrolling) was better. Which would you prefer? Let me know :)
Conclusion
To wrap up the project, we had to do a pitch video. We crafted storyboards to help us communicate, and I felt that we came up with a pretty enticing 1-minute pitch. Overall, it was a good experience, albeit a rather tiring one.
