DIGITAL PRODUCT & TRANSFORMATION DESIGN AGENCY

Where business, user research, technology, creativity, converge and transform to produce lean strategic viable sustainable digital experiences

webinmotion, guiding you through a digital ocean, practicing

transparency | diversity, inclusion, equality | sustainability, longevity

"No job is too hard if you are smart enough to find someone else to do it for you."

- Aristotle

Who we are

webinmotion has been at the forefront of web application design and development for two decades. Our experience spans a diverse range of business sectors, from budding cottage industries to multinational corporations. Whether working locally or on a global scale, we've adeptly managed stakeholders and coordinated with remote development teams.
Our journey has been marked by continuous evolution, adapting to the ever-changing landscapes of technology, business, and diverse ecosystems. Our strategic approach harnesses the power of Drupal, an industry-leading open-source CMS framework, to build robust digital solutions. Central to our ethos is a commitment to HCI (Human-Centered Interaction), ensuring that every digital experience we craft is intuitive, engaging, and tailored to meet the needs of the end-user.

Below takes you through a typical full product cycle and the list of services provided, from Stakeholder Engagement, Product Modelling, User Research, Development and User Interface Design, Code Production, Launch, to post launch services such as reports, analytics, continued support with maintenance, new product features and security updates.
Produced in an AGILE environment

Our Process
Join us as we walk you through our comprehensive product cycle:

  • Stakeholder Engagement: Building relationships and understanding needs.
  • Modelling: Crafting a blueprint for success.
  • User Research: Delving deep into the needs and behaviours of your audience.
  • Development & UI Design: Bringing visions to life with a user-centric approach.
  • Code Production: Crafting robust and efficient code.
  • Launch: Introducing your product to the world.
  • Post-Launch Services: Offering reports, analytics, ongoing support, feature updates, and security enhancements.
Our projects are executed in an AGILE environment, ensuring flexibility, responsiveness, and timely delivery.

Engagement with you

Navigating the world of technology can be costly without proper planning and a well-defined strategy. That's where we come in.
Our process begins with a thorough exploration of your requirements. We believe in setting clear expectations from the outset. With meticulous project management, we ensure transparency at every stage of the product cycle. Our detailed roadmaps, complete with timelines, phases, and milestones, keep you informed and involved.
If we employ the SCRUM methodology for feature completion, you're not just a spectator. You'll be actively invited to demonstrations and provided with burndown charts, ensuring you're always in the loop regarding timings and deliverables.
Roadmaps, a timeline with milestones are central to scheduling and visualise a deployment or implementation strategy. Milestone meetings are advised, but due to time contraints in all parties involved, OKR (objectives and key results) tools are there to help stakeholders access current production statuses. We habitually use communication applications like Teams and Slack so all in production are engaged with the ongoing build.

"It takes but a brief time to scent life philosophy of anyone. It is defined in the conversation, in the look of the eye and the general mien of the person. It has no hiding place."

- George Matthew Adams

"you can fix it on the drafting board now or or later on the construction site with a sledge hammer"

- The Wright Brothers

Product Modelling, Product Design


Insightful Discovery and Strategic Analysis:
Our process begins with a thorough analysis of your business model during the discovery phase, providing vital insights and strategic direction. We delve into a SWOT analysis, assess your product's value propositions, and analyze your target user demographics, along with other pertinent user data. This comprehensive approach informs our decision on the type of solution that can be effectively designed, developed, and implemented. We also identify technological limitations and cost factors to evaluate the product's viability.

From Conceptualization to Reality:
Our expertise extends to developing UI concepts and prototypes. We experimentally build Proof of Concepts, supported by comprehensive documentation, which are instrumental for investment workshops and presentations. This forms the foundation for creating a Minimum Viable Product (MVP), ensuring a product that is both feasible and aligned with market needs.

Rapid Prototyping with Open-Source Software:
We specialize in rapid prototyping for UI design, leveraging the synergy of open-source software. By combining the robust backend capabilities of Drupal CMS (handling database and content management) with the versatile frontend prowess of the UI Bootstrap Framework (ensuring responsive design across devices like mobiles, tablets, laptops, and desktops), we accelerate the feedback loop. This integration allows us to gather real-time user feedback from a live development webserver, enabling faster iterations and more user-centric product development.

User Experience Research, Development and Design


In-Depth User Insights with a UCD Approach:
Our User-Centered Design (UCD) approach goes beyond initial insights from product modeling, focusing on a deeper understanding of users. This involves refining the product's user interface (UI) with comprehensive UX research, ensuring that every aspect is meticulously tailored to user needs and preferences, with a strong emphasis on accessibility.

