Case Studies Archive - Havish Design

Yapari: AI-Powered Learning

admin — Tue, 02 Sep 2025 09:23:21 +0000

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

AI Learning Concept Design Gamified UX

Spark of Curiosity

The journey began with an AI-powered script linking Notion and Anki for Japanese study. Beyond a simple bridge, it generated example sentences, organised materials, and turned scattered notes into a streamlined learning tool. The experiment revealed AI’s ability to accelerate learning and remove repetitive tasks. Inspired by Anki’s community-led content and Duolingo’s streak-driven culture, which hooked friends who once hated studying, the idea emerged: could AI create a gamified, adaptable platform where anyone could learn anything?

The Opportunity to Learn Anything

Research highlighted gaps in the edtech landscape. Duolingo excelled at gamification but was locked to predefined subjects. YouTube offered breadth without structured paths, and Anki enabled efficient learning but lacked accessibility for casual users. Supporting data showed over 70% of learners wanted gamified, short-session approaches for a wider range of topics, from SQL to Stoicism. Yapari aimed to combine adaptive AI, gamification, and community validation into one cohesive experience.

Project

Yapari (Self-initiated)

Timeline

Jun 2025 – Current

Role

Lead Designer & AI Explorer

Focus

Personalised learning experiences, AI integration and vision development

0

Students globally already using AI tools regularly in their studies

0

Learners wishing gamified short-session approaches could apply to wider topics

0

Global AI in education market (USD) in 2025, up 46% from 2024

0

Projected AI in education market (USD) by 2034

Shaping the Vision

The vision centred on three core requirements. First, Duolingo-style gamification to make learning habit-forming and engaging. Second, AI-powered course generation, giving users the ability to learn anything with content created on demand. Third, community-driven feedback to guide course quality, with popular courses receiving expert endorsement and real-time user input to adjust difficulty, specificity, and pacing. These principles guided early prototypes, ensuring the platform was adaptable, motivating, and trustworthy.

Ideas in Motion

Flows were developed using Figma Make, generating screens and iterating on outputs in near-real time. Five navigation pillars, Home, Learn, Explore, Community, Profile, balanced personalised learning with discovery and peer connection. AI-generated course outlines allowed learners to adjust difficulty, specificity, and duration, while streaks, XP, and daily quests kept engagement high. Leveraging AI tools across ideation and UI testing accelerated progress and informed real-time refinements.

Define

Outline requirements

Conduct gap analysis

Gather research insights

Ideate

Prompt refinement

Generate AI prototypes

Guided iteration

Refine

Build design foundations

Develop component library

Polish visual language

Test

AI user testing

Validate core flows

Iterate interactions

Systematic Refinement

With core flows established, the foundations of a design system brought cohesion. Influenced by Material Design 3 principles, a neutral and flexible aesthetic suitable for any subject began to take shape. Components such as cards, progress indicators, badges, and chips created a consistent grammar of interaction and were linked back to Figma Make to tighten the prototype. The visual language and modular components ensured the platform could scale as new topics, features, and experiments were added.

Testing & Next Steps

Lightweight tests were conducted using the AI user testing platform, Velocity. While future testing with more robust prototypes and human participants will be necessary, these sessions validated the core flows and identified opportunities to refine page structure, navigation, and interactions. The next steps involve embedding GPT into a functional prototype, evaluating course accuracy, and potentially assembling a small team to advance the concept toward a working app. Although still early-stage, Yapari already demonstrates how AI can unlock new possibilities for learning.

What I Learnt

Yapari reinforced the value of pairing ambitious ideas with structured validation. I learned to use AI as a creative partner, balance gamification with clarity, and embed trust into AI-generated content. It also highlighted how personal projects can push skill growth, inspire new thinking, and shape a vision capable of scaling into a real product.

AI Exploration

Ideation accelerated

Product Strategy

Vision solidified

Creative Ideation

Solutions surfaced

Learning Architecture

Foundation built

More projects

AI Learning Concept Design Gamified UX

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

Read case study

Agile Iteration Design Systems Usability Testing

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Read case study

Concept Design Research Synthesis Vision Strategy

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Read case study

The post Yapari: AI-Powered Learning appeared first on Havish Design.

Simplifying Ticket Buying

admin — Mon, 01 Sep 2025 15:16:19 +0000

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Agile Iteration Design Systems Usability Testing

The Beating Heart of Ticketmaster

The North America Event Details Page (EDP), where fans pick tickets for their next live experience, drives 66.7% of global traffic and serves as the heartbeat of Ticketmaster’s ticketing ecosystem. When I joined in summer 2023, the page was showing its age: outdated visuals, inconsistent patterns, and dense layouts made it difficult for fans to quickly find tickets. With the EDP often being a fan’s first interaction with the platform, stakeholders prioritised a visual overhaul that would deliver clarity, scale, and brand credibility.

Breathing New Life with GDS

