hello, I'm Hal.

I'm Hal, a UX Designer and Front-End Developer based in Belfast, Northern Ireland. Currently a final year student studying #ixdbelfast and now part-timer at No.79 Design.

[halmcdesign]

Notebook 📝

Download Paper Supporting Materials

[halmcdesign]

Results 📋

User #1

Video: https://youtu.be/nabdJO1Jx5k

Notes: https://drive.google.com/file/d/1SsJckrdKQi7RCKqOPnmt7zgZWo5krGEP/view?usp=sharing

User #2

Video: https://youtu.be/NHWBcWM6UhE

Notes: https://drive.google.com/file/d/1wP-7UsG6myUfp7yES_G_xZXtfrW_d0R4/view?usp=sharing

User #3

Video: https://youtu.be/sBfs9I8xX20

Notes: https://drive.google.com/file/d/1IAnLn9-ym7jzg2vvVs05Le9pJnXpQdnp/view?usp=sharing

User #4

Video: https://youtu.be/avIM6ZrhNBE

Notes: https://drive.google.com/file/d/1niwnUShPyo8GbKeYsvyVMq-tx1wuWzV5/view?usp=sharing

User #5

Video: https://youtu.be/jukDNuPV3ek

Notes: https://drive.google.com/file/d/1E4VRlxyvV_9gew2AzaLNvujH4mugisFq/view?usp=sharing

Download Maze.co - User Test Report

[halmcdesign]

User Testing 🧪

A User Testing session with Front Runner’s Mid-fi Prototype was something I had really been looking forward to. I had ten users lined up, a combination of horse racing enthusiasts, UX Designers and general members of the public. Of those ten users, five agreed to have the session recorded which was a fantastic resource for my research and a great insight into the functionality of the prototype.

As I explained in each video introduction, the sessions were split into two parts; firstly a series of formal missions facilitated by Maze.co, followed by an opportunity to browse the prototype freely where users were encouraged to ‘think-aloud’ as I observed them using Front Runner. I found both methods equally useful and quickly uncovered areas of the platform design in need of improvement.

[halmcdesign]

Middle of the Road 🚧

As my branding was always leaning towards a Dark UI, I decided to introduce this into the Mid-fi version of the prototype after initial feedback from a brief Lo-fi review session. I feel the black background provides a more accurate representation of how the final product will look. Using a Dark UI for my Mid-fi also allows me to consider various accessibility issues and ensure the colour contrast and legibility of text is appropriate.

In addition to this, I began to progress the design further in the Mid-fi version by introducing actual images and paying more attention to the overall style of elements such as buttons, fields and typography. These improvements really stepped up the prototype’s impact, pushing towards that final finished product. Once complete, this will be the version featuring in my User Testing. It will be of a high enough standard for the user to navigate and understand each task, however not too far along that actioned feedback and improvements to the design would be too time consuming.

Download Mid-fi Prototype

[halmcdesign]

Gathering the Tools 🧰

[halmcdesign]

Nocode? No, Code ⌨️

I researched all of these tools as well as several more such as Bubble and Outseta. Despite some fantastic resources regarding #nocode marketplaces like Connor Finlayson and Yoroomie, it wasn’t looking likely that #nocode would be able to handle the demands of my platform and therefore unable to execute Front Runner’s vision to the full.

[halmcdesign]

New Inspiration 💭

Although the majority of my design inspiration was found in Semester 1, I came across these two examples which influenced both the catalogue and individual product pages of the platform. Beginning with the latter, the first image provides a great structure for the data and the use of icons is a nice touch - something I had not fully committed to until I saw this design. ‘Important Information’ and ‘Insurance’ are actually links, these are positioned in a useful position - out of the way from the main information but easily accessed. This could be replicated for the racehorse’s Racing Post Profile and Pedigree Files. Regarding the main section of information to the right of the product image, this would include the horse name as the H1 with the seller name as a H2. The additional data with relevant icons would be made up of the horse’s age, sex, code, location, colour, dam and sire. I would like to design these icons myself to ensure they are consistent with the styles and strokes of the existing brand.