Comprehensive User Analysis for Innovation and Accessibility:
Through ethnographic, qualitative, and quantitative analyses, we gain a nuanced understanding of various user types. This approach not only fosters innovation but also helps in identifying niche user needs. Our commitment to creating accessible and inclusive designs ensures that our solutions are usable by everyone.


Crafting Accessible Information Architecture:
Our process includes examining data to create affinity maps, define content taxonomy, and develop a strategic content plan. We build detailed personas and user case stories that map out the user journey, focusing on how users access the information they need. This groundwork leads to the initial sketches of the UI layout and components, culminating in the development of low-fidelity prototypes, rigorously tested for user accessibility and acceptance.

Prototyping with a Focus on Cost-Effectiveness and Accessibility:
Prototyping is key to understanding technical requirements and development costs, while ensuring the solution's accessibility. If budget constraints arise, we pivot towards developing a Minimum Viable Product (MVP). This involves a planned iterative strategy, where features initially placed in the backlog during post-production are implemented in stages, always with a focus on user accessibility and experience.

"The working knowledge of professionals is almost universally considered intrinsically informal, hence unteachable except by experience. If we express working knowledge formally, in computational terms, we can manipulate it, reflect on it, and transmit it more effectively "

- Harold Abelson and Gerald Jay Sussman, MIT

"A general principle for all user interface design is to go through all of your design elements and remove them one at a time"

- Jakob Nielson, Nielsen Norman Group

User Interface Design


From Concept to Wireframes:
Our UI design process builds upon the foundations laid during the UX design phase. We meticulously examine UI layout, components, and navigation, resulting in a set of representative low-fidelity wireframes. Our design approach takes into account user behaviors, incorporating principles like the Gestalt theory of perception and UI patterns such as F-patterns. We then infuse the product's branding into every aspect of the design, from colors and iconography to typography, fonts, and sizing, all while adhering to best practices in consistency and accessibility.

Creating High-Fidelity UI Designs:
The next step is the creation of high-fidelity UI designs, complete with a detailed UI specification guide. This guide serves as the blueprint for front-end coding, ensuring that every element aligns perfectly with the intended user experience.


Leveraging Open-Source Frameworks for Consistency:
To maintain consistency across designs, we utilize open-source front-end frameworks like Bootstrap. Bootstrap offers predefined components such as buttons, input fields, toggles, and color schemes. It's also fully responsive, ensuring seamless functionality on devices ranging from handhelds to laptops and beyond. Additionally, Bootstrap is compatible with popular web browsers like Chrome, Safari, Edge, and Firefox.

Customization with UI Kits and Libraries:
While we often use UI kits like Google’s Material UI designs and Grommet, or CSS frameworks like Tailwind, we ensure that each application retains its unique identity. By incorporating brand guidelines, we can easily customize component styles using pre-compilers like GULP with SASS to produce CSS. This approach allows us to maintain a balance between uniformity and brand-specific customization.

Development and Production


Refining the Production Cycle:
In the realm of product design, our focus is on refining and, where possible, simplifying the production cycle. We adhere to industry best practices and embrace an AGILE environment, utilizing methodologies like SCRUM or Kanban for efficient and flexible code implementation. This approach allows us to adapt quickly to changes and continuously improve our processes, ensuring a streamlined and effective production cycle.

Leveraging CMS Frameworks for Technical Excellence:
Our use of CMS frameworks, particularly Drupal, positions us at the forefront of technical innovation. Drupal's robust framework offers significant technical advantages, making it an ideal choice for complex digital solutions. Its flexibility and scalability cater to a wide range of project requirements, ensuring that our solutions are not only effective but also future-proof.

Decoupled Architecture for Enhanced Flexibility:
We often employ a decoupled architecture in our projects. This approach separates the UI coding from the backend coding, allowing for more focused and efficient development in each area. In a decoupled setup, Drupal often serves as the central platform or portal, seamlessly integrating with a variety of APIs. This partitioned working model enhances our ability to create dynamic, responsive, and highly interactive user interfaces, while maintaining a robust and secure backend.


The Advantage of Decoupled Drupal:
Decoupled Drupal is particularly advantageous for projects requiring a high degree of customization and flexibility. It allows front-end developers to fully utilize modern JavaScript frameworks and libraries for a more engaging user experience, while back-end developers can focus on the stability and security of the content management system. This separation of concerns not only improves the overall quality of the product but also accelerates the development process, as teams can work in parallel on different aspects of the project.

"Design is not just what it looks like and feels like. Design is how it works."

- Steve Jobs, Apple

"Some people want it to happen, some wish it would happen, others make it happen."

- Michael Jordan