The initial task was simple: start applying the new Global Design System foundations, such as colour, typography, and spacing. But as we progressed, it became clear that fans and promoters alike would benefit from going further. We pushed the scope into a full reskin, refining iconography, rebalancing spacing, and updating components across the board. This effort not only delivered a fresh, modern interface aligned with Ticketmaster’s branding but also helped establish a dedicated EDP component library for future work. The enhanced page was completed and released in March 2024, giving fans a cleaner and more trustworthy first impression.

Company

Ticketmaster (In-house)

Timeline

Sept 2023 – Aug 2025

Role

Lead Product Designer

Focus

UI optimisation, design system integration, feature enhancements

0

Ticketmaster traffic flows through the North American EDP

0

Participants rated the new filters as highly intuitive

0

Fans successfully unlocked exclusive offers on their first attempt

0

Faster context comprehension when map and list were linked dynamically

Fixing Map + List Friction

After the visual overhaul, focus shifted to deeper experiential improvements. I joined a cross-functional task force working in fast, sprint-like cycles to tackle high-priority issues. One major pain point was the disconnect between the interactive seat map and ticket listings: fans often used both, but the two felt poorly integrated. Research showed 30% of desktop users who clicked the map also interacted with the list, revealing untapped potential. We redesigned the interaction so selections in one view dynamically updated the other and refined zooming for a more fluid, intuitive browsing loop that matched how fans naturally explore tickets.

Smarter Filters, Faster Decisions

Filtering was another major opportunity. The existing filters were limited and unintuitive, making it difficult for fans to refine results quickly. We redesigned them to reflect real fan thinking, focusing on affordability, view preferences, and premium experiences, and improved placement and feedback so it was always clear when a filter was active and how results changed. User testing confirmed the new filters were highly intuitive (10/10 participants). These improvements helped fans zero in on relevant tickets faster, reducing cognitive load and boosting conversion potential.

Define

Set guidelines

Stakeholder alignment

Research insights

Modernise

Visual refresh

Typography update

Component overhaul

Enhance

Map/list integration

Filter improvements

Unlock optimisation

Validate

Internal testing

User feedback

Iteration cycles

Unlocking Access, Unlocking Trust

The unlock experience, where fans gain access to exclusive ticket offers through partner programs, was another area full of friction. Flows were fragmented, with too many entry points, confusing UI, and little contextual guidance. We consolidated everything into a single, intuitive pattern with optimised UI, clear instructions, and account linking to reduce manual input. User testing showed 100% of participants successfully unlocked on their first attempt, describing the process as straightforward and effortless. By unifying and simplifying the flow, we improved usability and strengthened trust in Ticketmaster’s core promise of access.

Scaling Toward a Fan-First Future

With each enhancement, the EDP evolved from a static information page into a flexible, scalable framework. The reskin aligned it with the Global Design System, the map and list improvements made browsing more fluid, the filtering overhaul sped up decision-making, and the unified unlock experience boosted clarity and confidence. Together, these steps created a foundation for ongoing global enhancements and ensured the EDP can continue to support new fan behaviours, partners, and inventory types.

What I Learnt

I learnt that successful transformation often starts with foundations. By delivering a clean reskin first, we built trust and momentum, which made it easier to expand scope into deeper interaction changes. Each enhancement was guided by research and fan behaviour, showing me that incremental, evidence-led improvements can compound into major impact at global scale.

Impact Amplified

Reskin completed

Agile Delivery

Sprints executed

Foundation Built

Future proofed

Feature Optimisation

Interactions refined

More projects

AI Learning Concept Design Gamified UX

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

Read case study

Agile Iteration Design Systems Usability Testing

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Read case study

Concept Design Research Synthesis Vision Strategy

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Read case study

The post Simplifying Ticket Buying appeared first on Havish Design.

Redefining the Smart Queue

admin — Sat, 30 Aug 2025 21:58:40 +0000

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Concept Design Research Synthesis Vision Strategy

The Risk of Standing Still

The Smart Queue, Ticketmaster’s flagship virtual queue, powers fair, secure, and scalable onsales for the world’s biggest events. Smart Queue 2.0 in July 2024 aligned the product with the brand, globalised the experience, and improved transparency with updated queue tips. But it was only a facelift. Fans still find queues stressful, sentiment remains fragile, and the rigid framework slows delivery of new features and UX improvements. I recognised the need to address fan pain points and rebuild the system for agility.

A Vision for the Future

I led the creation of a vision piece that told the story and gained buy-in from leadership, unlocking space for innovation. The goal was to define a queue that sets a new industry standard: transparent, proactive, and flexible, designed with fans and future growth in mind. This vision puts the fan first while establishing a stronger foundation for Ticketmaster, guided by one principle: build a scalable experience that empowers fans through guidance, proactive preparation, and transparency.

Company

Ticketmaster (In-house)

Timeline

Jan 2025 – Aug 2025

Role

Lead Product Designer

Focus

Vision setting, research-led design, and innovation strategy

0

Pain points uncovered through research consolidation

0

Opportunities prioritised into key features and optimisations

0

Fans reporting improved clarity and reduced stress in testing

0

Leadership, product, and engineering aligned on the vision

