Ideation & Prototype Phases: Wireframes, Prototype for B2B Climate Product

Open
Purpose Design Co.
Milwaukee, Wisconsin, United States
SB
SARAH BERCHILD She / Her
Founder & CEO
(4)
3
Preferred learners
  • Milwaukee, Wisconsin, United States
  • Academic experience
Categories
UI design UX design Graphic design Environmental sustainability Artificial intelligence
Skills
user interface (ui) typography user flows usability testing wireframing figma (design software) user interface (ui) design usability prototyping milestones (project management)
Project scope
What is the main goal for this project?

OVERVIEW:

The purpose of this project is to create sketches, wireframes, IA and a prototype for a conceptual product based in the Climate & Sustainability sector. Your work will be based on the observation of participant research for a Client who is developing a new product in Geographical Mapping (a.k.a. Geomapping - think Google Maps).


Step 1: Review existing requirements


Step 2: Sketching and Wireframes:

Ideate! Create a lot of sketches. Meet and present ideas. Ideas will be narrowed down then wireframes will be created.


Step 3: IA or user flows

Based on existing research, sitemap or user flows may be created.


Step 4: Click through Prototype (Protopie or Figma)

The students will be asked to create an initial click-through prototype of the wireframes for future usability testing.



What tasks will learners need to complete to achieve the project goal?

GOAL:

Preface: Understand the user needs in order to design the interface

  1. Read existing reference research materials; understanding the problem to solve and the needs, preferences, and behaviors to design for.


Creating Sketches and Wireframes

  • Sketching - Based on the requirements and recommended materials, create lots of sketches ; exploring as many variations of the concept as possible.
  • Wireframes - Based on the requirements and recommended materials, create wireframes


Creating IA/User flows

  • IA/ User Flows - Based on the requirements, create IA or user flows. Outline the step-by-step process for achieving the goal, including red routes.


Creating an Interactive Prototype

  • Prototype - based on the wireframes and flows in the steps above




SCOPE:

The scope of this project includes:

  1. Reading prior requirements and documentation
  2. Create sketches and wireframes based on learnings from materials
  3. Creating a click-through prototype (protopie, or Figma) for user testing



DELIVERABLES:

The project will deliver the following:

  1. Sketches
  2. Wireframes
  3. IA or user flows
  4. Wireframes for the end-to-end product experience



MILESTONES:

The project will be completed within 4 weeks, with the following milestones:

By WEEK:

  1. Week 1 Read prior documentation/requirements. Create initial sketches - exploring as many concepts as possible. Sketch out IA or User Flow.
  2. Week 2 Present sketches, narrow down concepts. Begin wireframing. Present IA or User Flow.
  3. Week 3 Receive feedback. Refine wireframes. Begin linking wireframes to create the prototype.
  4. Week 4 Present finished prototype


Supported causes
Climate action
About the company

Designing for companies who do good. From helping the environment to designing products for women, we provide innovative and immersive experiences in the digital and physical world.