Preparing to Create a High Fidelity Prototype / Proof of Concept
This week, I’ve been producing a high-fidelity prototype to serve as a final proof of concept (POC) for my client, Sobersauce. The intention of the POC is to closely replicate my final design, include all earlier iterations and refinements, and to present an interface that stakeholders can provide final criticisms on (Cronenwett, 2016). If required, stakeholder could decide to commission a final round of usability testing on the POC as it is a high-fidelity prototype, and this would enable them to gain rich feedback on newly included aspects such as transitions and realistic user interactions (UXPin, 2021). However, if they choose not to do this, then the prototype would serve as a useful tool for a collaborating with the development team, who will code the website to appear exactly the same as the POC (Ibragimova, 2016).
I decided to create the POC in Adobe XD, as this is a software platform that I feel strong at using. I had also identify a couple of features that I had limited experience in using, so saw this project as an opportunity to improve on those skills. I also knew that the software would allow me to create three separate user flows, so I could detail different aspects and tasks that might be performed using the website – adding products to basket, using the search functionality, and completing the checkout process.
Before I could start creating any prototype using Adobe XD, I had to import all of the elements that I had previously agreed to use – this includes the colour palette, character styles, and graphical elements such as logos, and imagery. Only minor changes were made to the font sizes, to fall in line with the iOS recommendations which I have tried to adhere to.
I was able to source a selection of product images from the server source website, which I could include in the prototype. I also found a large amount of generic beer-based imagery from the royalty-free website, Pexels. Using imagery from this website for prototyping is advantageous because there is no requirement provide attributions, meaning I would not need to accommodate for crediting photographers within the UI.
Creating the Proof of Concept
Once ready, I began the task of interpreting my Medium-Fidelity mockup designs as a High-Fidelity POC via Adobe XD. Of course, had these mock ups been subjected to usability testing I would also need to factor in remedial work. However this was not needed on this occasion.
Comparing the two iterations of design, it’s possible to see how I have made use of Apple’s Human Interface Guidelines, which included an updated version of Apple’s iOS system UI. The benefit of doing this is that I can provide an accurate depiction for stakeholders of what the website would look like on iOS if it was released to the public immediately. Stakeholders can also see how the website would interact with elements of an example smartphone’s UI, such as the navigation bar (bottom of the screen) and the system bar (top of the screen); any clashing of colours or overlapping of the system UI over the website UI could appear jarring or confusing for the user.
Once I had created a basic layout, I could begin experimenting with more advanced features they had limited experience of. The two main features for this project were ‘repeat grids’ and ‘states’. My intention was to make use of repeat grades to create search results that were linked via their proximity and similarity (gestalt principles) – once I had created one line of results, I could drag the repeat grid down to create as many lines of results as I required. This was remarkably easy due to the software functionality, however the difficulty came when adjusting the unique elements of each listing such as the price and rating. I found the repeat grid often tried to copy the changes I made to the rest of the search results. Eventually I overcame this as I began to understand the nuanced controls of the software.
The next interesting feature that I wanted to explore in more detail was states. I have used these before and found them quite simple to use, although I wanted to challenge myself and create something a bit more meaningful with them. Firstly, I created the filter and sort functions as checkboxes – the default state would be an unchecked box and the total state (which would appear when tapped) would be a checked box. I challenged myself further by using this functionality to create the illusion of a numbered field that would increase from ‘1’ to ‘2’ when a ‘+’ button was tapped. When the user interacts with this aspect of the prototype they will believe that pressing the button will increment the number, however in reality what is happening is the ‘1’ is becoming a ‘2’ in a similar way to how the unchecked box becomes a checked box. This is a simple workaround to produce an effect that actually appears more complex.
Having created each of the required webpages in the ‘Design’ part of Adobe XD, the next step was to link them together in the ‘Prototyping’ part. Mostly, this was quick to do due to the lack of transitions required. Unlike mobile applications, websites (and their conventions) restrict the animations/transitions between webpages. Generally once the user has tapped on an interactive element, the website quickly updates and there is little transition of note.
That being said, the lengthiest part of this phase was creating the checkout process flow. To provide the illusion of completing text fields, I had to duplicate each page multiple times, with and without the keyboard. As the use of a tap on a field the keyboard would appear, they would then tap the keyboard to simulate entering data, and then the prototype would move to the next field. This is the typical behaviour that uses for experience on iOS, and for this reason I have tried to mimic it to provide a lifelike experience.
Final Proof of Concept
Below you will find my final proof of concept, demonstrated using three YouTube videos. Each video completes one of the user flows within the proof of concept. I have also included an interactive Adobe XD link that could be used as part of future usability testing and for interactive demonstrations with stakeholders. The interactive links do not require any further software, other than a basic Internet browser.
Flow 1: Adding Products to the Basket
Interactive link: https://xd.adobe.com/view/70d410f6-75a4-4624-9c69-ee2b1a465149-2587/?fullscreen
Flow 2: Using the Search Functionality
Interactive link: https://xd.adobe.com/view/084e8dec-f615-4b58-a306-0ed3c5ca819c-5d1d/?fullscreen
Flow 3: Completing the Checkout Process
Interactive link: https://xd.adobe.com/view/0f3733b0-f0da-4608-87a8-10becdc3066c-5a64/?fullscreen
References
Cronenwett, D. (2016). Hands-On Mobile Prototyping for UX Designers Online Class. [online] LinkedIn. Available at: https://www.linkedin.com/learning/hands-on-mobile-prototyping-for-ux-designers?u=89462170 [Accessed 3 Apr. 2022].
Ibragimova, E. (2016). High-fidelity prototyping: What, When, Why and How? [online] Medium. Available at: https://blog.prototypr.io/high-fidelity-prototyping-what-when-why-and-how-f5bbde6a7fd4 [Accessed 2 Apr. 2022].
UXPin (2021). High-Fidelity Prototyping vs. Low-Filedity Prototypes: Which to Choose When? [online] Studio by UXPin. Available at: https://www.uxpin.com/studio/blog/high-fidelity-prototyping-low-fidelity-difference/ [Accessed 2 Apr. 2022].