Research

Consolidate insights

Identify opportunities

Benchmark competitors

Define

Explore UI patterns

Map features

Sketch flows

Ideate

Define success metrics

Develop concepts

Prototype concepts

Inspire

Frame vision

Pitch to leadership

Align teams

Making the Queue Transparent

Research highlighted a strong need for clarity. 513 fans referenced issues like ticket availability, pricing, and waiting times. Estimated wait time was one of the most requested features in SQ 2.0 testing, with 7 in 10 mobile users wanting an ETA to avoid constantly checking the queue. Contextual queue tips and upfront visibility of prices and availability give fans clear guidance, reduce stress, and improve understanding. Automating these processes also boosts consistency, scales better, and frees internal teams from manual interventions.

Reducing Stress with Proactive Guidance

Fans often arrive at the ticket selection page underprepared, rushed, or confused. Around 20% of tickets for major concerts are held for presales, but fans frequently don’t know what they’re eligible for. Surfacing presale and unlockable ticket types early, flagging expired saved cards, and enabling pre-selection of budget, quantity, and seating preferences lets fans proactively prepare. Early testing showed 9 out of 10 fans found pre-selected ticket preferences relevant and helpful. These interventions reduce drop-off, personalise the journey, and give fans confidence before checkout.

Building for Consistency and Scale

Approximately 90% of fans don’t scroll, meaning key elements like seat maps or FAQs are often missed. A modular, flexible layout aligned with the Global Design System prioritises discoverability, accessibility, and consistent interaction patterns. Only 30% of current components comply with upcoming foundations, so improving alignment closes gaps, ensures maintainability, and supports faster delivery of new features. Accessibility improvements baked in from day one reduce friction for all users, while platform-wide consistency accelerates rollout and creates a seamless, inclusive fan experience.

Turning Vision into Reality

I led this vision piece to challenge existing processes and secure leadership buy-in, creating focus and resources to make the vision real. Four things were essential: clear milestones for aligned progress, a test-and-learn culture to validate and iterate quickly, a focused team shielded from distractions, and designing the full journey to deliver a seamless fan experience. With these foundations, Smart Queue can evolve into a smarter, more seamless system that reduces stress, increases clarity, and guides fans confidently through high-demand onsales, delivering value from first click to sold out.

What I Learnt

Limited scope for fan-facing improvements pushed me to create a vision to drive impact and change. It reinforced how shaping a product vision defines leadership within a product area. Consolidating research and developing blue-sky ideas let me push creative boundaries beyond current constraints. It also fostered cross-team collaboration, shared inspiration, and uncovered design system improvements, connecting visionary thinking to practical execution. The vision is now set, and the next step is bringing it to life.

Shaped the Future

Strategy unlocked

Championed Innovation

Change accelerated

Fostered Collaboration

Inspiration shared

Guided by Data

Purpose anchored

More projects

AI Learning Concept Design Gamified UX

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

Read case study

Agile Iteration Design Systems Usability Testing

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Read case study

Concept Design Research Synthesis Vision Strategy

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Read case study

The post Redefining the Smart Queue appeared first on Havish Design.

Globalising Smart Queue

admin — Wed, 27 Aug 2025 21:25:26 +0000

Globalising Smart Queue

Reskinning and globalising Ticketmaster’s flagship virtual queuing system to improve fan transparency and prepare for record-breaking onsales.

Design Systems Globalisation Interaction Design

A Fair, Secure, and Scalable Queue

Ticketmaster’s Smart Queue handles millions of fans during the world’s biggest ticket onsales. In 2024, I led a reskin to align the experience with the evolving brand and design system, transforming the product for a major global rollout. The update improved queue transparency and prepared the system for record-breaking events, including the Oasis 2025 tour. The launch reduced fan confusion, unified the experience across markets, and made the system fair, secure, and scalable.

Pushing Beyond a Simple Reskin

What began as a modest reskin quickly evolved into a more ambitious effort. The original scope limited us to minor visual updates and small interaction changes, but I pushed for improvements that would elevate the product across the end-to-end ticketing journey. Building on my work with the Event Details Page (EDP) and Checkout redesign, I drove consistency across the entire flow, ensuring Smart Queue felt like a natural part of the ecosystem rather than a standalone utility.

Company

Ticketmaster (In-house)

Timeline

Jan 2024 – Jul 2024

Role

Lead Product Designer

Focus

UX improvements, global rollout, and design system integration

0

Markets rolled out in rapid succession across UK, NA & Europe

0

Fans managed in queues during Oasis’ reunion onsales

0

Record for highest amount of SQ 2.0 queues running in one day

0

Increase in queue tip exposure after Smart Queue 2.0

Guiding Fans with Dynamic Queue Tips

Improving transparency meant giving fans clearer guidance throughout their journey. Working closely with the fan marketing team, we designed dynamic, stage-specific tips for the lobby, waiting room, and active queue. Instead of static copy, we introduced a scrolling carousel that adapted as fans progressed. We also compressed the UI so tips always remained above the fold, a simple but impactful change that helped fans stay informed without friction.

