Ideation & Prototype Phases: Wireframes, Prototype for B2B Climate Product
![Purpose Design Co.](https://riipen-platform2-ca-central-1-production.s3.ca-central-1.amazonaws.com/uploads/company/23861/avatar/medium-9df4f2cdf9045e903e8e3107dfb7eea4.png)
Project scope
Categories
UI design UX design Graphic design Environmental sustainability Artificial intelligenceSkills
user interface (ui) typography user flows usability testing wireframing figma (design software) user interface (ui) design usability prototyping milestones (project management)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.
GOAL:
Preface: Understand the user needs in order to design the interface
- 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:
- Reading prior requirements and documentation
- Create sketches and wireframes based on learnings from materials
- Creating a click-through prototype (protopie, or Figma) for user testing
DELIVERABLES:
The project will deliver the following:
- Sketches
- Wireframes
- IA or user flows
- Wireframes for the end-to-end product experience
MILESTONES:
The project will be completed within 4 weeks, with the following milestones:
By WEEK:
- Week 1 Read prior documentation/requirements. Create initial sketches - exploring as many concepts as possible. Sketch out IA or User Flow.
- Week 2 Present sketches, narrow down concepts. Begin wireframing. Present IA or User Flow.
- Week 3 Receive feedback. Refine wireframes. Begin linking wireframes to create the prototype.
- Week 4 Present finished prototype
Preferred Timezones: CST/EST/MTN. Open to any location who is willing to accommodate the preferred timezones.
Please note:
Our hours are: 11am CST - 4pm CST
Design meetings - once per week for 90 mins
to provide virtual in-person guidance, help and feedback along the way.
Client presentations - once per week for 90 mins
Available 4x per week for email correspondences.
Students will come out of this project with real-world case study in usability testing with a real client.
Purpose Design will attend and help with interviews and facilitate the user interviews of key executive stakeholders.
Supported causes
The global challenges this project addresses, aligning with the United Nations Sustainable Development Goals (SDGs). Learn more about all 17 SDGs here.
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.
Portals
![Springboard](https://riipen-platform2-ca-central-1-production.s3.ca-central-1.amazonaws.com/uploads/portal/842/avatar/xsmall-2768eb14bed0d6a710269610f4e63538.png)
![Springboard](https://riipen-platform2-ca-central-1-production.s3.ca-central-1.amazonaws.com/uploads/portal/842/avatar/xsmall-2768eb14bed0d6a710269610f4e63538.png)