Product Launch: A Collaborative Effort


Seamless Integration with Marketing:
For the launch of a new product, the synergy between the development team and marketing is crucial. Our marketing managers are as well-versed in the product details as the project managers and product designers. This close-knit collaboration ensures that every member of the team is fully informed about all aspects of the product cycle.

Aligning Strategies for Optimal Impact:
The key to a successful product launch lies in the alignment of strategies and schedules. Whether it's leveraging social media channels or employing various PR strategies, timing is of the essence. Our approach ensures that marketing efforts are perfectly synchronized with the product development timeline, enabling a cohesive and impactful launch.

Critical Timing for Maximum Reach:
Understanding the importance of timing, we meticulously plan each phase of the launch. This includes coordinating with social media campaigns, PR activities, and other marketing initiatives to maximize reach and engagement. Our goal is to ensure that the product not only reaches its target audience but also resonates with them, creating a lasting impact.

Embracing a Start-Up Mindset for Sustained Success


Continuous Improvement for Longevity:
Adopting a start-up mindset is pivotal for the longevity and enhancement of user experience in any product. This approach keeps us agile and open to ongoing improvements, recognizing that there is always potential for refinement and innovation.

Data-Driven User Experience Enhancements:
For businesses operating on subscription-based or retail models, user behavior data is a goldmine. Analyzing this data helps us understand customer lifetime value and identify areas for improvement. We utilize user research to develop targeted fixes, often employing A/B testing methods to empirically validate these enhancements. This data-driven approach ensures that changes are not just intuitive but are backed by real user interactions and preferences.

Iterative Development for MVPs:
When dealing with a Minimum Viable Product (MVP), the philosophy of continuous improvement becomes even more critical. Through iterative development, we can rapidly evolve the MVP, incorporating user feedback and market trends. This process of continuous iteration and improvement ensures that the product remains relevant, user-friendly, and aligned with evolving market needs.


The Power of Iteration and User Feedback:
In the dynamic landscape of product development, iteration based on user feedback is key to staying ahead. It allows us to make informed decisions, fine-tune features, and enhance the overall user experience. Whether it's refining an MVP or updating a well-established product, our commitment to continuous improvement and responsiveness to user needs drives the success and longevity of our solutions.

"Continuous improvement is better than delayed perfection."

- Mark Twain

DIGITAL PRODUCT & TRANSFORMATION DESIGN AGENCY

Where business, user research, technology, creativity, converge and transform to produce lean strategic viable sustainable digital experiences

webinmotion, guiding you through a digital ocean, practicing

transparency | diversity, inclusion, equality | sustainability, longevity

"No job is too hard if you are smart enough to find someone else to do it for you."

- Aristotle

Who we are

webinmotion has been at the forefront of web application design and development for two decades. Our experience spans a diverse range of business sectors, from budding cottage industries to multinational corporations. Whether working locally or on a global scale, we've adeptly managed stakeholders and coordinated with remote development teams.
Our journey has been marked by continuous evolution, adapting to the ever-changing landscapes of technology, business, and diverse ecosystems. Our strategic approach harnesses the power of Drupal, an industry-leading open-source CMS framework, to build robust digital solutions. Central to our ethos is a commitment to HCI (Human-Centered Interaction), ensuring that every digital experience we craft is intuitive, engaging, and tailored to meet the needs of the end-user.

Below takes you through a typical full product cycle and the list of services provided, from Stakeholder Engagement, Product Modelling, User Research, Development and User Interface Design, Code Production, Launch, to post launch services such as reports, analytics, continued support with maintenance, new product features and security updates.
Produced in an AGILE environment

Our Process
Join us as we walk you through our comprehensive product cycle:

  • Stakeholder Engagement: Building relationships and understanding needs.
  • Modelling: Crafting a blueprint for success.
  • User Research: Delving deep into the needs and behaviours of your audience.
  • Development & UI Design: Bringing visions to life with a user-centric approach.
  • Code Production: Crafting robust and efficient code.
  • Launch: Introducing your product to the world.
  • Post-Launch Services: Offering reports, analytics, ongoing support, feature updates, and security enhancements.
Our projects are executed in an AGILE environment, ensuring flexibility, responsiveness, and timely delivery.

"It takes but a brief time to scent life philosophy of anyone. It is defined in the conversation, in the look of the eye and the general mien of the person. It has no hiding place."

- George Matthew Adams

Engagement with you