Designing for Global Scale

To prepare Smart Queue for worldwide rollout, we aligned it closely with the global design system, standardising typography, colour, and spacing while consolidating custom components through rigorous stress testing, including multi-language scenarios. We also solved accessibility and flexibility challenges around hero imagery, where event artwork was often unpredictable. By refining gradients, positioning, and overlays, we balanced bold visuals with AAA text and icon standards. The result was a system that not only scaled globally but could also adapt seamlessly to rebranding for partners like Live Nation.

Shape vision

Align goals

Frame scope

Design

Map flows

Stress test

Refine language

Build

Dev partnership

Launch UK/IE

Track outcomes

Scale

21 markets

Measure impact

Strengthen systems

Oasis: The Ultimate Stress Test

The first release coincided with Oasis’ long-awaited reunion onsales — the biggest in UK and Irish history. The new Smart Queue supported 17 simultaneous high-demand events, managing over 10 million fans in line, nearly a third of them from abroad. In the first three hours of presale alone, 362,800 tickets were sold, contributing to more than 956,000 across the full sale windows. The rollout proved the system’s strength, with improved stability, stronger abuse detection, and record-breaking throughput powered by the debut of Checkout 2.0.

From UK to the World

Following Oasis’ record-breaking onsales, the new Smart Queue rolled out across 21 markets — first the UK and Ireland, then North America, and finally Europe. The release didn’t just support one historic moment; it laid the groundwork for a fairer, more consistent, and scalable queueing experience for fans worldwide.

What I Learnt

Smart Queue 2.0 showed me how pushing beyond a simple reskin, and aligning design vision with product strategy, can unlock far greater impact. It also reinforced that small, well-placed changes can shift fan trust at scale, and that true simplicity comes from design consistency across the entire journey, not just isolated screens.

Built Fan Trust

Clarity delivered

Consistent by Design

Seamless at scale

Proved Global Scale

Globally resilient

Pushed Beyond Scope

Strategy realised

More projects

AI Learning Concept Design Gamified UX

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

Read case study

Agile Iteration Design Systems Usability Testing

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Read case study

Concept Design Research Synthesis Vision Strategy

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Read case study

The post Globalising Smart Queue appeared first on Havish Design.

Shared EHR Optimisation

admin — Tue, 24 Jan 2023 23:12:52 +0000

Shared EHR Optimisation

Design support, prototyping and user research for the UK’s leading shared electronic healthcare record system.

Prototyping UX Research Workshop

Project overview

This project was carried out for a company that is an innovator in the digital healthcare domain, providing UX support for the UK’s leading shared electronic healthcare record system (EHR). The EHR enables a huge range of healthcare professionals (HCPs) to share patient data across local authorities, care services, trusts and other healthcare organisations. The system works by extracting data from the local systems used throughout the different care settings and amalgamating it into one integrated record. Along with equipping HCPs with rich patient data it also empowers patients by allowing them to access their records. The purpose of this project was to conduct user research to inform the improvement of a new version of the EHR that had been built into a sophisticated prototype. The aim was to generate data from a wide range of healthcare stakeholders to identify gaps, overcome pain points and understand user needs to refine this next-generation prototype.

Process

There were three main goals to achieve during this project. The first was to provide design support for the areas of the system outside of the patient record itself, which included the login, search and patient lists. This had yet to be redesigned in the new prototype. To support the process of designing this experience an expert review of the currently deployed EHR was conducted to empathise with any existing problems users may encounter. Following this, a user flow was sketched out and mid-fidelity wireframes were created. The second project goal was to gather extensive user-generated data to understand more about the transactional needs of a wide range of healthcare stakeholders by conducting 16 individual and 3 group usability testing sessions. Insights from the data gathered were then extracted through a thematic analysis. Lastly, the final project goal was to leverage this data and refine the design concept through iterative prototype testing. The outputs from this were an enhanced prototype, including design recommendations delivered with a style guide and component library. With a wealth of newly generated data, there was a subsequent decision to facilitate a design thinking workshop to further generate potential solutions through a stakeholder discussion and crazy 8s.

Client

UK’s leading Shared EHR

Agency

Fishawack Health

Duration

12 weeks

Test

Expert review

Usability testing

Define

User flow

Thematic analysis

Design

Wireframes

Enhanced prototype

Ideate

Design thinking workshop

Stakeholder discussion

Crazy 8s

Design support

Accessing a patient record on the EHR can either be done directly through another system, for example, a social worker may have a record up on their business-as-usual (BAU) system where they can click through and launch the EHR for that same patient. Alternatively, the HCP can log in directly to the EHR, search for a patient and open their record. The latter behaviour keeps the user entirely within the EHR. Therefore, enhancing this experience will promote the potential transition away from the BAU system to using the EHR as the preferred patient record system. Designing this experience began with an expert review. Leveraging Jakob Nielsen’s heuristics helped to empathise with the user and understand the existing problems with the current system. A resulting list of recommendations was produced, which later was used as a springboard for ideation. Next, a user flow was sketched out to detail the user’s path from signing in to searching for a user. This defined what screens were necessary and laid out the logic the user has to navigate through. Based on this and the design recommendations discovered in the expert review, a series of mid-fidelity wireframes were designed. This was as far as the client wanted to progress with the design outside of the record itself. It was proposed that the wireframes could be used to create a prototype or act as a basic stimulus to elicit user feedback and test this concept.

