NOOON
FRONT-END DESIGN STRATEGY
CONCEPTUAL SEARCH FRAMEWORK
RESEARCH
CONCEPT DEVELOPMENT
INTERACTION DESIGN
NARRATIVE & VISUAL STRATEGY
NOOON IS A RESEARCH-LED PROTOTYPE EXPLORING HOW SEARCH SYSTEMS CAN BE DESIGNED TO SUPPORT HUMAN WELLBEING.
THE WORK REQUIRED TRANSLATING COMPLEX, INTERDISCIPLINARY THINKING INTO A COHERENT & ACCESSIBLE SYSTEM; ONE THAT COULD HOLD TECHNICAL PRECISION, ETHICAL INTENTION & HUMAN-CENTRED DESIGN WITHIN A SINGLE INTERFACE.
CHALLENGE
Designing for complexity without overwhelming the user.
Nooon’s thesis, rethinking search algorithms that shape how people think, trust & engage with information, challenged us to:
represent multiple layers of meaning without visual overload
balance precision with accessibility
create a system that feels both grounded & exploratory
remain intuitive, legible & engaging.
SOLUTION
A symbolic & structured interface designed to translate complex systems into an intuitive experience.
The front-end development focused on creating a visual & interaction system capable of holding technical, ethical & human-centred concepts without relying on heavy explanation. The interface was designed to:
translate abstract ideas into visual form
use symbolism to communicate layered meaning
balance structure with softness to support cognition.
The solution centres on a cohesive system where each element carries both functional & conceptual weight.
By combining structured layouts, symbolic elements & intentional motion, the interface allows the project’s complexity to be understood through interaction & composition.
DESIGN FOR FLOW,
NOT FRICTION.
CORE SYSTEM
Form, motion & meaning
At the centre of the interface is a unifying visual structure translating multiple layers of the project into a single, coherent system.
Instead of relying on conventional UI patterns, the design introduces a central object carrying both functional & symbolic weight.
The Shuttlecock
Serving as the core of the system, the shuttlecock operates as a point of orientation within the interface & a structural framework guiding expansion & interaction.
Its form reflects multiple dimensions:
a trajectory-driven object grounded in physics, precision & balance;
a reference to badminton, where movement, timing & control are essential;
a connection to the project’s leader - Noor’s lived experience - where disability & adaption shaped strength & mastery.
At the same time, the shuttlecock’s role on the website evokes natural forms: a radiant sun, a flower in bloom, a form in motion, an object suspended between stillness & flight.
Light as Direction
A soft yellow field radiates from the centre of the system, introducing a sense of illumination, warmth & guidance. Referencing the meaning of the client’s name in Arabic, Noor - light, as both meaning & direction - the system positions knowledge as something to be accessed, not obscured.
Mathematical Framework
Overlaid axis & equations introduce a layer of precision to establish: scientific grounding, a sense of structure & measurement, a bridge between two of the client’s cherished worlds: analytical thinking & creative expression.
System Expansion
The system then extends outward through radial connections, introducing a framework where information is neither stacked nor ranked, but distributed - an essential feature of the project.
The structure suggests:
multiple entry points
non-linear exploration
unfolding ideas
a shift away from hierarchical search models.
Together, these elements & their interactivity embed meaning, where understanding & design functions as both interface & language.
DESIGN LANGUAGE
Grounded, playful, intentional.
The visual language draws on the juxtaposition of a formal lab aesthetic & the natural world, invoking structure with softness to support cognition & exploration.
The Notebook System
The grid & paper-like textures reference the familiarity of a notebook, associating learning, experimentation & thinking in progress.
The interface functions as a living record of the project’s research, creating space for interpretation, iteration & discovery.
Earthing
A muted green palette ground’s the project as subtle scrolling anchors the interface, introducing a sense of calm & stability, reduced cognitive intensity & an environment that feels accessible.
The use of green contrasts with high-stimulation digital interfaces, positioning the project’s experience as one that supports sustained attention & ease of navigation.
The Night Sky
The interface resolves into a dark, expansive footer, shifting from structured interaction into open space, which introduces:
a sense of depth & stillness
a release from structure into possibility
a visual contrast that brings the design system into balance.
Within this space, animated shooting stars transform the shuttlecock, connecting it to multiple ideas - a continuation of trajectory & movement; a reflection of nature’s cosmic systems; a symbolic release of structured knowledge giving way to exploration.
OUTCOMES
A cohesive system translating complex ideas into an intuitive, navigable experience.
The project demonstrates how design can bridge research, technology & lived experience without relying on heavy explanation or conventional interface patterns.
Key outcomes include:
a visual & interaction system grounded in symbolic & structural thinking
an approach to accessibility informed by lived experience, as well as compliance
a design language capable of holding technical, ethical & human-centred concepts simultaneously
a research-driven prototype exploring alternative ways search systems can be structured & understood
WHY THIS MATTERS
Search systems shape how knowledge is accessed, interpreted & trusted.
The work reflects rooting systems where meaning, structure & experience are considered together; where clarity is the foundation & design plays a role in shaping how people understand the world around them.
SCOPE OF WORK
RESEARCH
Search Systems Analysis
Ethical Framework Exploration
Accessibility Standards Review
Cognitive & Behavioural Considerations
STRATEGY
Systems Architecture Definition
Ethical Constraints Mapping
Information Flow Design
Concept Development
DESIGN
Art Direction
Symbolic System Design
Visual Language Development
Visual Asset Creation
Interaction Design
DEVELOPMENT
Technical Strategy
Technical Consulting
Framer Development
Motion Development
Accessibility Considerations
Cross-Device Testing
Quality Assurance
CONTENT
Copywriting
PROJECT MANAGEMENT & DELIVERY
End-to-End Execution
Iteration & Refinement
Quality Assurance
