Research

First step in designing & development is to know requirements, in order to get a clear picture of what we are trying to achieve or create. So gathered the information about targated users, requirements, business process, studying competitor apps like Gokhana, Hungerbox, SmartQ.

I created a conceptual design, stating needs or requirements, a solution, definig the flow or core functionalities of the app. This presentation does not had a proper system design like a low-level design, but instead I created a conceptual design more like a high-level system design.

In the presentation I also included project planing and requirements, to get a proper Idea about the project.

Color & Typography

Base color for app was already decided by the owner. For other colors I prefered using different opacity of same color rather than choosing completely diffenet colors. Selected accessible colors varients and typography with strong contrast for better readability across devices and users, as one of the primary goal was to create a inclusive design.

Wireframing

Low-fidelity wireframes were created to quickly plan layout and interaction flow. As we wanted to ensure that app to be highly accessible, I putted a lot of emphasis on the spacing, every element on the screen should be well-spaced and evenly spaced. So that specially-abled people will not have problem with the screen readers.

I avoided crowding one horizonal line/ space with more than two elements. One screen will only serve its purpose, rather than combining content which is meant to be on different screen.

After the low-fidelity wireframe is ready, then I gathered feedback from the owner and team. Did some minor changes and I was off to high-fidelity designing.

Prototyping

After wireframing is completed, I started designing high-fidelity design, mock-ups, user-flows. I had to create 2 design as first one did'nt coverd some features and was not attractive. With second and final design started Prototyping as well, so a whole design will have user-flow with Prototyping.

A clear well-defined user flow would help in development and a interactive Prototype helped at the time to ensure the stakeholders that design is upto the mark, both in-terms of functionalities and Looks.

*Note- I can't share a full image of User-flow due to confidentiality.

I followed accessibility principles based on WCAG guidelines to ensure color contrast, usability, and inclusive interaction design across devices.

• Maintained sufficient color contrast between UI elements and backgrounds for readability in all lighting conditions.
• Used clear and legible typography with accessible font sizes and tap-friendly spacing.
• Designed touch targets large enough for users with motor impairments.
• Ensured logical screen hierarchy and consistent navigation for better usability.
• Kept interactions simple and intuitive, minimizing cognitive load.

After testing prototype and gathering feedbacks, the design was ready for the development phase.