User flows

View this asset in more detail

Wireframes

View this asset in more detail

User-generated data

The main advantage of the EHR is that HCPs from all across the healthcare ecosystem can utilise the most up-to-date shared data. This means that a wide variety of types of HCPs, or users, interact with the EHR, such as GPs, consultants, social workers, community matrons, occupational therapists, paramedics and even administerial staff. Therefore, to truly understand it the user research needed to be conducted with a large range of user groups. To achieve this, a balanced amount of each of these HCPs needed to be recruited. At first, this proved to be difficult due to busy schedules and finding candidates with sufficient experience using the EHR. Ultimately, the usability testing was spread throughout the sprint cycles with appropriate users as and when they became available, overlapping with the time to iterate on the prototype design. Fortunately, after a reduced first round of individual testing, a UK hospital trust facilitated attendance at a conference where 3 group usability testing sessions were conducted. Data was analysed and funnelled into prototype design, which was then ready to be tested in subsequent individual sessions, resulting in 16 in total. Analysis of all sessions was amalgamated and a thematic analysis produced 12 main themes, as well as page-by-page usability commentary.

Prototype testing

As the original project plan needed to be adapted due to barriers that needed to be overcome with recruitment, prototype design focused on creating a single enhanced iteration. In total, there were 4 rounds of testing. The first 3 rounds concentrated on gathering as much data from testing the client-built prototype. Simultaneously, the data was analysed and fed into an enhanced design created within Figma. As the analysis progressed, several areas of improvement started to become clear. First, there was a lack of consistent and well-executed UI design across the components that made up the EHR, therefore, Google Material Design was adopted as a design system and a component library and style guide were built based on that. Once that was established, several testable design concepts were built into the enhanced prototype, including improved left-hand navigation, a patient banner containing critical information, design patterns for modals, reorganisation of the summary page and several redesigned pages found to be the most problematic. Once this enhanced prototype was ready it was subjected to the final round of 8 individual usability testing sessions.

Prototype

View this asset in more detail

Component library

View this asset in more detail

Design thinking workshop

With a wealth of data produced from 4 rounds of usability testing of both the new version built by the client and the enhanced Figma prototype, it was decided to facilitate a design thinking workshop to further ideate more design concepts and define a realistic direction for the future of the EHR. Out of the 12 themes resulting from the thematic analysis, 3 were prioritised and formed the structure of the workshop. These key themes focused on data density, navigation and usability, and the potential for transactional interactions. The workshop was run as a hybrid session taking advantage of the whiteboard software, Miro, as the centralised platform for note-taking and organisation. For each prioritised theme, a crazy 8 activity was run to rapidly generate sketches to encourage further concept generation. After this, an open discussion and prioritisation were held to determine a foundational plan of action for each of the themes.

Project reflection

This project attempted to follow a conventional design thinking approach of moving through cycles of empathising with the user, defining the problem, ideating a solution, building a prototype and testing that prototype. It was originally planned that several unbroken cycles would take place, incrementally moving towards the most effective solution. Albeit not as many as planned, there was still an opportunity to make one complete cycle. This project showed the importance of achieving flexibility in the planned sprint cycles and adaptability with recruitment and planning. One other significant learning was understanding how critical it is to have meaningful and accurate content populating a prototype. Trying to extrapolate insights from information-seeking and information-processing behaviours was difficult when the content either confused the user or left too much up to the imagination. To conclude, iteration cycles could have continued and further improvements could have been mapped out, however, as the agreed project length came to an end, all the completed outputs were wrapped up into a deliverables pack providing the client with a clear journey to the next market-ready version of the EHR.

More projects

AI Learning Concept Design Gamified UX

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

Read case study

Agile Iteration Design Systems Usability Testing

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Read case study

Concept Design Research Synthesis Vision Strategy

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Read case study

The post Shared EHR Optimisation appeared first on Havish Design.

Antum Loyalty App

admin — Wed, 18 Jan 2023 22:43:16 +0000

Antum Loyalty App

Fast-paced project operating on agile sprint cycles to deliver dev-ready UI designs for a loyalty app and website.

Design Systems UI Design Wireframing

Project overview

This project was undertaken for the Fawaz Alhokair Group (FAH), the largest developer, owner, and manager of department stores and fashion retail in Saudi Arabia. The goal was to develop a multi-brand loyalty programme with online initiatives and rewards for patrons of their department stores. One aim was to bring together partners currently outside FAH adding value by covering more of the customer needs, including utilities, banking and travel. The experience of the loyalty programme needed to be seamless, multichannel, fully responsive and available as a native app, as well as a website. By creating a great user experience, the loyalty programme would help FAH achieve a wide range of business objectives, including, attracting new customers, increasing repeat purchases, improving customer retention and enhancing the overall customer experience. A team of UX/UI designers, formed by Designit, was tasked to design the digital experience for the loyalty programme based on a detailed set of functional requirements, established from previous research efforts.

