UX/UI Case Studies

Overview

  • Client: Teachers For Asia
  • Sector: Recruitment
  • Category: UX/UI
  • Role: Research/Design
  • Timeframe: 6 Months

What We Did

  • Competitor Analysis
  • Personas
  • Card Sorting
  • Hotjar Heat Maps
  • Affinity Map
  • Browserstack
  • Empathy Map
  • User Flows
  • Adobe XD
  • Information Architecture (IA)
  • Interaction Design
  • Wireframing
  • Front End Design
  • User Interface Design

Teachola supports the expat teacher community throughout Asia by providing the widest selection of quality guaranteed teaching jobs and help teachers upskill to improve their career prospects.

The Challenge

Previously known as Teachers For Asia, Teachola came about due to the worldwide pandemic. TFA required a rebrand to bring the company further into the digital age and deal with the challenges and pressures of being a location-dependent business. Without as many teachers currently relocating to China, we ran a UX workshop to discover if there were opportunities or avenues to service these teachers in a different way.

The Solution

My initial role in this UX project was to facilitate stakeholder and end-user workshops and to interview existing teachers that Teachers For Asia have previously placed into schools in China. Conduct a heuristic review of their existing site and work with the development team to bring the insights we uncover into an engaging digital platform experience.

I did this by running an in-depth competitor analysis both direct and indirect, creating proto-personas of the different age demographics, needs/wants and skill levels of teachers. Our findings showed three main types – ESL, Subject Teaching and Online teachers all with different requirements. So we created a customer journey map for each persona and mapped out a task analysis for each scenario. We also found that an empathy map was beneficial to this project as young teachers relocating to the other side of the world at this current moment in time could be very daunting.

While Chinas immigration borders were closed for the foreseeable future, we found that by switching the focus to ex-pat teachers already in the country looking to upskill or relocate, we could tap into an already available market that would need the services of Teachola. This brought about creating a Community section within the new web platform and making the business more about empathy and togetherness than just being another predictable recruitment company.

(User Journey Map)

The Result

I created low-fi wireframes to brief the development team to make sure what we proposed could actually be easily replicated in code. I coded up the front end of the website in HTML5/CSS3 and worked with the developers to integrate the Content Management System (CMS). Analytics and Metrics were added to review the site through heat mapping and screen recording software.

The next phase will include working with a technology company in Shenzhen to integrate an Artificial Intelligence (Facial Recognition) User Account system allowing Schools to view resumés through a subscription model, rating the teachers from 1 to 5 in the ability and compatibility with the school. We are also working with AR and VR immersive technologies to offer the potential teacher a real-time 360O view of the school and location before signing any contracts.

(Lo-Fi Wireframes in Adobe XD)

With the integration of the Zoom platform, automated lead generation landing pages and GetResponse Autoresponders, the client can hold interviews of up to 40 people per session instead of the previous 1-on-1 interviews and batch process potential teachers faster and more efficiently. This has had a fundamental change in the user flow of the business.

A second business was also established from the UX workshop findings. Teachola Docs This involves document processing for Chinese Z-Visas to authenticate, notarise and legalise work visas through the Chinese Consulate. From this project, Teachola has grown exponentially and now has offices throughout UK, Ireland, Spain, United States and China and contracts agreed with some of the leading schools throughout Asia and plans to expand into the United Arab Emirates.

Overview

  • Client: Ardmore
  • Sector: Food & Drink
  • Category: UX/UI
  • Role: Research/Design
  • Timeframe: 1 Month

What We Did

  • Competitor Analysis
  • Personas
  • User Flows
  • Information Architecture (IA)
  • Service Safari
  • Empathy Map
  • Figma
  • CSS3
  • Lo-Fi Wireframes
  • Hi-Fi Prototype

Dromona is part of the Dale Farm brand along with Spelga, Mullins, Fivemiletown, Loseley and Rowan Glen producing award-winning milk, cheese, butter and ice cream – sold into over 45 countries across the globe.

The Challenge

Working in conjunction with Ardmore, we were tasked with designing and creating a new responsive website for the Dromona cheese and butter range. Dale Farm’s current site was tired and dated both visually and technically and required a refresh to help customer engage and interact with this very popular local brand of cheese and butter spreads. The main challenge was to build an online community that people could share and learn from, organically strengthening and growing the brand in the process.

