CREATIVE PORTFOLIO BRIEF

Portfolio Objectives:

PROJECT BRIEF

Powerpoint presentation to explain the project brief, purpose, users tasks and constraints

Powerpoint presentation to explain the project brief, purpose, users tasks and constraints

HTML/CSS SCOPE CHECK

Pages to Build in HTML

Constraints developing only HTML codebase

Key Considerations

CSS Animations ONLY

AI assistance used for scope check on HTML for better understanding of this application : https://claude.ai/share/bfef8683-ddcb-4042-8e94-46e048923493

<aside> 💡

User needs:

</aside>

Site Map Diagram

image 1.png

ID Content Type Format Source Status Risk
Home page Headline - introduce myself and what I do Text block, image of headshot Myself, developer on site In progress Missing info
Home page Elevator Pitch / Values as UX Designer Text block Myself In progress Missing text
Home page Navigation bar in the header Links to other webpages in a nav menu Developer Completed Unaware of pathways to other pages
Home page Contact Link Link to form, button to submit with form inputs Developer Completed Blocks in submitting the form may enable users to reach me
Resume Resume Document in hero image or first section of page PDF/PNG, downloadable Myself In progress Unidentified button labels will confuse users and block them to viewing CV
About Full bio with background info on my path in UX design and goals in the field Timeline diagram, list view of accomplishments and milestones Myself Not Started Unclear points can misinform users of your UX journey and goals
Workflow strategies Team style, collaboration and communication techniques Text block, images with workflow examples Myself Not started Risky to not elaborate on workflow processes and systems, it will not communicate to the users
Case Studies (Header/Intro) Statement of UX methodologies Text block, approach spectrum diagram (Sequential, hybrid and agile) Myself Not Started Missing statement of methods will stray away users to consider your design style in their team
Case Studies (Main body) Sections of 3 different case studies Card block with images, text and links to deliverables Myself Not started Short, concise summaries are better than risky long blocks of text
Example Study (for both case studies) Title and Context Text Block Project files Not started
Example Study (for both case studies) UX methods described Text block, timeline and role images/diagrams Project files Not started Dependent on developer
Example Study (for both case studies) Section - Initiation (overview, goals and problem statement) Text block Project files Not started Unclear goals and scope undefined
Example Study (for both case studies) Section - Research (methods used) Charts, diagrams, team roles and collaboration tools Project files Not started Missing assets
Example Study (for both case studies) Section - Define (user personas, tasks, constraints, and problem solving framing) Images of personas, text blocks and lists to define tasks and constraints Project files, user research findings Not started Missing assets, not credible user research tactics
Example Study (for both case studies) Section - Ideate (sketches, concepts) Images, videos, media Project files Not started Missing assets
Example Study (for both case studies) Section - Design (wireframes, UI decisions and prototyping) Embedded prototype/video walkthroughs, images and diagrams Project files not started Missing assets
Example Study (for both case studies) Section - Test (usability testing, iteration process) Spreadsheets and charts, visualization of feedback iteration process Project files/user testing results and feedback not started NDA requirements, users may not consent their data being used for testing
Example Study (for both case studies) Section - Launch (final outcome, handoff and documentation) Mapping of completion process, PDFs of documentation Myself not started Permission needed from client
Example Study (for both case studies) Section - Impact and metrics Text block, data visuals and charts Myself, project files not started Missing assets of metrics
Example Study (for both case studies) Post-Mortem Text block Myself not started Dependent on developers reflection
Contact Text above form Text block Myself not started Missing text that does not instruct users to fill out form to contact
Contact Form (name, email and textarea Form and button Myself not started Risky if no disclaimer that information will not be saved
Contact Links to other social media pages (linkedIn, GitHub, Figma) Text blocks, icons with embedded links Myself not started Dependent on developer

Responsive Wireframes

MOBILE VIEW - SMALL

MOBILE VIEW - SMALL

Desktop - Large Viewport

Desktop - Large Viewport

Tablet - Medium Viewport

Tablet - Medium Viewport

https://www.figma.com/design/c86iUcAk979Q8jlaRMr1Af/Planning-Package?node-id=0-1&t=K1FAfqBYrbC99p1N-1

Behavior annotations:

Acceptance Criteria: