#ixd503design

[calumdixon]

Business Platform User Tests - Round 3 - Changes Based on Results

During my third round of user testing, the users I tested with were able to competently move through the app with ease and no guidance. The only issue that was revealed during this round of testing was that the input for selecting a product group was incorrect, however, this has now been corrected to say "product group"

[calumdixon]

Consumer Platform User Tests - Round 3 - Changes Based on Results

During my third round of user testing, it was revealed that I had overlooked the need for functionality of changing a user's location in the "my account" section settings. This was an incredibly important catch as otherwise, users would have needed to create new accounts every time they moved so that they could set a new location, now if, for instance, a user is to move city they can simply update their location.

Additionally, there was an action on the app that was missing its prototype connection, this connection has now been made to resolve that issue.

[calumdixon]

Promotional Website Hi-Fi Mockups

I've finished building upon the Lo-Fi mockups I created for my two-pager promotional website by developing them further into Hi-Fi Mockups. These Hi-Fi mockups will act as the foundation for which I will build the functional site upon using HTML & CSS.

View Full Hi-Fi Mockups

[calumdixon]

Promotional Website Lo-Fi Mockups

Using my sketches as a basis I created a set of Lo-Fi mockups for my two-pager promotional website. The pages are split to target the two distinct user groups in Pitch In, the general public and business owners, by splitting the content I can tailor the written content of each page to the needs of the user group, ensuring that the features and benefits highlighted on the page are relevant to the user group that is reading them. The content of each page can be broken down into 5 sections; A hero banner that contains a hook based title and descriptive subtitle alongside product imagery, an introductory content block that explains what Pitch In is, A "how it works" section outlining the steps of the Pitch In the process, A list of feature blocks that outline relevant features to the targeted user group and lastly a call to action banner for registering interest in the product so as to better convert users in the lead up to the product's release.

View Full Lo-Fi Mockups

[calumdixon]

UI Animation in action - Example 1

Taking the lessons I learned whilst researching the principles of UI animation I've started to apply these teachings to the animation of my prototype screens. The examples you can see here are from the wallet section of my consumer app.

I tried to adhere to the rules outlined in the principles of animation such as applying "slow in, slow out" to all the animations where it was appropriate. There is one example where I couldn't adhere to this entirely despite wanting to which is on the drawer pull animation, due to the limitations of Figma the easing on drag animations is hard to make out due to the transition between screens being controlled by the finger/mouse. However, in a working build of the app, there would be easing present in this animation.

Another thing to note is that some Figma animations can lag somewhat making timings look inconsistent, sadly this unavoidable. However, the silver lining is that when the animation's transition values are all shown in the Fimga inspection tool meaning that front-end teams will be able to tell that this inconsistency is caused by lagging on Figma's part and not that one animation is intended to be slower than the other.

[calumdixon]

Consumer Platform User Tests - Round 2 - Changes Based on Results

Based on the feedback from my second user test I've updated the flows for adding new payment methods and order confirmation.

Changes to order confirmation - When confirming your order, users will now be able to see their Pitch In Balance beneath the title of the page so that they can immediately tell if their account balance is able to cover the entire cost of their donation.

Changes to add payment method flow - When adding a new payment method to their account users will now only be prompted to provide their bank account details if they have enabled payment rounding as these details are only required when this option is enabled.

[calumdixon]

Business Platform - UI Progress - Part 5 (Settings)

Lastly, to finish off my UI Hi-Fi Process I designed the setting screens for the business platform, or for the most part ported the screens over from the consumer platform as the settings section refers to the user's personal account and as such many of the settings are the same. However, there are notable differences such as the notifications screen which includes different notification types from what is seen on the consumer platform.

View Prototype

[calumdixon]

Business Platform - UI Progress - Part 4 (Scan Tickets)

The next section I created in my UI design process was the redeem ticket scanner. The scanner isn't completely true to what it would be like in a working app as activating the phone' camera is impossible within Figma so a still image of a redeem ticket on a phone will have to do in the meantime.

This flow also includes a manual validation method in which the user inputs the 8 digit code found on all redeem tickets, this way no matter what conditions a user and employee are in the ticket should still be able to validate.

View Prototype