The Solution

First, we sat down with Ardmore to define a clear strategic brief and understand the client requirements for this new project before we even started to think about the look and feel of the new site. We worked closely with Ardmore throughout the design iteration stages to create the Information Architecture (IA), sitemap and lo-fi wireframes to make sure we kept the project on the right track.

A community approach was also introduced through a hashtag #DromonaMakesIT and a dedicated Instagram set up to drive customer participation. Meal suggestions and recipes giving quick and easy stepped instructions with an option to share on relevant social channels was developed. This included all-important nutrition and allergen information as well as showcasing the individual products.

The Result

Rich and engaging content was key to the success of this website, it helped to ensure emphasis was placed on the usability of the website and encouraged users to return. We created a clean user interface taking onboard UX best practices and incorporating a live photo feed through Instagram. Once all layouts, web optimised files and style guides were approved, these were supplied to the developers to start the development process along with a style.css file that they could plug straight into the web build.

Overview

  • Client: Glens of Antrim
  • Sector: Food & Drink
  • Category: UX/UI & Web Dev
  • Role: Design & Build
  • Timeframe: 2 Weeks

What We Did

  • Competitor Analysis
  • Personas
  • Card sorting
  • User Flows
  • Affinity Map
  • Task Analysis
  • Empathy Map
  • Sketch
  • Paper Prototypes
  • Desk Research
  • Brand Identity
  • WordPress
  • MVP Modelling
  • Front End Design

The Glens of Antrim is steeped in Irish folklore where spirits, myths and legends meet and the distinct Irish Whiskeys produced at the Glens of Antrim Distillery pay tribute to these mystical tales.

The Challenge

Glens of Antrim are a well known local food and drink company in Ireland that produces Glens of Antrim Potatoes and Potato chips. They have recently decided to add Whiskey casks to their product line. With key stakeholders scheduled to meet potential investors in the United States and UAE in a couple of weeks time, they required a digital presence that was informative, engaging and something they could easily update on the road without the help of a developer.

(Competitor Analysis)

The Solution

Given the short timeframe and quick turnaround required for this project, we had to work in a lean and agile way. Relying heavily on desk research, competitor analysis (quantitive & qualitative) and UX best practices, we didn’t have the time, budget or resources to conduct a deep dive into the user research into customers purchasing patterns and behaviours when investing in whiskey casks.

We scheduled a five-day design sprint session to agree on a long-term goal, diagram the problem and interview the client. We collaborated together to rapidly create a paper prototype and decide what features and functions cost/time benefits and what would be realistic to achieve in one week of development time. We went about defining our Minimum Viable Product (MVP) and moved the ‘nice-to-have’ features into the car park to sort through in the next iteration.

(Lo-Fi Wireframes in Adobe XD)

Working from a current printed brochure artwork the client recently completed, I was able to apply the brand style to the rough mockup, using the corporate colours, images, logos and typefaces. While we were working through iterations, the client briefed a videographer that managed to turn a 30 second video around in a week that we could embed into the website.

(Hi-Fi Wireframes in Adobe XD)

The Result

We split the two-week sprints up into 4 main areas allocating 2 days to each phase, defining the problem, researching the solution, creating & iterating and designing & developing. Because of the nature of this job, we had to ‘box clever’ to meet tight deadlines and the process and methodologies had to be fluent. Information Architecture played an important role in the hierarchy and order that each piece of information was displayed.

The features and benefits that we were able to achieve for the MVP launch:

• CMS – Install WordPress 5.13 with Salient Theme and WP Bakery Pagebuilder
• Fully Responsive  – Media query breakpoints for each device/screen size
• One-Page – Jump To links to navigate to a targeted section within the site
• Age Verification Gateway – Legal requirement to enter an alcohol site
• Web Optimised – All web assets optimised for speed, security and performance
• Video Background Capabilities – Ability to embed self-hosted .mp4 videos
• Custom Typeface – @fontface integration to display brand style typefaces
• Interactive Timeline Map – Content managed hotspots with text/images/videos overlaid
• Basic SEO – Yoast capabilities to submit keywords & page descriptions to Google
• CSS Interactive Animations – Fade in and Zoom out features to add interaction on scroll
• Editable Cask Counter – Updatable counter that client can change when casks are sold
• Roll Over Image Reveal – Image rollover function showing front & back of bottle labels
• Social Media Links – Facebook, Twitter, Instagram, YouTube and Linkedin external link
• Google Analytics Integration – Ability to view Domain Performance and  Traffic Analysis

