Disclaimer
My design process isn't uniform, which means that several steps may repeated during the process depending on the project that's being working on.
In addition to that, I included AI images from Gemini in order to further illustrate the phases of my design process. I wanted to include a beauty related theme in these illustrations in order to drive home my niche, which is beauty and technology being intertwined.
Brainstorming
To begin my design process, I start brainstorming by asking myself the following questions:
-What is the purpose of designing the software, what type of software will be designed (will it be a website, a web app, a desktop website, or a desktop app)?
-How will the software be designed (the information architecture)?
-What are the issues that the users currently face?
-How will I solve these issues?
After performing extensive research, collecting information, and creating user personas, I’ll move on to the next step.
Early Stage of Designing
The early stages of design are in carefully executed steps, which are shown below:
1. Creating the user flow chart using Miro or FigJam is done first, and would be modified multiple times before moving on to the next step.
2. The site map would be built and a journey map would be created to get a better understanding of users.
3. The two steps would be modified before moving to the next phase of the design process.
Low-Fidelity Wireframing
In this phase:
1. I document the design patterns that would be used.
2. I make sure to create rough sketches is done first before using software like Mockup.
3. I’ll use Figma to create low-fidelity wireframes after making the necessary modifications on Mockup.
High-Fidelity Wireframing
Once I have completed the low-fidelity wireframe in its entirety:
1. I begin making the styles tile, which includes the color schemes and the typography using Figma or PhotoShop.
2. Next, I’ll complete the high-fidelity wireframe by appropriately using the style tile based on the layout from the low-fidelity wireframe.
3. The design comp would be the final high-fidelity wireframe after making appropriate adjustments.
Prototyping
The next phase begins only once the high-fidelity wireframe and the design comp have been completed in its entirety:
1. I start to design an interactive prototype using the high-fidelity wireframe that was designed.
2. The prototype will be created using either Figma or ProtoPie.
3. Once the prototype is completed, it will behave and look like a fully functioning web app or website.
4. Feedback from the client is necessary for me to address any unresolved issues users may have.
5. Feedback requires me to repeat several phases as many times as possible before sending the finalized prototype to developers.