Navigating the world of technology can be costly without proper planning and a well-defined strategy. That's where we come in.
Our process begins with a thorough exploration of your requirements. We believe in setting clear expectations from the outset. With meticulous project management, we ensure transparency at every stage of the product cycle. Our detailed roadmaps, complete with timelines, phases, and milestones, keep you informed and involved.
If we employ the SCRUM methodology for feature completion, you're not just a spectator. You'll be actively invited to demonstrations and provided with burndown charts, ensuring you're always in the loop regarding timings and deliverables.
Roadmaps, a timeline with milestones are central to scheduling and visualise a deployment or implementation strategy. Milestone meetings are advised, but due to time contraints in all parties involved, OKR (objectives and key results) tools are there to help stakeholders access current production statuses. We habitually use communication applications like Teams and Slack so all in production are engaged with the ongoing build.

"you can fix it on the drafting board now or or later on the construction site with a sledge hammer"

- The Wright Brothers

Product Modelling, Product Design


Insightful Discovery and Strategic Analysis:
Our process begins with a thorough analysis of your business model during the discovery phase, providing vital insights and strategic direction. We delve into a SWOT analysis, assess your product's value propositions, and analyze your target user demographics, along with other pertinent user data. This comprehensive approach informs our decision on the type of solution that can be effectively designed, developed, and implemented. We also identify technological limitations and cost factors to evaluate the product's viability.

From Conceptualization to Reality:
Our expertise extends to developing UI concepts and prototypes. We experimentally build Proof of Concepts, supported by comprehensive documentation, which are instrumental for investment workshops and presentations. This forms the foundation for creating a Minimum Viable Product (MVP), ensuring a product that is both feasible and aligned with market needs.

Rapid Prototyping with Open-Source Software:
We specialize in rapid prototyping for UI design, leveraging the synergy of open-source software. By combining the robust backend capabilities of Drupal CMS (handling database and content management) with the versatile frontend prowess of the UI Bootstrap Framework (ensuring responsive design across devices like mobiles, tablets, laptops, and desktops), we accelerate the feedback loop. This integration allows us to gather real-time user feedback from a live development webserver, enabling faster iterations and more user-centric product development.

"The working knowledge of professionals is almost universally considered intrinsically informal, hence unteachable except by experience. If we express working knowledge formally, in computational terms, we can manipulate it, reflect on it, and transmit it more effectively "

- Harold Abelson and Gerald Jay Sussman, MIT

User Experience Research, Development and Design


In-Depth User Insights with a UCD Approach:
Our User-Centered Design (UCD) approach goes beyond initial insights from product modeling, focusing on a deeper understanding of users. This involves refining the product's user interface (UI) with comprehensive UX research, ensuring that every aspect is meticulously tailored to user needs and preferences, with a strong emphasis on accessibility.

Comprehensive User Analysis for Innovation and Accessibility:
Through ethnographic, qualitative, and quantitative analyses, we gain a nuanced understanding of various user types. This approach not only fosters innovation but also helps in identifying niche user needs. Our commitment to creating accessible and inclusive designs ensures that our solutions are usable by everyone.


Crafting Accessible Information Architecture:
Our process includes examining data to create affinity maps, define content taxonomy, and develop a strategic content plan. We build detailed personas and user case stories that map out the user journey, focusing on how users access the information they need. This groundwork leads to the initial sketches of the UI layout and components, culminating in the development of low-fidelity prototypes, rigorously tested for user accessibility and acceptance.

Prototyping with a Focus on Cost-Effectiveness and Accessibility:
Prototyping is key to understanding technical requirements and development costs, while ensuring the solution's accessibility. If budget constraints arise, we pivot towards developing a Minimum Viable Product (MVP). This involves a planned iterative strategy, where features initially placed in the backlog during post-production are implemented in stages, always with a focus on user accessibility and experience.

"A general principle for all user interface design is to go through all of your design elements and remove them one at a time"

- Jakob Nielson, Nielsen Norman Group

User Interface Design


From Concept to Wireframes:
Our UI design process builds upon the foundations laid during the UX design phase. We meticulously examine UI layout, components, and navigation, resulting in a set of representative low-fidelity wireframes. Our design approach takes into account user behaviors, incorporating principles like the Gestalt theory of perception and UI patterns such as F-patterns. We then infuse the product's branding into every aspect of the design, from colors and iconography to typography, fonts, and sizing, all while adhering to best practices in consistency and accessibility.

Creating High-Fidelity UI Designs:
The next step is the creation of high-fidelity UI designs, complete with a detailed UI specification guide. This guide serves as the blueprint for front-end coding, ensuring that every element aligns perfectly with the intended user experience.


