Embedded Files
Table of contents
Stage 2: Wireframing (Wireframes)
Stage 2: Wireframing (Wireframes)
Breakdown of the second stage: Wireframing (Wireframes)
Breakdown of the second stage: Wireframing (Wireframes)
For second stage, I begin by creating 1-5 hand-sketched wireframes over 3 days, exploring ideas for layout, structure, and interaction design. Next, I dedicate 7 days to translating 1-5 paper wireframes into digital format using Figma. After that, I present the initial wireframes to you, focusing on 1-5 wireframes for collaborative feedback over 6 days. Based on your input, I spend 12 days refining and adjusting 1-5 wireframes. Finally, I dedicate 3 days to finalizing 1-5 wireframes, ensuring they align with your vision and are ready for the next design phase. This tier offers a solid foundation for your project, with a focus on collaboration and iteration to achieve a satisfying result.
Note:
This timeline is designed for what can be achieved by me as an individual UX designer. If I am the only person on the UX team, certain aspects of this process might take longer due to the need for collaboration and feedback cycles. Additionally, the level of detail required for each stage can impact the time it takes to complete. The more comprehensive the research and documentation, the more time I may need to ensure we deliver the best possible results.
If the requirements are more detailed or if the project scope increases, I will adjust the timelines accordingly to meet those needs. For reference, I have a separate page that outlines the differences between three levels of comprehension and the work involved at each stage to give you a clearer picture of how the time and efforts may vary.
This timeline is designed for what can be achieved by me as an individual UX designer. If I am the only person on the UX team, certain aspects of this process might take longer due to the need for collaboration and feedback cycles. Additionally, the level of detail required for each stage can impact the time it takes to complete. The more comprehensive the research and documentation, the more time I may need to ensure we deliver the best possible results.
If the requirements are more detailed or if the project scope increases, I will adjust the timelines accordingly to meet those needs. For reference, I have a separate page that outlines the differences between three levels of comprehension and the work involved at each stage to give you a clearer picture of how the time and efforts may vary.
During this stage, I will create 1-5 low-fidelity wireframes starting as paper wireframes to get your feedback and then move to Figma to establish the foundational structure and functionalities of your screens digitally. These wireframes will serve as a visual blueprint for your product, focusing on layout, hierarchy, and basic interactions. These wireframes only contain a basic structure of hierarchy among the elements on the frames, ensuring the clarity for the next steps to come.
Throughout the wireframing process, I will maintain open communication with you to ensure that the designs align with your project's goals and objectives. You will have the opportunity to review and provide feedback on the wireframes at regular intervals, allowing us to iterate and refine the designs together. Your input is invaluable in shaping the product, and I am committed to incorporating your feedback to create wireframes that effectively represent your vision and cater to your target audience's needs.
Initial Paper Wireframing:
Initial Paper Wireframing:
The design process begins with sketching 1-5 initial paper wireframes, focusing on layout, structure, and interaction design concepts. This rapid, iterative approach allows for quick modifications before moving to the digital phase. Throughout this process, you will receive regular updates and have opportunities to provide feedback.
Estimated time: 3 days
Digital Wireframing in Figma:
Digital Wireframing in Figma:
Building on the initial sketches, I transition to creating 1-5 wireframes in Figma. This stage focuses on establishing the basic structure and layout while keeping wireframes low-fidelity to emphasize functionality. The digital format enhances visualization and encourages collaborative feedback.
Estimated time: 7 days
See interactive digital wireframes examples made on Figma
Presentation and Feedback & Iteration Based on Feedback
Presentation and Feedback & Iteration Based on Feedback
Presentation and Feedback:
Presentation and Feedback:
Next, I present the initial digital wireframes for your feedback. This collaborative process involves 1-5 wireframes, where your insights are essential in guiding the refinement process. Ensuring alignment with your vision and project objectives is the primary goal at this stage.
Estimated time: 6 days
Iteration Based on Feedback:
Iteration Based on Feedback:
Incorporating your feedback, I spend additional time iterating on 1-5 wireframes. This iterative process allows for refining and adjusting the wireframes to meet your needs and expectations, focusing on layout, content organization, and user interactions.
Estimated time: 12 days
The Presentation and Feedback, and iteration based on feedback interconnect simultaneously together and will vary on projects needs and requirements. A general time frame adding them (making it 18 days in total) is the following:
Presentation and Feedback (Days 1-6):
- Day 1-2: Present initial wireframes and gather feedback.
- Day 3-4: Create first iteration based on feedback.
- Day 5-6: Present refined wireframes and gather additional feedback.
Iteration Based on Feedback (Days 7-18):
- Day 7-9: Work on the first iteration based on feedback received.
- Day 10-12: Present the refined wireframes and gather additional feedback.
- Day 13-15: Work on the second iteration based on feedback received.
- Day 16-18: Present the refined wireframes and gather final feedback.
Finalization and Approval:
Finalization and Approval:
The stage concludes with finalizing 1-5 wireframes, ensuring they accurately reflect your vision and are ready for the next phase of design development. Obtaining your final approval marks the successful completion of this stage.
Estimated time: 3 days
Stage 3: Low-Fidelity Prototype
Stage 3: Low-Fidelity Prototype
Breakdown of the third stage: Low-Fidelity Prototype
Breakdown of the third stage: Low-Fidelity Prototype
For this stage, I spend 5 days creating initial low-fidelity prototypes with functional animations and Lorem Ipsum text. Over 6 days, I collaborate with you, presenting prototypes and gathering feedback. I then dedicate 12 days to iterative refinement (this two steps are joined together, making it 18 days in total), implementing changes based on feedback. Finally, I allocate 3 days for finalization, ensuring prototypes reflect on feedback and are ready for approval.
Following the creation of the wireframes, I will develop a clickable low-fidelity prototype using the established designs, which are the digital wireframes from stage 2. This prototype will simulate user interactions and demonstrate the flow between screens, providing a tangible representation of your product's user experience.
The low-fidelity prototype serves as an essential tool for testing the preliminary design concepts and gathering valuable feedback on the overall flow and functionality of your product.
By allowing stakeholders and potential users to interact with the prototype, you can identify areas for improvement or refinement before moving on to the high-fidelity design phase. This iterative process ensures that your product's design is thoroughly vetted and optimized, ultimately leading to a more successful and user-friendly end product.
After refining the 1-5 wireframes based on your feedback, I create a low-fidelity prototype. This interactive, clickable version of your digital product brings the wireframes to life, allowing you to navigate through the screens and experience the user flow. I incorporate basic animations and relevant images to enhance the prototype's functionality. Interactive elements, such as buttons and form fields, enable you to test the product's basic features. Through a collaborative feedback process, we fine-tune the prototype to align with your vision and meet your target audience's needs.
Starting the design:
Starting the design:
The design implementation phase begins with a dedicated 5-day period transforming wireframes into low-fidelity prototypes. This stage focuses on incorporating functional animations to illustrate basic interactions and utilizing placeholders like Lorem Ipsum text. The aim is to keep the emphasis on layout and functionality during presentations.
Estimated time: 5 days
Presentation and Feedback & Iteration Based on Feedback
Presentation and Feedback & Iteration Based on Feedback
Presentation and Feedback:
Presentation and Feedback:
Over the next 6 days, I facilitate a collaborative feedback process by presenting the initial prototypes to you. These prototypes feature functional animations to showcase basic interactions, providing a more realistic representation of the final product. Using placeholders like Lorem Ipsum text helps us focus on refining the layout and functionality based on your feedback.
Estimated time: 6 days
Iteration Based on Feedback:
Iteration Based on Feedback:
I then spend 12 days meticulously analyzing your feedback and iterating on the prototypes. With functional animations and placeholders in place, I can quickly implement changes and demonstrate revised interactions. This phased approach, divided into four-day cycles over three iterations, ensures that the prototypes evolve to meet the project's goals and user needs effectively.
Estimated time: 12 days
Steps 2 and 3 are mixed together and will vary on projects needs and requirements. A general time frame adding the two steps (making it 18 days in total) is the following:
Cycle 1:
Days 1-2 (Presentation and Feedback):- Present initial prototypes with functional animations and Lorem Ipsum text to simulate content.
- Gather initial feedback to focus on refining the layout and functionality.
- Analyze the feedback received and implement changes to the prototypes.
- Refine functional animations and adjust placeholders as necessary.
Cycle 2:
Days 6-7 (Presentation and Feedback):- Present the revised prototypes to you for additional feedback.
- Further refine the focus on layout and functionality based on new insights.
- Iterate on the prototypes based on the latest round of feedback.
- Continue to refine and adjust animations and placeholder content.
Cycle 3:
Days 12-13 (Presentation and Feedback):- Present the further refined prototypes to you, showcasing substantial iterations based on prior feedback.
- Collect final feedback for the last round of significant refinements.
- Finalize the iteration process based on the your latest feedback.
- Ensure that all functional animations and the overall layout are polished and meet project goals.
Finalization and Approval:
Finalization and Approval:
The stage concludes with a 3-day period dedicated to finalizing the prototypes. Ensuring they accurately reflect your feedback, the prototypes will feature functional animations and placeholders, offering a dynamic representation of the final product. This supports informed decision-making and facilitates your final approval.
Estimated time: 3 days
Here are four digital wireframes designs with different numbers of frames, options 1-4 will take you to the interactive digital wireframes to the final low-fidelity prototype design on Figma.
- Option 1: Low-Fidelity Prototype: Example
- Option 3: Second Low-Fidelity Prototype: Example
- Option 4: Final Low-Fidelity Prototype: Example
Page updated
Google Sites
Report abuse