(WordPress Page Builder)

The next phase will include eCommerce capabilities for merchandise and non-fungible tokens (NFT’s) for auction through OpenSea along with a 3D live immersive tour of the distillery. We are also developing a web app that allows the personalisation of whiskey bottles and casks for a more unique experience. We have created the web platform in a modular open-source format to allow developers to easily add new features and functions.

Overview

  • Client: Gatekeeper PR
  • Sector: Charity & Awards
  • Category: UX/UI & Dev
  • Role: Research/Design/Build
  • Timeframe: 1 Month

What We Did

  • Competitor Analysis
  • Personas
  • Card Sorting
  • Hotjar Heatmaps
  • Eye Tracking
  • Browserstack
  • SEMRush Research
  • User Flows
  • Adobe XD
  • Information Architecture (IA)
  • Sesion Recordings
  • Wireframing
  • Form Design
  • User Interface Design

Aer Lingus is one of Ireland’s largest and most successful airlines. Founded in 1936, the airline is a subsidiary of International Airlines Group, the parent company of British Airways and currently operates flights in 92 airports across 24 countries.

The Challenge

Gatekeeper PR engaged with us to carry out a UX/UI project to improve the digital presence for the annual Aer Lingus Business Awards. Now in their 10th year, the awards celebrate the best organisations and individuals in Northern Ireland’s private sector across nine different categories. Gatekeeper PR needed an online platform where entrants could easily submit entries and were easily automated to schedule personalised emails saving admin time.

The Solution

We facilitated a User Experience (UX) workshop to understand user behaviour and identify any usability obstacles. We worked in tandem with the client to develop a customer journey map, wireframes, and low-fi visuals and used agile methodologies to quickly create an interactive prototype. During this process it was discovered that submissions are generally completed over a couple of days with the entrant coming back numerous times to make amends, it was important we included a function to easily save progress and send when ready. An editable pdf was also offered as a download allowing entries to be emailed at a later date.

The Result

9 different category-specific entry forms were created to collect and collate submissions that organised and sent entries directly to an email folder on the client’s computer and save a backup copy onto the database. We leveraged the power of video on the homepage to grab attention and improve search engine rankings along with integrating 3rd party software to collect user feedback and see how visitors interact through heatmaps, session recordings, and conversion funnels.

During the deployment phase, we installed an SSL security certificate and a cookie policy bar to comply with GDPR requirements when collecting and storing user data. Magazine adverts and digital banner adverts were created for above and below-the-line marketing campaigns to drive award awareness and encourage online entries. A wide range of awards-related material and promotional items were produced to accompany the digital.

Overview

  • Client: EARS Plc
  • Sector: Technology
  • Category: UX/UI
  • Role: Research/Design
  • Timeframe: 1 Year

What We Did

  • Competitor Analysis
  • Personas
  • Active Listening
  • Digital Strategy
  • Affinity Map
  • Google Analytics
  • Empathy Map
  • User Flows
  • Adobe XD
  • Information Architecture (IA)
  • Interaction Design
  • Wireframing
  • Front End Design
  • User Interface Design

Motorola is a leading global communications company that creates and innovates technology solutions to keep communities and businesses safe. With the most advanced and reliable radios on the market, Motorola radios are engineered to work flawlessly in the toughest of conditions.

The Challenge

Working together with EARS Plc, one of Motorola’s largest two-way radio partners, we were commissioned to discover through User Experience research, sector-specific insights that would allow EARS Plc to engage and convert suitable leads into purchasing or hiring customers. Due to the nature of long-term contracts and an already established database of clients, Motorola also has an opportunity to reach out, educate and re-engage with existing customers but needed to put their assumptions aside and to fully understand their customer’s thoughts, feelings, fears and reservations.

The Solution

