Transforming Design Concepts with Inflight
Habib Rehman
Database Engineer
Fullstack Engineer
Systems Engineer
Firebase
Next.js
Vue.js
FROM SKETCH TO SUCCESS: TIMEAHEAD's WORK ON INFLIGHT
Platform made for designers inflight.co
We began by analysing the details client provided, engaging in discussions about possible development outcomes and potential edge cases.
5 step process to start a project from scratch
1. ANALYSIS
We had brain storming sessions. These conversations were more than just meetings—they were creative brainstorming sessions where ideas flowed freely, and every suggestion was welcomed
2. DESIGNING
APPLICATION FLOW
We initially developed a simpler flow within the web app where users can complete their design feedback journey. • Later added plugin support to directly export the Figma designs to the web app on their account.
inflight.co app flow
SYSTEM SEQUENCE DIAGRAM
Inflight.co system sequence diagram
DATABASE DOCUMENT MODEL
No SQL DB Model for Inflight.co
3. IMPLEMENTATION
Started with the development of designs they provided, diving into specifics about how it should be experienced.
Our team engaged in meticulous development, ensuring each iteration was better than the last. We focused on delivering high quality work that real users would love, and we were thrilled to see the positive responses from Kyle.
Working on Inflight.co
PROJECTS FEED
Each Project's preview slides transition like a deck of cards, slightly visible on the sides. When you swipe, the current slide moves to the back, creating a seamless effect. We used gsap.com and other libraries to achieve these animations.
CREATE PROJECT
User could record their video/audio to explain anything they want about the project, all user data and project resources data was stored on our own server and we could present it as we please.
FEEDBACK EXPERTS SELECTION
Users can choose between human experts or AI Critique personas. The AI, designed to give design feedback, improves over time as it processes more data, becoming increasingly accurate.
FIGMA PLUGIN
We developed a plugin that allows users to transfer their Figma designs directly to their inflight.co project.
4. TESTING
Cross-Platform Testing
Conducted thorough testing on various operating systems to ensure compatibility.
Device Screen Testing
Tested the web app on multiple screen sizes, including mobile, tablet, and desktop, to verify responsive design.
Browser Compatibility
Performed tests across different browsers, including Chrome, Firefox, and Safari, to ensure consistent design and functionality.
Design Consistency
Ensured that all designs and features displayed as intended across all platforms and browsers.
User Experience Evaluation
Gathered feedback from users during testing phases to identify any issues and make necessary adjustments.
Iterative Testing
Engaged in multiple testing cycles, making improvements based on test results to enhance overall performance and user satisfaction. Feel free to modify or expand on any points as needed!
5. EVALUATION
Proposed enhancements and feature ideas for the Inflight web application.
Iterated through various versions, sculpting a unique user experience.
Transformed Figma designs into a vibrant, interactive platform.
Created a sensory-rich experience, making Inflight a go-to for design feedback.
Delivered a final version of inflight.co that users love.
CLIENT FEEDBACK
Highly recommend Habib, working with him is like having a full time CTO on your team. He completed many tough challenges without hesitation, and his quality of work was extremely high. Looking forward to working with him often in the future
