-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
94 additions
and
281 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,128 @@ | ||
| --- | ||
| title: Desing and Prot | ||
| title: Prototyping | ||
| publishDate: 2022-03-02 00:00:00 | ||
| # img: /co-creation-toolkit/assets/illustrations/nldp-farmer.svg | ||
| img: /co-creation-toolkit/assets/toolkit/covers/toolkit-cover-01.svg | ||
| img_alt: Illustration of land use | ||
| img_alt: Screnshot of a figma prototype | ||
| description: | | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
| Prototyping is a crucial method in co-design process. A prototype is a simplified and basic version of the final product. It allows stakeholders to interact with and give feedback on its features and functionalities. | ||
| tags: | ||
| - Prototyping | ||
| - User Testing | ||
| featured: true | ||
| category: Design and Prototyping | ||
| --- | ||
|
|
||
| After the prototype was developed, it was tested by a range of intended users to assess its usability and effectiveness. This case study briefly describes the activities of this design sprint, the outcomes and the lessons learned. | ||
| ## Overview | ||
|
|
||
| > The main aim of prototypes is to **explore many different solutions early on**. At the start of the project you you should use low fidelity prototypes - they will allow you to iterate much quicker. Later in the project, when requirements are more clear, you can use high fidelity prototypes. | ||
| Figma is the go-to tool for creating prototypes in BGS. To learn how to use Figma for prototyping, refer to the [guide below](#creating-your-first-prototype). | ||
|
|
||
| ### Different types of prototypes | ||
|
|
||
| To make the discussion about prototypes clearer you can use the below [definitions]((https://svpg.com/flavors-of-prototypes/)): | ||
|
|
||
| **1. FEASIBILITY PROTOTYPES** | ||
| * For prototyping new technology (ex. updated algorithm). | ||
| * Engineer writes just enough code to see if it's feasible. | ||
| * Helps understand technical risk, often related to performance. | ||
|
|
||
| **2. LOW-FIDELITY USER PROTOTYPES** | ||
| * Essentially an interactive wireframe (doesn't look real). | ||
| * Created by interactive designers to test the workflow. | ||
| * Simulates process to identify usability issues early. | ||
|
|
||
| **3. HIGH-FIDELITY USER PROTOTYPES** | ||
| * Realistic looking, working simulation. | ||
| * Good for communicating a proposed product to stakeholders. | ||
| * Used in defensive user testing, not to see if they'll like it, but to learn if they won't. | ||
|
|
||
| **4. LIVE-DATA PROTOTYPES** | ||
| * Very limited implementation created by developers to actually prove it works. | ||
| * Has access to real data and is sent real live traffic. | ||
| * Hasn't been "productised" (no test automation, SEO, localization, etc). | ||
|
|
||
| ### Which prototype is the most useful for your project? | ||
|
|
||
| The prototype that is the most useful depends on the questions you want to answer early in the project, before the full product development begins. | ||
|
|
||
| ## Activities | ||
| * Do you want to measure user interest? (low-fidelity prototype) | ||
| * Evaluate how easy to use a system is? (high-fidelity prototype) | ||
| * Test technical capabilities? (feasibility prototype, e.g. Jupyter notebook). | ||
|
|
||
| > We set out to investigate how data and digital tools can help consider and understand the effects that land use decisions have on carbon sequestration and storage in the context of soil, woodland/ forestry and peatlands. | ||
| ### When to use it? | ||
|
|
||
|  | ||
| *The user journey for two key user groups - Land Managers and Land User Influences* | ||
| * **Uncertain Requirements**: When the requirements for the final product are unclear or not well-defined, prototyping can help explore different possibilities and refine the specifications through iterative feedback. | ||
| * **User-Centric Design**: Prototyping is beneficial when the end product's success heavily relies on user experience and feedback. It allows designers to gather user input early in the process and create a more user-friendly final product. | ||
| * **Innovation and Exploration**: If the project involves novel or innovative ideas, prototyping enables teams to experiment with new technologies or approaches and assess their feasibility. | ||
| * **Risk Mitigation**: When there are potential risks associated with the project, prototyping can help identify and address these risks in the early stages, reducing the likelihood of costly errors later on. | ||
| * **Agile Development**: Prototyping aligns well with agile development methodologies, where continuous feedback and adaptation are essential for successful product development. | ||
|
|
||
| ### When **NOT** to use it? | ||
|
|
||
| We ran the design sprint for a full five days. This was necessary due the complex nature of the challenge being solved. For less demanding challenges and stakeholders with prior design sprint experience, a shorter sprint of 2 or 3 days is also viable. | ||
| * **Well-Defined Requirements**: If the project requirements are already well-established and there is little room for change or exploration, a full-fledged prototyping process may not be necessary. | ||
|
|
||
| The goal of the first day was to encourage everyone to share what they already know and develop a common understanding with the rest of the group. By starting at the beginning (even if some people are already familiar with the problem), it nudges the group into a beginner’s mindset and leads to fresh solutions. | ||
| * **Limited Resources**: For projects with strict budget and time constraints, investing resources in the prototyping process might not be practical. In such cases, it might be more efficient to proceed directly to the final development phase. | ||
|
|
||
|  | ||
| *The user journey for two key user groups - Land Managers and Land User Influences* | ||
| * **Simple and Familiar Projects**: For straightforward and familiar projects, where the design and implementation process is straightforward, prototyping may add unnecessary complexity and delay. | ||
|
|
||
| The second day of the design sprint was about finding inspiration, looking back at the decisions made during Day 1, and starting to assemble possible solutions. Now that the team has narrowed down a problem space, it was time to start the idea generation process with sketches. | ||
| * **Highly Complex Systems**: In situations where building a prototype itself is a challenging and resource-intensive task, it might be better to focus on comprehensive planning and feasibility studies. | ||
|
|
||
| Day three was focused on generating and selecting the best solutions to the problem or challenge identified on the previous day and storyboarding the most promising idea that will be prototyped the following day. | ||
| * **Fixed Scope and Budget**: When the project scope and budget are rigidly defined, prototyping may lead to scope creep or budget overruns if not managed carefully. | ||
|
|
||
|  | ||
|  | ||
| *Screenshot of BGS component library for prototyping* | ||
|
|
||
| The purpose of day four was to create a realistic, interactive prototype of the chosen solution. The prototype was designed to simulate the key features and interactions that users will have with the final product. | ||
| ### What are the benefits of creating prototypes? | ||
|
|
||
| On day five of the design sprint, user testing was conducted to validate the prototype created on day four. User testing involved observing and gathering feedback from potential users as they interact with the prototype. The insights gained from user testing were then used to make final adjustments to the design and to support writing recommendations for future development. | ||
| * **Requirement validation**: Use prototyping to ensure that the product's requirements align with the stakeholders' expectations and needs. This helps identify any misunderstandings early in the development process. | ||
|
|
||
| * **User feedback and engagement**: Prototyping allows users to interact with a tangible representation of the product, providing valuable feedback on usability and identifying potential improvements. | ||
|
|
||
| * **Risk reduction**: By creating a prototype, potential design flaws, technical issues, or challenges can be identified and addressed before investing significant resources in full-scale development. | ||
|
|
||
| * **Communication and collaboration**: Prototypes facilitate better communication between development teams, stakeholders, and clients, as they offer a clearer understanding of the envisioned end product. | ||
|
|
||
| * **Design exploration**: Prototyping allows for experimentation and iteration, enabling designers and developers to explore different ideas and options efficiently. | ||
|
|
||
| * **Time and cost efficiency**: Building a prototype is generally quicker and less costly than developing the entire product. It can help save resources in case changes or improvements are needed. | ||
|
|
||
| ### Creating your first prototype | ||
|
|
||
| If you're interested in learning how to create prototypes, this guide is for you! It will demonstrate how to enhance an existing prototype, making it ready for testing with users. | ||
|
|
||
| Simply open the provided [slidedeck](https://www.figma.com/proto/BepNu7xysqXesp2suIw1Bh/Rapid-Prototyping-Slides?page-id=7%3A2&type=design&node-id=10-4897&viewport=62%2C3174%2C0.43&t=wwlFSh7xPiTvqgID-1&scaling=min-zoom&mode=design) and follow the step-by-step instructions. You'll learn how to set up, edit, and share your prototype easily. | ||
|
|
||
| This is the [project file](https://www.figma.com/community/file/1258074274378529219) you'll be working with throughout the process. Happy prototyping! | ||
|
|
||
| After the prototype was developed, it was tested by a range of intended users to assess its usability and effectiveness. This case study briefly describes the activities of this design sprint, the outcomes and the lessons learned. | ||
|
|
||
| > The interactive prototype was created using Figma design and prototyping tool and can be accessed in a web browser using the following link: [https://tinyurl.com/nldp-prototype](https://tinyurl.com/nldp-prototype) | ||
| ### Other tools for prototyping | ||
|
|
||
|  | ||
| *Prototype screenshots* | ||
| #### Low-fidelity prototypes | ||
|
|
||
| ## Lessons learned | ||
| * Pen and paper - it's great for early design stages. Pen and paper will allow you to iterate quicker. | ||
| <!--  --> | ||
| * [Miro Wireframes Library](https://miro.com/marketplace/wireframes/) - for creating low fidelity wireframes you can use Miro whiteboard tool. | ||
| * [Figma Wireframe Library](https://www.figma.com/community/file/989274600796773962) | ||
|
|
||
| The design sprint and prototype led to an understanding that a suite of spatially explicit data and decision support tools is integral to a land use framework. | ||
| <!-- <iframe width="811" height="455" src="https://www.youtube.com/embed/25ZGyQQC0MQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> --> | ||
|
|
||
| Having access to easy-to-use data is a critical part of having informed discussions around land use change. A shared evidence base is central to ensuring that leaders and local stakeholders are able to understand and communicate the benefits, trade-offs and shared outcomes possible from land use decision making. | ||
| #### High-fidelity prototypes | ||
|
|
||
|  | ||
| * [Figma](https://figma.com/) - for creating high fidelity prototypes you can use Figma. It has a slightly steeper learning curve, but it will allow you to create more detailed wireframes that resemble the real product. They are good for communicating a proposed product to stakeholders, but it is important to remind stakeholders that they are not the final product. | ||
| * [Framer X](https://www.framer.com/) - this tools is good for prototypes that require the use of 3D models or real data. You can import 3D models from | ||
| * [Sketchfab](https://sketchfab.com/), real data from APIs or google sheets and real maps. | ||
| * [Webflow](https://www.webflow.com/) - this tool is good for prototyping websites. | ||
| * [Framer Sites](https://www.framer.com/sites/) - similar to webflow, but still in BETA. | ||
|
|
||
| It is key that tools should include the multifunctional benefits and competing pressures of land use change to give a holistic picture of land use opportunities and constraints. Stakeholders want information presented in a clear and easy to interpret way which can help them understand business risks and make better use of financial opportunities that would support land use change. | ||
| ### Links | ||
|
|
||
| The group also came to an understanding that design sprints are an effective way to bring together diverse stakeholders with common goals to co-design new solutions. Design sprints and similar activities can foster a strong sense of community among stakeholders engaged in or impacted by land use decision making. | ||
| * [Creating a Figma account](https://help.figma.com/hc/en-us/articles/360039811114-Create-a-Figma-account) | ||
| * [Step by step instructions for creating your first Figma prototype](https://www.figma.com/proto/BepNu7xysqXesp2suIw1Bh/Rapid-Prototyping-Slides?page-id=7%3A2&type=design&node-id=10-4897&viewport=62%2C3174%2C0.43&t=wwlFSh7xPiTvqgID-1&scaling=min-zoom&mode=design) | ||
| * [Rapid Prototyping Workshop File](https://www.figma.com/community/file/1258074274378529219) | ||
|
|
||
| ## Links | ||
| ### Questions and comments | ||
|
|
||
| * [Devon Design Sprint Report](https://ffcc.co.uk/publications/devon-design-sprint-report) | ||
| * [Prototype created for the Design Sprint](https://tinyurl.com/nldp-prototype) | ||
| For any inquiries regarding Figma usage or prototype creation, feel free to contact [ux@bgs.ac.uk](mailto:ux@bgs.ac.uk). |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.