Leveraging Open-Source Frameworks for Consistency:
To maintain consistency across designs, we utilize open-source front-end frameworks like Bootstrap. Bootstrap offers predefined components such as buttons, input fields, toggles, and color schemes. It's also fully responsive, ensuring seamless functionality on devices ranging from handhelds to laptops and beyond. Additionally, Bootstrap is compatible with popular web browsers like Chrome, Safari, Edge, and Firefox.

Customization with UI Kits and Libraries:
While we often use UI kits like Google’s Material UI designs and Grommet, or CSS frameworks like Tailwind, we ensure that each application retains its unique identity. By incorporating brand guidelines, we can easily customize component styles using pre-compilers like GULP with SASS to produce CSS. This approach allows us to maintain a balance between uniformity and brand-specific customization.

"Design is not just what it looks like and feels like. Design is how it works."

- Steve Jobs, Apple

Development and Production


Refining the Production Cycle:
In the realm of product design, our focus is on refining and, where possible, simplifying the production cycle. We adhere to industry best practices and embrace an AGILE environment, utilizing methodologies like SCRUM or Kanban for efficient and flexible code implementation. This approach allows us to adapt quickly to changes and continuously improve our processes, ensuring a streamlined and effective production cycle.

Leveraging CMS Frameworks for Technical Excellence:
Our use of CMS frameworks, particularly Drupal, positions us at the forefront of technical innovation. Drupal's robust framework offers significant technical advantages, making it an ideal choice for complex digital solutions. Its flexibility and scalability cater to a wide range of project requirements, ensuring that our solutions are not only effective but also future-proof.

Decoupled Architecture for Enhanced Flexibility:
We often employ a decoupled architecture in our projects. This approach separates the UI coding from the backend coding, allowing for more focused and efficient development in each area. In a decoupled setup, Drupal often serves as the central platform or portal, seamlessly integrating with a variety of APIs. This partitioned working model enhances our ability to create dynamic, responsive, and highly interactive user interfaces, while maintaining a robust and secure backend.


The Advantage of Decoupled Drupal:
Decoupled Drupal is particularly advantageous for projects requiring a high degree of customization and flexibility. It allows front-end developers to fully utilize modern JavaScript frameworks and libraries for a more engaging user experience, while back-end developers can focus on the stability and security of the content management system. This separation of concerns not only improves the overall quality of the product but also accelerates the development process, as teams can work in parallel on different aspects of the project.

"Some people want it to happen, some wish it would happen, others make it happen."

- Michael Jordan

Product Launch: A Collaborative Effort


Seamless Integration with Marketing:
For the launch of a new product, the synergy between the development team and marketing is crucial. Our marketing managers are as well-versed in the product details as the project managers and product designers. This close-knit collaboration ensures that every member of the team is fully informed about all aspects of the product cycle.

Aligning Strategies for Optimal Impact:
The key to a successful product launch lies in the alignment of strategies and schedules. Whether it's leveraging social media channels or employing various PR strategies, timing is of the essence. Our approach ensures that marketing efforts are perfectly synchronized with the product development timeline, enabling a cohesive and impactful launch.

Critical Timing for Maximum Reach:
Understanding the importance of timing, we meticulously plan each phase of the launch. This includes coordinating with social media campaigns, PR activities, and other marketing initiatives to maximize reach and engagement. Our goal is to ensure that the product not only reaches its target audience but also resonates with them, creating a lasting impact.

"Continuous improvement is better than delayed perfection."

- Mark Twain

Embracing a Start-Up Mindset for Sustained Success


Continuous Improvement for Longevity:
Adopting a start-up mindset is pivotal for the longevity and enhancement of user experience in any product. This approach keeps us agile and open to ongoing improvements, recognizing that there is always potential for refinement and innovation.

Data-Driven User Experience Enhancements:
For businesses operating on subscription-based or retail models, user behavior data is a goldmine. Analyzing this data helps us understand customer lifetime value and identify areas for improvement. We utilize user research to develop targeted fixes, often employing A/B testing methods to empirically validate these enhancements. This data-driven approach ensures that changes are not just intuitive but are backed by real user interactions and preferences.

Iterative Development for MVPs:
When dealing with a Minimum Viable Product (MVP), the philosophy of continuous improvement becomes even more critical. Through iterative development, we can rapidly evolve the MVP, incorporating user feedback and market trends. This process of continuous iteration and improvement ensures that the product remains relevant, user-friendly, and aligned with evolving market needs.


The Power of Iteration and User Feedback:
In the dynamic landscape of product development, iteration based on user feedback is key to staying ahead. It allows us to make informed decisions, fine-tune features, and enhance the overall user experience. Whether it's refining an MVP or updating a well-established product, our commitment to continuous improvement and responsiveness to user needs drives the success and longevity of our solutions.

clients

shouts

latest projects