Fidelity Wireframes

Sketches, or Sketch Wireframes, give a high-level view of the design and flow of a system. They serve to allow for the quick brainstorming of ideas. Sketches can be easily made while conversing with a client or another member of the team to easily visualize and communicate ideas. Sketches may include design aspects or details that may not be in the final product. They serve as more of a brainstorming tool rather than a mock-up of the final product. Low-Fidelity wireframes are sketches, but could also be drawn on a whiteboard or small piece of paper. Medium Fidelity Wireframes are more detailed than low-fidelity wireframes. They tend to include more of the final design as they are typically created in a stage of the process where requirements and details are beginning to get more specific. They tend to have more color and or detail. They allow the client to see the progress in their design and visualize the direction that the product is going in. Medium Fidelity Wireframes are typically recreated throughout the design process as the client is giving feedback, ensuring the design is what they want. High Fidelity Wireframes are very detailed and serve as a prototype for the system. They are used to fine-tune the details of the design and allow for clear communication between the design team and the development team. High Fidelity Wireframes can be made interactive by using software like Adobe XD or Figma. Wireframes like these allow for early feedback from the client to ensure that developers will create the correct product during development. They also allow for early testing of the UX of the system. These wireframes are very close to the final product which allow developers to easily create the system.

Process

To create the design of the Ashlynn Glitz & Glitter Custom Boutique e-commerce site, I started by thinking of the main functions of an e-commerce site. I also reviewed the problem statement and the business statement to solidify my understanding of some of the requirements of the system. One of the biggest features was ensuring that the ordering of custom products is clear for both the user and easy to read for the business. I made sure to focus my attention on this page of the system. The page outlines many clear areas for data entry when ordering a custom product. Another important aspect of the website was allowing the customers to easily browse products that have been created. Because of this, I felt it was important to include a gallery where customers can order a custom product by clicking on the photo of the product. They could also easily browse through the gallery like a design catalog. First, I did a rough sketch of the system, then translated them to medium-fidelity wireframes that have more images, colors, and details of some of the functionalities of the system. While translating the sketch to a medium fidelity wireframe I found myself thinking about more of the requirements of the system. This allowed me to be more specific with the features that I add to ensure that they are sufficient for the site and the business.