Hello World!
I craft digital Products Digital Experiences
that Users People love
as a Web Developer
as a Web Developer
Blending Code and Creativity
to make websites and apps feel amazing to use
to provide you with Awesome Digital Adventures.
Projects I am proud of
Facing a complex project challenge within our team, I recognized the need for coordinated action. Evaluating the situation, it became evident that the issue needed escalation to our project sponsor, to leverage their authority and resources.
I then delegated the task of gathering detailed technical insights and potential solutions to one of our team members and expedited our path to resolution. This approach ensured efficient problem-solving while keeping our sponsor informed of progress.
AR App - Mobile App Architect / Developer
Roles: Product Lead Developer, Backend Developer, Mobile App Developer.
Timeline: 3 months (Oct - Jan 2021)
Tools: Figma, Android Studio, Git, React Native, Appium, Firebase Analytics, Jenkins
Languages: Swift (for iOS) or Kotlin (for Android)
Overview
In a world that's increasingly driven by technological innovation, there's a growing need for educational tools that not only inform but engage. That's where this Augmented Reality (AR) app comes into play. This app was designed to allow users to experience the intricacies of the human muscle system in motion, serving a profound purpose - to revolutionize the way we learn about and understand the marvel of our own bodies.
It featured a gallery of different action movement states, an interactive 3D view mode where the user could understand how different muscles interacted with each other while the selected motion was playing and a Detail Card screen that provide textual information about the selected muscle group.
Context
I was approached by the client to conceptualize, design and develop an AR app that would allow users obtain a deeper understanding of our own biology, fostering curiosity, and preparing a new generation for a future where education is limited only by the boundaries of imagination. The goal of the project was to design an app that would function well and look beautiful across all devices and also in the browser, following conventional mobile app structure and considerations.
Minimum Viable Product
Subsequently, I meticulously compiled the prerequisites, delineating the essential functionalities to incorporate into my application. My process involved collating user narratives, derived directly from my defined Personas, as well as defining the core components of my Minimum Viable Products (MVPs).
Requirement Analysis
Understand the project requirements and objectives provided by the stakeholders.
Discuss technical feasibility and potential challenges.
Planning
Define the app architecture, including data flow, components, and modules.
Create a development timeline with milestones and deliverables.
Design
Collaborate with UI/UX designers to translate wireframes and mockups into technical specifications.
Ensure designs are feasible for implementation and align with platform guidelines.
Setup Development Environment
Install necessary software tools, such as IDEs (e.g., Android Studio, Xcode), version control systems (e.g., Git), and SDKs.
Configure development environments for both Android and iOS platforms.
Coding
Write clean, efficient, and maintainable code according to established coding standards.
Implement features, functionalities, and interactions as per the project requirements.
Utilize appropriate programming languages (e.g., Swift, Kotlin, JavaScript) and frameworks (e.g., React Native, Flutter) based on project specifications.
The MVP was conceived as a strategic tool, enabling me to quickly subject my initial designs to user scrutiny, thereby obtaining invaluable insights at the outset of the design journey. This approach ensured that any potential issues and user considerations were promptly identified and addressed, setting a solid foundation for the project's evolution.
Testing
Perform unit testing to verify the functionality of individual components and modules.
Conduct integration testing to ensure seamless interaction between different parts of the app.
Test the app on various devices and screen sizes to identify and address compatibility issues.
Collaborate with QA engineers to execute comprehensive testing procedures, including regression testing and user acceptance testing.
User Testing
Employing my prototypes, I enlisted the assistance of 5 individuals from the community for remote moderated usability testing on my designs. During the testing sessions, I guided them through a set of tasks aimed at understanding their thought patterns and assessing their ability to achieve the MVP objectives. This provided a valuable opportunity to gather their feedback on what they appreciated and what didn't quite resonate with the prototype.
Bug Fixing and Optimization
Address any bugs, errors, or performance issues identified during testing.
Optimize code, improve app performance, and enhance user experience based on feedback and testing results.
Deployment
Prepare the app for deployment by generating necessary certificates and provisioning profiles.
Submit the app to respective app stores (e.g., Apple App Store, Google Play Store) following their guidelines and policies.
Monitor the app submission process and address any issues or rejections.
Post-Deployment Support
Provide ongoing support and maintenance for the app, addressing user feedback, bug reports, and feature requests.
Release updates and patches to improve app functionality and address any issues that arise post-deployment.
Documentation
Document the app architecture, codebase, and development processes for future reference.
Create user guides, API documentation, and technical documentation as necessary.
Following the user interviews, I carefully organized and rated the issues I identified, using Jakob Nielsen's error severity rating system. This allowed me to figure out which problems were the most critical and needed attention. From there, I came up with fresh ideas and solutions to enhance my designs, all aimed at making the user experience better in the next iteration.
S&J Engines Engine Remanufacturer - Website Redesign
Roles: Product Designer & Developer, UX/UI, Web App Developer, Graphic Designer.
Tools: Figma, Google Meet
Overview
Help the Rebranding and rethinking UX and UI efforts, developing the solution from start to finish.
Objectives
Collaborate with the marketing team to understand the rebranding objectives and translate them into actionable web development tasks.
Implement responsive design principles to ensure a seamless user experience across various devices and screen sizes.
Optimize website performance and loading speed to enhance user engagement and satisfaction.
Coordinate with cross-functional teams, including content creators, and marketers, to ensure alignment with overall branding goals.
Conduct usability testing to identify pain points and areas for improvement in the interface.
Goal
The primary goal of this website redesign project is to transform the online presence of the engine remanufacturer into an empowering, engaging, and trust-building platform. Client’s demography are males, aged 30 to 65. This is over 90% of the clientele. We aim to establish the website as a dependable resource for customers seeking information and services, ultimately nurturing long-term relationships and fostering an increase in conversions.
The process
Initial Assessment and Planning
Conduct a comprehensive assessment of project requirements and objectives in collaboration with stakeholders.
Define clear goals and success criteria for the development process, considering the rebranding and UX/UI redesign efforts.
Test-Driven Development (TDD) Implementation
Utilize TDD principles to drive the development process from the outset.
Begin by writing failing tests based on user stories and specifications, outlining the expected behavior of the application.
Develop minimal code to pass the failing tests, adhering to the "Red-Green-Refactor" cycle.
Continuously refactor and optimize code while ensuring all tests remain passing, maintaining code quality and scalability.
Technology Selection and Stack Implementation
Choose appropriate technologies and frameworks based on project requirements, scalability, and maintainability.
Leverage modern web development technologies and best practices to enhance efficiency and performance.
Implement a robust tech stack that facilitates seamless integration, deployment, and testing processes.
Continuous Integration and Deployment (CI/CD)
Establish automated CI/CD pipelines to streamline the development workflow.
Integrate version control systems (e.g., Git) to ensure code collaboration and version management.
Automate testing processes, including unit tests, integration tests, and end-to-end tests, to validate code changes and prevent regressions.
Deploy updates and releases in a controlled and consistent manner, minimizing downtime and disruption to users.
Code Reviews and Collaboration
Conduct regular code reviews to ensure adherence to coding standards, best practices, and TDD principles.
Foster a culture of collaboration and knowledge sharing among team members, encouraging constructive feedback and continuous improvement.
Use code review tools and platforms to facilitate asynchronous collaboration and maintain a transparent development process.
Documentation and Knowledge Sharing
Document codebase architecture, design decisions, and implementation details to facilitate onboarding and knowledge transfer.
Create comprehensive test documentation, including test cases, test suites, and testing methodologies, to support future maintenance and enhancements.
Organize regular knowledge-sharing sessions and workshops to disseminate expertise on TDD, technologies, and best practices across the development team.
Monitoring and Performance Optimization
Implement monitoring and analytics tools to track application performance, user engagement, and error rates.
Proactively identify performance bottlenecks and areas for optimization through continuous monitoring and profiling.
Iterate on design and implementation based on performance insights, ensuring optimal user experience and scalability.
By adhering to these processes, I ensured a systematic and efficient approach to development, leveraging TDD principles, cutting-edge technologies, and best practices to drive the successful implementation of the rebranding and UX/UI redesign efforts.
Flexidao | CFEscore - Custom Developed ELM microsite Development and UX Design
Roles: Product Architect, Web App Developer
Timeline: 4 months (Oct 2021 - Mar 2022)
Tools: Figma, VS Code, Git, ELM, TypeScript.
Overview
FlexiDAO is a leading European climate tech startup, shaping the energy transition by providing end-to-end carbon–free energy solutions for energy buyers and sellers. For them I developed a web app for managing Energy and Emissions data in one place, helping their customers reduce time and cost for their Scope 2 reporting and inventory management.
The app features a wizard-like multi-screen form where the user inputs data about their energy usage and the app would calculate, as a result, various related parameters and display important information.
Context
In my capacity as a Product Designer, I had a dual focus: enhancing the client's experience and orchestrating a well-defined development roadmap for the app. My role extended to both designing and developing the product. I adhered to established UI design principles and conventional web design patterns throughout the process to ensure a seamless user experience.
Goal & research
The primary goal of this app is to provide users with an efficient and user-friendly platform for inputting data related to their energy usage. The app will then use this input to calculate various parameters, such as energy consumption, cost, and environmental impact. Users will be presented with clear, comprehensible information about their energy usage and receive personalized recommendations on how to improve energy efficiency. By achieving this, the app aims to empower users to make informed decisions about their energy consumption and contribute to a more sustainable and cost-effective energy usage.
Because clients were industry users, they cared less about how it looked. They were better served with a UX that provided ease of use and speed. This was the main focus during all the improvements we made.
UI Development
For this job I also worked as a UI Designer, where I created the UI components and also the app graphics. There was a lot of exploration and stakeholder management to be done. I was part of a SCRUM team with a product owner, business analyst, a tester and 4 developers.
Before sketching out wireframes, I first did an in-depth analysis of existing webapps, focusing on the use of UI elements and patterns as well as interactivity. I analyzed 3 similar UIs.
Other Projects
Roles: Product Architect, Web App Developer, UI / UX, Designer
Timeline: Varies
Tools: Figma, VS Code, Git, ELM, TypeScript and others.
GrnVision
In my role on a Wordpress project, I spearheaded the development of a custom plugin tailored to the client's unique needs, ensuring seamless integration and enhanced functionality. With a focus on security, I implemented robust anti-hacking measures to safeguard the website against potential threats, mitigating risks and ensuring the safety of user data. Additionally, I took charge of designing and implementing the Projects section, crafting an intuitive and visually captivating showcase of the client's work. Through meticulous attention to detail and innovative problem-solving, I contributed to the overall success of the project, delivering a polished and high-performing Wordpress website that exceeded client expectations.
The Box - Hotel website
For a website built on Wordpress, I developed a custom plugin that enables visitors to easily rent the client's hotel rooms. This special tool I created makes it simple for guests to book a room directly through the website. Additionally, I ensured that the plugin integrated smoothly with the website's design and functionality, providing a seamless booking experience for users. With this solution in place, the client can efficiently manage room reservations and maximize their hotel's occupancy, contributing to the success of their business.
Formula One - Spielberg Racing
For a custom-built microsite dedicated to Formula One, I designed a platform to spotlight the diverse workforce and individuals who play vital roles in each race event. Through careful development, I crafted a user-friendly interface that showcases the various professionals, from drivers to technicians, who contribute to the excitement of Formula One. This microsite serves as a comprehensive hub where fans can learn about the unsung heroes behind the scenes, fostering a deeper connection to the sport and its community. With a blend of innovative design and functionality, the microsite enhances the Formula One experience, celebrating the passion and dedication of all involved.
3D Design, Website Development - F1 Spielberg microsite
Euromon - Custom Website
In crafting a bespoke website for a user to exhibit their products, I engineered a platform tailored to showcase their offerings in an engaging and accessible manner. Through meticulous design and development, I created an intuitive interface where users can seamlessly navigate through the product catalog. Leveraging custom features and functionalities, such as dynamic galleries and interactive product pages, I ensured that each item receives the attention it deserves. By prioritizing user experience and visual appeal, the website serves as a compelling showcase for the user's products, driving engagement and fostering connections with potential customers. With this custom solution in place, the user can effectively showcase their offerings to a wider audience, facilitating business growth and success.