We ran a two-day strategy workshop with the client to ascertain their current business needs and strategies. This helped us quickly identify that a digital approach was to be used instead of the traditional routes that the customer currently used. We could promptly monitor, measure, and amend the digital offering depending on metrics and analytics received. We used Hotjar analytics and Usertesting.com to gather feedback on 3 key challenges.

The Result

We developed an email marketing campaign to help the client follow up, and direct customers toward the dedicated sales funnel. Using a three-step process that turned visitors into customers – Introducing Motorola to new customers, educating and reconnecting with existing customers and closing the deal with ready to purchase/hire customers. This was all backed up from the user personas that we created. After every month, we were able to test and refine the landing pages from the user data gathered from the previous month. The body of UX work conducted was valuable to Motorola and the direction that they decided to take in the next Q4.

Overview

  • Client: Clearsky Adventure
  • Sector: Travel & Tourism
  • Category: UX/UI
  • Role: Research/Design
  • Timeframe: 2 Months

What We Did

  • Competitor Analysis
  • Personas
  • Card Sorting
  • Hotjar Heatmaps
  • Affinity Map
  • Empathy Map
  • Interaction Design
  • User Flow
  • Figma
  • Information Architecture (IA)
  • Interaction Design
  • Wireframing
  • User Testing
  • Eye Tracking

Winterfell Tours is Ireland’s premier Game of Thrones Tour Visitor Attraction where you can meet the real-life Direwolf Dogs & explore over 20 key Game of Thrones tour filming location hotspots on the ancient sprawling demesne of Old Castle Ward.

The Challenge

Clearsky Adventure Ltd asked me to run a Web and UX Audit on the performance of their current website, with new competition entering their market they wanted to make sure the digital side of the business was working hard for them.  Their current website was live for over 3 years with minimum amendments and maintenance carried out within that time. Support for the current CMS platform was being discontinued, so this was a good time to look at the overall digital experience with fresh eyes.

The Solution

Through the use of eye-tracking software, first-click testing and mainly remote user testing we could understand where and why the user wasn’t completing the purchase. We implemented the 3 click rule for every page but the major ‘quick win’ came from moving the booking events to the homepage, these were currently hidden within the site and adding 2 clearly labelled CTA buttons to either view or book. We also removed the video of the Direwolf howling from the front page Hero section replacing this with a slider of real-life events as user feedback showed us this was more ‘annoying’ and distracting to the user than inspiring. The colour of the primary buttons was made more prominent and point size/line height slightly increased to help with legibility

The Result

From our UX research gathered through this project, we found that our primary target audience in America connected with the word ‘Castle’ and research shows that ‘Irish Castles’ was a high-level keyword. We decided to feed this through our SEO and rename the business to Game of Thrones – Winterfell Tours – Castle & Demesne which gained twice as many click conversions.

Empathise

Define

Ideate

Prototype

Test

I use User Experience to investigate and analyse how users feel and interact with digital products, this is usually websites and applications. I then apply the knowledge and insights uncovered to develop a product that ensures that the end-user receives the best possible experience.

We can work together to develop an engaging user experience:

Competitor Research
Customer Journey Map
Task Analysis & Personas
Information Architecture
Card/Tree Sorting
Affinity Diagrams
User Interface Design
Wireframe & Prototyping
Usability & Split Testing

Why a product should invest in User Experience (UX)

Focusing on solid UX solutions enables users to have a better experience. It improves the chances of a project’s success when launched into the market. It doesn’t rely on brand name expectations hoping that users will connect with the product.

User Retention

Customer retention builds strong relationships with customers.

Customer Acquisition

Strong competitive advantage in attracting and retaining customers.

Optimises Time and Cost

Confusing and disjoined websites/apps have a higher bounce rate.

Increases Productivity

It lessen errors and promote a smoother workflow for employees.

Differentiate from Competitors

Communicate clearly why your product is superior to your competitors.

User Engagement

User Experience helps to design with an intention in mind.

A brilliant solution to the wrong problem can be worse than no solution at all...

– Don Norman

I have provided beautiful, strategy-led User Experience (UX) and User Interface Design (UI) solutions for many clients, View examples of my work or get started now by requesting a free quote