The second image above inspired the design of Front Runner’s catalogue page. I like how neat the product cards are whilst providing key information in a clean and structured manner. It is also useful to see that these cards have two prices like my racehorses will have, helping to visualise how these numbers might be positioned. The dominant image at the top, combined with a large button matching the width of the content below, help to frame the information between both of these elements. My card design will contain the horse’s name, location, age, sex, code and prices as well as an option for the user to favourite the horse. A great find which will definitely help influence the structure of the product cards found on the catalogue.

[halmcdesign]

Gettin’ Low 📉

Following on from the greyboxes I completed in Semester 1, here are a few screens from the early stages of my lo-fidelity prototype. Taking into account the feedback I received, I focused on including content relevant to my project, Front Runner. As you can see, by including styled typography, some colour and image placeholders, although basic in quality, the structure of the prototype really starts to take shape. From these lo-fi screens, you can begin to visualise the information architecture of the content and understand the various user flows within the design. Lo-fidelity versions of a prototype are an efficient method of trialing, testing and developing the functionality of a product. They are more sophisticated than paper wireframes and an effective way to better explain a concept to a group of potential users.

Download Lo-fi Screens

Significant changes include:

Navigation items: Home removed. Horses changed to Catalogue. Merchandise removed. How it Works added. Compare changed to Favourites. Sell a Share changed to Sell a Horse.

Footer: Dropped the sponsor.

Hero Search: Full width/center search changed to off-center card (1/3rd of the hero). Added Location and removed Code. Swapped around the order of appearance. Removed View All as will automatically appear when pressing search with no filters selected.

Home: Horses removed to focus more on information. Brief About introduction added. Newsletter changed to a Contact card.

Catalogue: Search moved to LHS as per home screen. Removed email alert. Filter automatic (no apply button). Code banner removed (NH/Flat).

Product Page: Added icons. Added gallery to beneath description. Payment card positioned on RHS.

How it Works moved from About to its own page.

[halmcdesign]

Oops 🤪

Picking up from where I left off in Semester 1, one piece of feedback I received and fully support was the lack of content within my Lo-fi Grey Box Prototype. Although in the greybox wireframes I ensured every block was correctly identified, when these were made into a clickable prototype it became impossible to navigate without the aid of the various labelled screens below.

Without framing content within the screen of a prototype (i.e. using images and text), it becomes difficult to visualise the design’s potential. I have identified this as an area of my workflow that needs improving before commencing future projects. In hindsight, I no longer believe the above represents the lo-fidelity stage of the process. Greyboxes such as these should be the next step up from paper wireframes but prior to more formal versions of the prototype. Being completely honest, I struggle to see where a so-called ‘Lo-fi Grey Box Prototype’ like this would fit into my workflow going forward.

Any subsequent projects will likely include paper wireframes and digital greyboxes as above, followed by low, mid and hi-fidelity prototype versions. Lo-fi prototypes will feature the main structure of the design with little/no colour with lorem ipsum and placeholder images. Mid-fi will seek to incorporate more design-specific content unique to the project and introduce more colour with some styling, perhaps around typefaces. The hi-fidelity prototype will then take on feedback from user testing the previous versions to produce a complete product with all considerations made and requirements met.

[halmcdesign]

In the Wild 🏕️

With Shopify now out of the question, I turned to Twitter to explore my options regarding #nocode tools that could be used to execute the build. I interacted with many designers and developers with significant #nocode experience who were all very helpful and understanding of my situation. The main issue encountered with these methods was the fact they only support one-off product purchases. 

The transaction for a racehorse share is quite unique in the sense that it involves two payments; the buy-in cost and the recurring monthly fees which follow. I imagine there will already be a number of external plug-ins used during my build, therefore, to ensure website speed and security, the tools I use to build Front Runner must facilitate both payments internally. 

