A portfolio designed around what people can learn, find and use.
The main goal
I created this website to build a portfolio about Assem Hijazi. It brings my knowledge, published work, ideas and professional background into one place, so visitors can explore what I do and find resources that are useful to them.
The portfolio also supports learning. Visitors can discover understandable explanations of AI and technology, explore my thinking, and review my work and education for professional context.
Explore the thinking behind the experience
Start with one of the three main areas. Each area introduces its own topics before you explore them in more detail.
Make the knowledge useful and discoverable first. Let professional credibility emerge through the content, with work and education available when visitors want context.
Main area
The purpose
Define what the portfolio is for and whom it serves.
The main purpose
The main purpose is to build a centralized portfolio about Assem Hijazi. It brings my published work, original ideas, practical frameworks, projects, professional experience and learning background together in one place.
The portfolio helps visitors understand my work through the knowledge I share. Books, articles, videos and infographics provide useful ways to learn about AI and technology, while Work Profile and Education Profile provide context about my background.
What guides the experience
Make useful knowledge easy to find and explore. Give visitors clear ways to browse content that matters to them, then let them review my background or make contact when they choose.
Start with the visitor’s task. Let that task guide the design.
This document records the UX strategy and design rationale for my website. I created the portfolio to bring my books, articles, videos, frameworks, ideas, projects and professional background into one place, and to help visitors find knowledge they can understand and use. It also provides a reference for explaining the website in a video and for guiding future design decisions.
The design is informed by established UX principles. The guide explains our goals and the reasons behind the design choices. Intended benefits should be distinguished from outcomes observed with visitors.
Goals
Centralize work that was distributed across different formats and platforms, without simply reproducing a CV or LinkedIn profile.
Make useful knowledge the first priority, while allowing visitors to assess my experience and learning background.
Support both focused resource discovery and informal exploration, including a familiar experience on mobile.
Provide understandable explanations of AI and technology for learners as well as useful material for professionals and decision makers.
Audiences and tasks
Audience
Primary task
Executives and decision makers
Assess expertise, explore relevant frameworks and decide whether to make contact.
Professionals and practitioners
Find a book, article, framework or project relevant to a practical question.
Learners and interested visitors
Understand a technology topic through readable explanations, infographics or videos.
These are task based audience groups. “Everyone” describes the website’s openness, but is too broad to determine content priorities or interaction choices.
Use familiar descriptions and precise UX terminology together.
Read each row from left to right: the established UX expression, our description of the design, and its meaning.
The UX expressions in the first text column identify established concepts or interaction patterns. “Doors,” “Portfolio View,” “Social View” and “knowledge first portfolio” are descriptive names used in this project; they are not formal standards or certifications.
No.
UX expression
Our description
What it means
1
Collapsible sections or disclosure widgets
Opening and closing doors
Visitors reveal or hide a section. The door treatment is the visual metaphor.
2
Accordion pattern
A group of opening sections
A stacked group of section headings and panels. This term describes the structure, not its visual appearance.
3
Progressive disclosure
Showing detail when requested
A broader principle of revealing additional detail when needed. Hiding content alone does not establish that the right information has been prioritized.
4
Familiar mental models and Jakob’s Law
Habit users or a social media habit
Visitors bring expectations from other products; Social View uses familiar feed and scrolling conventions.
5
Information architecture
Grouping knowledge
Content organization, categories, labels and relationships that support discovery.
6
Content hierarchy
Making important content stand out
The relative priority given to content through ordering and presentation.
7
Scannability
Making information easy to scan
Headings, cards and short descriptions support quick review.
8
Discoverability
Making controls easy to notice
Visitors can recognize available actions, such as closing a section or finding installation help.
9
Consistency and standards
Keeping actions predictable
Equivalent controls use consistent wording, appearance and placement.
Recommended wording: “The homepage uses collapsible sections with a door visual metaphor. Visitors choose a section to expand and can collapse it again. This supports an on demand approach to revealing content.” Avoid presenting “closing doors UX” as a recognized worldwide technical term.
03 · Design rationale
Design choices and goals
Every design choice should have a reason connected to the user.
Each decision below connects a concrete user need to a design response. The intended benefit remains a hypothesis until assessed with representative visitors.
No.
UX principle or pattern
What we applied
Description and purpose
1
Information architecture
Categories and subcategories
Organize books, articles and other formats so visitors can browse by topic or type.
2
Content hierarchy
Books before personal credentials
Lead with usable resources, then offer professional context. Validate the books first order with each audience.
3
Scannability
Career and skills cards
Present experience in manageable units. Preserve role, context and achievements so cards do not fragment the career story.
4
Collapsible sections
Named expandable sections
Keep section choices visible while allowing focused exploration. Clear labels must explain what is inside.
5
Findability
Search and category browsing
Support people with a specific question and people exploring a subject. Assess search results across formats.
6
Information architecture
Separate frameworks and ideas
Make reusable models and original concepts visible beyond the books or articles containing them. Link related resources.
7
Content grouping
My Profile group
Keep Education Profile and Work Profile separately accessible while expressing their shared purpose.
8
Familiar mental models
Social View and Portfolio View
Offer a familiar feed alongside structured browsing. A feed is an alternative path, not a universal preference.
9
Consistency and standards
Matching view switches
Use predictable location, color and labels when changing views.
10
User control and freedom
Visible Close and open all controls
Make it clear how to leave a section and let visitors choose how much to reveal.
11
Discoverability
Install as App guide
Expose installation help within the website instead of expecting visitors to know browser menus.
Content priority in this version: Books, Articles, Videos, Frameworks and Projects, Ideas and Vision, Infographics, then Posts. My Profile groups Education Profile and Work Profile; Contact and Install as App provide supporting actions. The view switch is visually separate because it changes the browsing experience.
04 · Access to knowledge
Content and accessibility
Help people reveal, read and discover content across different formats.
Expandable homepage sections
The primary technical description is collapsible sections. A section heading or disclosure control reveals its content; the associated Close control hides it again. Where the headings and panels form a stacked set, the accordion pattern is an appropriate reference. Multiple sections may remain open; an accordion does not necessarily require exclusive expansion.
The intended outcome is a manageable overview and user chosen focus. The tradeoff is that hidden content requires an extra action and can be overlooked. Keep headings informative, make the expand action obvious, and retain open all and close all controls. Do not describe collapse as automatically reducing cognitive load or as always better than a long page.
Searchable video and infographic content
Transcripts reflect what was actually said; scripts are prepared text and may differ from the recording. Meaningful transcript text can support search for a video when the website indexes it. Finding a video through a phrase does not imply that playback jumps to the exact moment; that requires timestamp support.
Text alternatives make non-text information available in another form. An infographic needs a concise alternative plus an accessible description or data equivalent when its meaning is complex. A caption or searchable text alone does not establish accessibility. Video accessibility also depends on captions and, where needed, descriptions of important visual information.
Blue visual identity and readable interfaces
Blue is my chosen visual identity. It should be described as a deliberate brand decision rather than a guarantee that every visitor finds it comfortable. Readability depends on contrast, typography, spacing and context. WCAG 2.2 sets a minimum text contrast ratio of 4.5 to 1 for ordinary text and 3 to 1 for qualifying large text, subject to its exceptions.
Responsive design should preserve readable content and usable controls across screen sizes. Keyboard access, visible focus, meaningful labels and clear expanded states are acceptance criteria to verify. Disclosure buttons should report their state, and hidden panels should not leave invisible controls in the keyboard sequence. These are requirements for review, not a claim of completed WCAG conformance.
Credibility through content and background
Education Profile provides evidence of my learning foundation. Work Profile provides professional context. Books, articles, videos and interviews let visitors assess the ideas and explanations directly. Credentials and media presence provide context; the reasoning, sources and accuracy of each resource still matter.
Main area
The experience
Explore how visitors discover knowledge and return to the website.
Different visitors can reach the same knowledge through different paths.
Choose a journey to reveal its steps. Select a step, or use Next step, to follow the path.
1
Focused research
Step 1 of 4 · Enter the subject you want to explore.
Intended outcome · Reach useful information with clear next steps.
2
Structured exploration
Step 1 of 4 · Choose the content section relevant to you.
Intended outcome · Explore one content area without opening every section.
3
Familiar discovery
Step 1 of 4 · Enter the feed browsing experience.
Intended outcome · Discover material through a familiar browsing pattern.
4
Professional assessment
Step 1 of 4 · Explore the work and knowledge presented on the site.
Intended outcome · Assess expertise before choosing to get in touch.
5
Repeat access
Step 1 of 4 · Open the installation guide from the website.
Intended outcome · Return conveniently through an app icon.
Installation as part of the experience
The Progressive Web App uses the website’s content and is configured to open in Social View. “Install as App” appears after Contact in the main menu and is also available in Social View. Its guide distinguishes Android, iPhone and iPad, Windows, and Mac.
A direct installation prompt is available only when the browser exposes it. Other visitors receive instructions for their browser. Browser menus and operating system support vary, so the guide should be maintained as those platforms change. Installation does not guarantee offline access to every book, image or video.
Performance and continuity
Performance is a UX requirement because delays interrupt reading and navigation. During the project, a slowdown and an older menu were reported after the PWA work. Background work and cache settings were adjusted. Those changes should be recorded as implementation actions, not as measured proof that performance improved.
Future reviews should compare the browser and installed app, check that content and navigation updates reach returning visitors, and measure loading on a representative phone and network. Keep media downloads deliberate and avoid unnecessary background requests. A clear offline message should explain how to reconnect when content is unavailable.
How to describe the strategy in a video
“I designed this website around the knowledge visitors can find and use. I organized resources into clear categories, gave visitors search and browsing choices, and used collapsible sections to let them reveal content when they want it. Social View offers a familiar feed, while Portfolio View supports structured exploration. These are deliberate UX decisions; visitor testing will show where the experience needs further improvement.”
06 · Interactive examples
Try the UX concepts
A small demonstration can make a design idea easier to understand.
These simplified examples illustrate the strategy. They are not live screenshots or a reproduction of the website.
Reveal content when you choose
Collapsible sections keep choices visible while letting the visitor decide which content to reveal. Try a section, or compare it with the “Open all” option.
Books Longer explanations and practical resources
A visitor can explore a topic in depth, then read or download the relevant book. Categories help narrow the choice.
Frameworks Reusable structures and models
A visitor looking for a method can find it directly, even when it originally appeared inside a book or article.
Videos Interviews and spoken explanations
A visitor can assess an explanation through video. Searchable transcripts can help locate a relevant recording.
Design tradeoff: the initial page is shorter, but hidden content needs an extra action. Clear labels and testing matter.
Choose a way to browse
Familiar mental models explain why a feed may feel comfortable to some visitors. A structured list supports another task: choosing a specific resource. Switch between these illustrative views.
B
BOOKExplore AI concepts
Read a longer explanation at your own pace.
F
FRAMEWORKFind a reusable model
See the structure behind an idea.
V
VIDEOWatch an explanation
Discover a topic through a conversation.
The content stays the same. The presentation changes to support a different discovery style.