Process

Before this contract of UX/UI design work, extensive research had been conducted to uncover the project requirements, business objectives and customer needs. This provided competitor benchmarking, customer archetypes and trend insights, which formed the experience principles and functional requirements in the brief. First, this comprehensive design brief, among other documents, was digested by the project team during a document review. Next, the features expected to be built into the digital experience were outlined in a series of user flows. These specified what screens and interactions needed to be designed, therefore for each feature flow a matching set of low-fidelity wireframes was created in Figma, determining page structure. Alongside the development of the design brief, a branding concept had been created, and this drove the direction of a mood board, dictating the look and feel of the product. Equipped with this, the wireframes were elevated into high-fidelity UI design. To ensure the development of such extensive UI was consistent and efficient all components, icons and styles were built and meticulously organised into a custom design system. Here, a localisation team was brought in to convert everything into Arabic. Screens for each of the features were organised into a deliverables pack in Figma, where the client team could leave feedback until design amendments were ready for sign-off, resulting in a complete dev-ready design document.

Client

Fawaz Alhokair Group

Agency

Designit

Duration

6 weeks

Define

Document review

User flows

Ideate

Wireframes

Mood board

Design

UI design

Design system

Deliver

Deliverables pack

Design sprints

The scope of this project was immense for the relatively short amount of time allocated. With only 6 weeks from start to finish, the project needed clear organisation within the team and manageable sprint cycles. The group of 6 UX/UI designers was split into 3 feature teams, each ready to tackle a portion of the total 34 product features across 3 sprints, lasting 2 weeks each. Each sprint would consist of first creating the user flows for each feature, then the lo-fi wireframes and finally developing those into hi-fi UI designs, following the direction of the mood board and creating necessary components along the way. After each key deliverable had been delivered it would be added to the client-facing deliverables pack, where feedback was gathered and actioned before moving forward. Once all specified features were brought together as a whole, the final product would adhere to the experience principles; providing a seamless omnichannel experience, making users feel valued through special treatment, helping users to better themselves by aligning rewards to personal goals, and fostering a social vibe by forging real-life connections.

Mood board

View this asset in more detail

Early-stage design

Each feature team had to tackle around 3-4 features per sprint. Using the highly detailed functional requirements in the brief, knowledge of best practices and logical reasoning work on the user flows started. These laid out the user’s movement through the product, mapping out each step from the point of entry right through to the final interaction. Defining the logic for each feature was vital as it helps to calculate the number of screens that needed to be designed, as well as confirm with the client their expectations of how the final product will function. Once the logic for a feature had been mapped out, lo-fi wireframes were sketched out for all required forms; native app, mobile web, tablet web and desktop web. These wireframes illustrated the space allocation, prioritisation of content, functionalities available, and intended behaviours. It was decided that all this work should be contained within Figma as it would streamline the transition to the final UI design and promote an organised and efficient working environment.

UI design

Starting with lo-fi wireframes first allowed for a large number of screens to be laid out with a great degree of agility. This considerably simplified the process of designing the hi-fi UI design. The mood board created at the beginning of the project followed the colour scheme and visual tone of the brand concept; a minimal, clean and modern feel utilising purple as the accent colour and bold imagery to invoke a luxurious impression. This drove the decision to choose a suitable UI library as a foundation for the design system. As screens were designed, components were built into the design system and integrated throughout the teams, increasing efficiency the more it evolved. Despite the smaller teams working individually through dedicated features lists, it was a highly dynamic working style where teams would share progress and collaborate when and where it was needed. The result was a complete translation of the user interactions, beginning to end, into a set of dev-ready screens organised into a comprehensive deliverables pack.

Deliverables pack

View this asset in more detail

Design system

View this asset in more detail

Project reflection

This project was quite a testament to the way that remote design teams can work efficiently if equipped with the correct tools and backed up with solid planning and organisation. With the project lead in Germany, the design lead in Indonesia, the client in Saudi Arabia and the design team split up between the UK and India, it was truly an international effort. This increased the importance of sensitivity to everyone’s working styles and flexibility to overcome inevitable barriers. However, keeping everything within Figma and meticulously following the design systems allows for a great amount of work to be completed with speed and agility. Furthermore, designing within the design system meant the process of localising the UI was also as simple as possible, despite this requiring flipping the alignment of all the components to flow right to left, which is natural for Arabic-speaking users.

More projects

AI Learning Concept Design Gamified UX

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

Read case study

Agile Iteration Design Systems Usability Testing

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Read case study

Concept Design Research Synthesis Vision Strategy

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Read case study

The post Antum Loyalty App appeared first on Havish Design.

Urban Fabric Recruitment