Armed with my new favourite phrase, ‘Multi Vendor Marketplace’, I am going to explore these provided #nocode suggestions further and see if anyone has successfully built such a platform before. My main requirements are custom searching, filterable results, the ability to have multiple users sell and manage products and a system that accommodates both payment types.

[halmcdesign]

Shopibye 👋🏻

In Week 12 of Semester 1, I concluded my final presentation by boldly stating I would become the first person to successfully sell a racehorse on Shopify. Despite my confidence and drive being stronger than ever, later research would rule out a Shopify custom build as a possibility for Front Runner.

I spent the majority of my downtime between Semester 1 and 2 casually researching all the possibilities regarding how Front Runner might be built. Although I am by no means a development expert, I felt I had the required skills and knowledge to produce a MVP in the form of a live website to submit alongside my hi-fidelity prototype. The main goal of the build was to demonstrate the more complex features of my project such as custom search results, filtering products and listing racehorses - aspects of the prototype that might not function to perfection within the boundaries of Figma.

Shopify is where the thinking behind the build began. With experience in custom builds during placement, I was familiar with the back-end of Shopify. However, I had never used it to build a two-sided marketplace. The research into this is when I first came across the phrase ‘Multi Vendor Marketplace’ which later became very important during my quest to build a MVP.

For Shopify, the app below seemed to be the way forward in order to have the website function how I wanted it to. However, the app was very limited in its customisation as it is more commonly used to list traditional products rather than horses. Setting up recurring payments for the racehorse’s monthly fees was something that looked as though would require a workaround. In addition to this, the commission feature i.e. how Front Runner would make money, was limited to a percentage rather than the preferred fixed fee which was my business model at the time.

Despite the positive reviews and seemingly prompt support, I wanted more flexibility to customise the user’s experience and really make them feel like they are buying a racehorse. Although the shopping experience would have been familiar to them, it wasn’t unique enough to separate it from every other purchase. In addition to this, there was much uncertainty regarding how compatible data provided by sellers would be with other search and filter functionalities of Shopify. To conclude, I decided Shopify would be a compromised method that would ultimately cut corners that could arise to more problems than solutions.

[halmcdesign]

06/01/21 - IXD501 Submission

A Pocket Full of Ideas

Week 06 Presentation

Week 12 Presentation

Major Project Showcase

Lo-fi Grey Box Prototype

[halmcdesign]

Submission Links

IXD303

App Prototype

PDF Presentation

Research

IXD304

Website Prototype

Final Website

Research

[halmcdesign]

ENCOMPASS - Home page of promotional website

[halmcdesign]

App Loading Screen Animation

I’m not much of a gambler, except for Cheltenham, the Grand National and perhaps this year’s Open at Portrush! But when I took advantage of a William Hill welcome offer, I was met with this beautiful introductory animation acting as a loading screen. Their famous wordmark holds center of the screen in front of a polygon background in the colours of their brand before breaking apart and pulling away to either side of your screen.

As my brand has a lot of focus on geometric shapes, something similar to this would look very nice - especially with my dark and contrasting colour palette. My style would be a little slower and perhaps more of a falling exist - similar to the PS2 loading screen (if you’re old enough to remember that!) 

I also like the way ‘deposit’ and ‘balance’ slide in from the top right-hand corner. This transitional is intentional, as they want to draw the user to that area of the account to either deposit more money or bet bigger with a healthy balance. This clever interaction essentially means your balance is the first thing you see when you log into this busy home page.

Unfortunately, the rest of the William Hill app is terrible and ultimately put me off signing up at all.

[halmcdesign]

ENCOMPASS - Application User Flow

[halmcdesign]

Looked at a few different angles when it came to designing the profile section of my app. I think profiles should be informative but also attractive for those visiting this page.