top of page

Close

P-TECH

PROJECT:  Model Website
ROLE: UX/UI Design Lead & Visual Designer
DURATION: 5 months
TOOLS: Illustrator, Jira, Microsoft tools

The Problem

IBM’s Corporate Citizenship & Corporate Affairs (CC&CA), hired IBM Interactive Experience Chicago Studio to participate in the Design and Development work for the P-TECH Content Site project. The purpose of this content site is to detach the Model from one single P-TECH school. ​

The Resolution

Joined the P-TECH Content Website project as the UX/UI Designer and Visual Designer.

 

Deliverables included the following: Stakeholder Interviews, Competitive Analysis, conduct a Requirements Workshop, create User Profiles/Personas, create User Scenarios and Use Case Models for each scenario, created a Site Map and Wireframes as well. As a Visual Designer, I created design templates, logo designs and a Visual Style Guide for the development team. I also created a Branding Style Guide and assets for the development team as well as help with content design.

One Day Requirements Gathering Workshop

Conducted a 1 day workshop with project stakeholders to define user requirements.
Conducted a user-based scenarios activity where we reviewed and validated user journeys.
Conducted a use case diagraming activity where we reviewed and validated process flows.
Reviewed and prioritized key business and functional requirements.
Conducted a review of the content audit of the existing website.

Project deliverables timeline

Project Deliverables Timeline

Reviewed & validated

team deliverables and due dates

Design and implementation graphic

Design & Implementation

Process describing IBM iX's design processes

IBM's product development methodology

IBM's Product Development Methodology

Includes planning & process and is risk-managed

Personas

Created Personas based on numerous interviews with SMEs and school directors.
Used them in a Design Thinking workshop with clients to come up with user journeys, prioritize requirements and develop use cases.

Persona Card
Persona card
Persona card

Site map

Site Map
Digital Construction

Wireframes

Wireframe 1
Wireframe 2
Wireframe 3

Logo designs

Logo designs options presented to stakeholders

Visual style guides

Visual Style Guides
Visual Style Guides
Visual Style Guides
Visual Style Guides
Visual Style Guides

Branding guidelines

Branding Guidelines page
Branding Guidelines page
Branding Guidelines page
Branding Guidelines page
Branding Guidelines page
Branding Guidelines page
Branding Guidelines page
Branding Guidelines page
Gradient Backdrop

Final High Fidelity Comps

Final design comps
Final design comps
Final design comps
Final design comps
Final design comps
Final design comps
Back to top
bottom of page