admin — Mon, 16 Jan 2023 12:47:13 +0000

Urban Fabric Recruitment

Complete brand setup from logo to website for property management recruitment startup.

Branding UI Design Web Development

Project overview

Urban Fabric was the brainchild of an experienced recruiter, who split off from their previous company to start their own venture, a recruitment startup that specialises in property management and surveyors. As a fledgling business, they needed to create a company image and an online presence from scratch. Grounded in the property sector Urban Fabric needed a brand that reflects their connection to the balance between the man-made and the natural, and a website to match. They wanted to build something exciting and modern, with a robust visual identity influenced by topography and cartography.

Process

The goal was to kick start the growth of Urban Fabric with a completely bespoke website with an excellent user experience and a foundational brand package to create a standout aesthetic. The first step was to gather as much information as possible about the business needs and desires. A stakeholder questionnaire was distributed that collected data on the business message, current assets, potential website information architecture (IA), competitors within the area and any inspirational resources. Equipped with an understanding of the business message and what inspires the client a mood board was generated. This fed directly into the logo design, including building the colour scheme and aligning the typography, forming a foundational branding package. The remaining data from the stakeholder questionnaire informed the IA, specified in a site map, and the process of detailing the design requirements for the website. Next, an iterative design process resulted in the finalised UI design, which was then all developed in-house into a brand-spanking new website build for the very satisfied Urban Fabric Recruitment.

Client

Urban Fabric Recruitment

Agency

Havish Design

Duration

12 weeks

Discover

Stakeholder questionnaire

Mood board

Branding

Logo design

Branding package

Define

Site map

Design requirements

Design

UI design

Website build

Branding

The company name originates from the fabric of city life and the intertwining buildings and streets. The client has a strong interest in maps and topography and wanted this reflected in the company image. At first, the mood board took more of a brutalist monochromatic direction. However, it was decided to implement colours that represented the duality between natural resources and urban development. The rich greens symbolise grass and trees and the sand colours for dirt and brick. In another light, the sand can seem gold in appearance and alongside the green tones, it translates to financial progress and prestige. Two web-optimised fonts were chosen for the typography, a bold header font that suited the original brutalist direction and an uncomplicated sans that lent itself to a clean UI design. Logo design evolved from many throwaway sketches to initially form two concepts, which were put in front of the client. A direction was chosen and tweaks were made to settle on the final form.

Mood board

View this asset in more detail

Design requirements

The data from the stakeholder questionnaire provided foundational guidelines when detailing the design requirements, supplemented by knowledge of current best practices and the market landscape. Furthermore, it gave insights into what content the client expected to be on the website. Based on that, a recommended IA was formulated and laid out visually in the form of a site map. The website has two types of users; candidates and clients. Candidates looking for a new job must feel confident that Urban Fabric can provide support. Clients provide those potential jobs and must be able to use the digital service without fuss.

Site map

View this asset in more detail

A website design language that is in line with the growing company brand.

Multiple contact forms for specific user tasks, e.g. upload a CV, upload a Job and a general enquiry.

Use of topographic illustrations to enhance the design as well as photos to make it more personable.

Coded with a focus on SEO to improve searchability and Google rankings.

User-friendly admin area so content can be quickly and easily updated.

A logical layout of content so potential clients can obtain information painlessly.

An easy-to-update jobs board that will display all current vacancies on the front end.

Fully responsive website to make it desktop, tablet and mobile friendly.

Website design

Following the design requirements, the branding package and IA, hi-fi screens were designed using Figma. To set up a design environment for efficiency and agility, the design system developed by Havish Design was adapted to organise components, colours and typography for this project. First, the home page was designed and delivered to the client to present the overall look and feel. Feedback was incorporated into further iterations and the remaining pages were created. Once the dev-ready designs were signed off, the bespoke website was developed and prepared for a painless release.

Design files

View the original Figma file

UFR Website

View the live website

Project reflection

The project undertaken for Urban Fabric Recruitment was a relatively cut-and-dry process, one that has been tried and tested at Havish Design. The overriding benefit was that the client felt guided throughout and comfortable with the direction it took at each stage. This helped the project to run smoothly and relatively painlessly. The result was that the client received something that exceeded their expectations, all on time and within budget. The lesson here was if it isn’t broken, don’t fix it.

More projects

AI Learning Concept Design Gamified UX

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

Read case study

Agile Iteration Design Systems Usability Testing

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Read case study

Concept Design Research Synthesis Vision Strategy

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Read case study

The post Urban Fabric Recruitment appeared first on Havish Design.

Fallen Oak Frames

admin — Sun, 15 Jan 2023 14:54:53 +0000

Fallen Oak Frames

Bespoke website and rebrand for a traditional carpentry and oak frame restoration specialist.

Branding UI Design Web Development

Project overview

