Product Design (SaaS)

Digital Record Management Product Design

Wireframe for document auditing page

Design of document audit page

Right panel wireframes and UI for the product.
Figma Prototype for the panel

Previous Next

Created this product with the following steps:

1. Define- I attended a meeting with stakeholders, and Product managers to determine exactly what needs to be created, and why. Why does this product need to exist? Who are the target audiance? What business problems will this solve?. From this meeting we got idea that this product is mainly for aviation industry and our target audiance are Aircraft fleet owners

2. User and Market Research- We conducted research to gain a deep understanding of our users, their needs and what they have to say about our existing product. We conducted user research with 3 different ways, Direct Interviews, Customer journey mapping with our existing product and usability testing. We conducted Market research to find out industry trends and competitive analysis.

3. Analysis and Planning- In the planning phase, we took all of the information we gathered in the User and Market research stage to plan out how they will meet those needs. We developed user personas, user stories and wireframes etc. We planned to create this product on angular framework. We developed a roadmap for the project and start to establish Milestones.

4. Wireframing and Review- Once we analysed the user requirements, it's time to start sketching out some ideas for how user will interact with our interface. This is where we started to think about things like the overall layout, navigation, functionality etc. In this phase we created a silhotte, wireframes and flowcharts of various sections. We discussed them with the product team. Finalised them.

5. Design Phase- Once we have finalised the wireframes, we got the exact idea how the users going to interact with our interface. This design phase typically includes both UX and UI aspects, since we had worked on things like Information architecture, Navigation, Layout, Usability and accessibility, Microcopy etc. we started to turn our wireframes and low-fi interfaces into something more polished. This is where we began to working on things like color schemes, typography, and iconography. For this we created a Design System on Figma Design software from scratch based on the organisation's Branding. We discussed them with the product team. Finalised them.

5.1. Design System- For this we created a Design System on Figma Design software from scratch based on the organisation's Branding. This design system offers numerous advantages, including improved efficiency, enhanced consistency, and better collaboration. It streamlines the design and development process by providing reusable components and guidelines, leading to faster workflows, reduced errors, and a more cohesive user experience.

6. Prototyping- We prototyped some of the important functionalities in Figma and shared it with product team, stakeholders and development team. Prototyping allows us to present a more realistic experience for our usability testing, which then delivered more accurate feedback and insight into "what's working" and "what's not working".

7. Development support- Once we started completing the desgigns for each phases, we organised meetings with development team to explain the functionalities and handing over the design files. We use to follow Agile methodology fot this project and were using Jira to collaborate with various teams like development, project managers, Quality analysts etc.

Designer Review for UI/UX Once the sections are developed and ready on the staging we do design review in terms of UI and UX both. Then once approoved by us and the Quality Analyst team development team move the developed sections to production envirement for internal and external review.

8. Usabilty Testing- In this phase we do the Usability testing of the product mainly for each developed sections. It's important to test the interface with real users before Launch we share it with real users to collect feedbacks and do improvements before going live. We used to intigrate hotjar in the developed product to collect the user feedbacks, observe the user journies by heatmaps, capture some user sessions etc. We analysed the feedbacks and decided how we can impliment that based on the criticality.

9. Launch (Phase wise)- After all updates and improvisations We done a phase wise launch of the product.

10. Continuous improvisations- After the launch of the product we done improvisations and updates in the product based on the user feedbacks.

AIML Chatbot (Product Design)

flycom ai AIML Chatboat Concept

flycom ai AIML Chatboat Concept

flycom ai AIML Chatboat Concept

flycom ai AIML Chatboat Concept

Previous Next

Created this AIML Chat concept and presented to stakeholders.

This is an AIML Chatbot called flycom ai. This is a concept presented with working prototype for a Hackathon. This concept won the first prize as well.