Fallen Oak Carpentry deals with all aspects of traditional oak frame carpentry. Using techniques handed down through generations Fallen Oak specialise in fitting green oak frames and restoring listed buildings. As a new facet of the business, they created a range of garden frames to be marketed as relatively out-of-the-box products to complement their highly bespoke service. The company had the beginnings of a brand, albeit basic and needed it to be more functional. Their only online channel was Instagram and they needed a website to push the business, especially the catalogue of new garden products. Fallen Oak wanted a brand that respected the traditional values of their craft and a platform to show off the product imagery.

Process

The proposal for Fallen Oak was to build a completely bespoke website with an excellent user experience and to create a foundational brand package to boost their company image, showing off their refined craft. First, a stakeholder questionnaire was distributed to gather insights into the current state of the business, including their needs and desires. This provided an understanding of the business message, current assets, potential website information architecture, competitors within the area and any inspirational resources. Next, a mood board was produced based on what Fallen Oak stands for and the features of the client’s inspiration. This drove the development of the branding package, which comprised the logo design, colour scheme and typography. For the purposes of the website, a competitor analysis was conducted leveraging data collected from the stakeholder questionnaire, allowing the design requirements to be defined. Next, the UI design was developed through an iterative process working closely with the client, aligning with their needs. Once finalised the website build was developed in-house resulting in a website that allows for Fallen Oak’s beautiful craft to shine.

Client

Fallen Oak Frames

Agency

Havish Design

Duration

12 weeks

Discover

Stakeholder questionnaire

Mood board

Branding

Logo design

Branding package

Define

Competitor analysis

Design requirements

Design

UI design

Website build

Branding

At the heart of Fallen Oak Frames is the knowledge and respect for traditional carpentry techniques and oak timber, which has been passed down through the family. This needed to be worked into the brand and the client was keen to integrate tools that have been used for hundreds of years. One requirement for the logo was that it also needed to work well as a stamp either embossed into a metal plate or branded straight into the wooden frame. As a result, the inspiration gathered in the mood board led the logo to be monochromatic and to use simple clean lines ensuring it pops from the background. Initially, a lighter palate was considered, however, the client preferred much darker colours using dark earthy greens and black as the primary colour scheme. These were complemented by a bright gold hue to be used for the accents and interactive elements, together achieving a distinguished and natural feel. A soft linear font was customised, swapping out the “a” for a traditional divider tool, and used only for the logo itself, whereas a web-optimised sans font was utilised in the UI design to maximise utility. Two logo design concepts were developed that evolved from a series of sketches. After presenting to the client, there was a standout direction that closely matched the one initially discovered in the mood board. A few iterations later, the final form was finalised, including responsive logo alternatives to optimise functionality.

Mood board

View this asset in more detail

Design requirments

The recommended information architecture (IA) and design requirements were detailed using the data gathered from the stakeholder questionnaire, which provided insights into the client expectations and needs, as well as the competitor analysis that improved understanding of the market landscape. Before proceeding with the design the IA and requirements were approved by the client. Users’ desired behaviour and the end goal are simple; to make an enquiry about booking in Fallen Oak for a project. However, the site provides two clear journeys for the different services, the first being for a customer that needs large-scale framing or restoration, the second being for those interested in garden structure products. The structure of the website is anchored on this distinction and the information is organised to guide the user effortlessly to their goal.

Competitor analysis

View this asset in more detail

The website design must follow the specifications of branding guidelines and build the company image.

Potential clients must be guided to a simple contact form for them to enquire about a new project.

Built with a user-friendly admin area to ensure that content can be easily maintained.

Created using a component library and a style guide to streamline the design process.

Logical IA that painlessly guides users through their journey to the intended goal.

A page that displays the garden structure products that can be easily managed by the webmaster.

Use of professional photos that showcase the services and products that the company provides.

Designed to be optimised on desktop, tablet and mobile making it fully responsive.

Website design

After client approval, the design requirements and IA informed the initial page structure and the branding package fed into building a component library, based on an ever-growing design system developed by Havish Design. This helped set up an effective design environment in Figma, enabling using components, colours and typography with agility. The first delivery to the client was the overall look and feel presented in the home page hi-fi UI design. The feedback captured was incorporated into the design of the remaining screens. This iterative cycle of feedback and improvement continued until the design was completely aligned with the stakeholder requirements. Following this, the dev-ready designs were developed into a website, tested and then released with minimal friction, resulting in a made-to-measure digital experience for the user and a highly satisfied client.

Fallen Oak website

View the live website

Design files

View the original Figma file

Project Reflection

The project detailed here for Fallen Oak Frames followed a format that has matured throughout the process of completing various projects at Havish Design. This helped to build confidence that an extensive project could be completed with agility and delivered according to the client‘s needs within a relatively short time frame. They felt in control of the direction of the project while feeling supported, ultimately resulting in a digital transformation that assimilates both the stakeholder and user needs. Fallen Oak now have a robust brand and user-friendly platform that brings awareness to their unique services and products, with the potential to boost company growth.

More projects

AI Learning Concept Design Gamified UX

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

Read case study

Agile Iteration Design Systems Usability Testing

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Read case study

Concept Design Research Synthesis Vision Strategy

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Read case study

The post Fallen Oak Frames appeared first on Havish Design.