Mostafa Malek | Graphic Designer | Branding & UI/UX Specialist

A modern graphic design composition featuring a grayscale portrait of a thoughtful man with geometric elements, including a yellow triangle and a blue circle, overlaid with bold red text that reads The Swiss.

A modern poster design displayed in a minimalistic office setting. The poster features a grayscale portrait of a man holding his head with both hands. His face is accented with bold geometric shapes, including a yellow overlay on his forehead, blue highlights on his right hand, and red highlights on his left hand. The background includes subtle architectural lines, emphasizing clean and structured aesthetics.

Campaign Devolopment

THE SWISS

Visual Identity system

Zurich Olympic

Mockup of the BreatheEco mobile app user interface displayed on a smartphone. The design features a sleek, modern layout with vibrant blue and purple gradients, showcasing user experience and interaction elements, including menus and app screens.

A grid layout displaying multiple mockups of the BreatheEco mobile app. Each screen showcases clean and interactive UI/UX elements with blue and white themes, demonstrating features like map navigation, data visualization, and user settings on a smartphone.

UI-UX Design

BREATHE-ECO App

An open book showcasing Bauhaus-inspired designs. The left page features a blue ‘b’ with a yellow triangle, while the right page highlights geometric architectural visuals with red and black elements. The minimalist layout embodies Swiss-style design principles with clean typography and a modern aesthetic.

Books featuring Bauhaus-inspired designs with geometric elements, including yellow triangles and blue circles, placed on a wooden surface next to a plant and a decorative hand model.

Brand Style Guide

Intersect LA

Product Design and Packaging

GlowGum - Skin Care Product

Magazine layout featuring Billie Eilish on the cover with a modern and edgy design. The cover highlights the text ‘The New Edge of Seventeen’ and includes bold typography and a teal-toned portrait of Billie Eilish. The open spread reveals sleek typography and artistic imagery, emphasizing the song ‘Ocean Eyes’ with a vibrant and sophisticated aesthetic.

layout &magazines design

Billie Eilish

A comprehensive visual showcase of ‘The Swiss’ design project displayed in a minimalist exhibition setting. The display includes posters, prints, a tote bag, and other branded materials, featuring bold Swiss-style design elements such as geometric shapes, modern typography, and a grayscale portrait. Vibrant yellow, red, and blue accents highlight the designs, emphasizing the clean and structured aesthetic of Swiss minimalism.

An invitation card for ‘June 2023 SWISS Exhibition’ hosted by The Design Museum. The design features a minimalist layout with a bold yellow ‘J’ and gray ‘une’ typography. The invitation includes details about the International Typographic Style, influenced by Bauhaus and Jan Tschichold’s New Typography. The card also includes a postal stamp, an address for Mostafa Malek in Northridge, CA, and the Design Museum’s contact details at the bottom.

An outdoor advertisement display showcasing ‘The Swiss’ exhibition poster. The design features a grayscale portrait of a thoughtful man, geometric shapes in yellow, red, and blue, and bold red typography. The background highlights Bauhaus-style architecture with balconies. The modern composition emphasizes clean lines, structured aesthetics, and typographic precision. The poster is situated in a modern plaza with contemporary glass buildings and landscaped greenery in the background.

A Swiss-style graphic design featuring a grayscale portrait of a man holding his head with both hands. The design incorporates bold geometric elements, including a transparent yellow triangle overlaying the man’s face and a solid blue circle near his hand. The text ‘The Swiss’ is prominently displayed in bold red and black typography, with the word ‘Exhibition’ subtly placed in the background. Minimalist and clean design aesthetics reflect Swiss-style principles.

A Swiss-style graphic design showcasing a group of individuals from the Bauhaus movement era with a yellow triangular highlight, a blue circular accent, and bold red typography reading ‘The Swiss Exhibition.’

A minimalist Swiss-style poster displayed in a modern office setting. The design features a grayscale portrait of a man holding his head with both hands, accented by bold geometric elements. A transparent yellow triangle overlays the upper face, with solid red and blue circles highlighting the hands. The composition includes clean, structured typography in the lower section, emphasizing the Design Museum and details about the Swiss exhibition. The setting includes sleek wood paneling, glass walls, and natural lighting, enhancing the contemporary atmosphere.

A Swiss-style collage showcasing multiple poster designs and promotional materials for ‘The Swiss Exhibition.’ The layout includes bold red and yellow typography, geometric elements like triangles and circles in primary colors, grayscale portraits, and architectural visuals influenced by Bauhaus. The designs highlight clean lines, minimalism, and typographic precision.

A modern exhibition space showcasing three Swiss-style posters framed on a light blue wall. The left poster features bold red typography ‘The Swiss’ with geometric shapes and Bauhaus-style architecture. The center poster displays a group of Bauhaus individuals with a yellow triangular highlight, emphasizing Swiss-style design principles. The right poster portrays a grayscale portrait of a man with geometric accents in yellow, blue, and red, highlighting minimalism and typographic precision. The room is complemented by a clean, minimalist design with white benches and natural lighting from skylights.

A drawstring bag featuring a Swiss-style design with a grayscale portrait of a man holding his head, overlaid with bold typography reading ‘The Swiss Exhibition’ in red and yellow, accented by geometric elements such as a blue circle. The bag emphasizes minimalism and structured aesthetics.

A grayscale photograph of athletes in the middle of a race start, showcasing intense motion and focus. The image captures the runners in a crouched sprinting position, with a background featuring spectators and a track field, emphasizing dynamic movement and athletic determination.

vibrant poster for the Zurich 2038 Olympic Games, featuring bold typography and a Swiss-inspired grid layout. The words ‘Olympic Zurich’ are prominently displayed in black and blue, alongside the large number ‘38’ in orange and red outlines. The design includes descriptive text in the lower section, emphasizing the project’s focus on Swiss design principles, cohesion, and precision, inspired by Josef Müller-Brockmann. The poster’s warm orange background complements the clean and structured aesthetic.

This image appears to combine a color palette breakdown with a grayscale, artistic image of a person tying their shoe. The palette includes specific Pantone color codes and their corresponding hex values, likely used to define a cohesive visual identity. The image style evokes a minimalist, Swiss-inspired design aesthetic with a modern and energetic focus. If you’d like to refine or adjust the design, feel free to let me know!

Display of three Swiss-style posters for the Zurich 2038 Winter Olympic Games mounted on a black perforated backdrop. The left poster features a cyclist in motion with bold blue and black typography stating ‘Zurich 06-11-38.’ The center poster showcases a tennis player in a dynamic pose, highlighted with red halftones and vertical yellow typography reading ‘Zurich 08-11-38, 07-12-38.’ The right poster captures a sprinter in action with clean blue and black typography echoing ‘Zurich 06-11-38.’ All posters emphasize Swiss-inspired minimalism, bold colors, and dynamic design elements.

A vibrant display of three posters promoting the Zurich 2038 Winter Olympic Games in a subway setting. Each poster features dynamic Swiss-style designs with bold typography and halftone imagery of athletes in action. The left poster highlights a cyclist with blue and red accents and the text “Zurich 06-11-38.” The center poster showcases a tennis player in motion, emphasizing yellow and red tones with “Zurich 06-11-38” text. The right poster depicts a sprinter mid-stride with a minimalist blue and black color scheme and “Zurich 06-11-38.” The composition reflects a cohesive, modern aesthetic with clean lines and dynamic energy. A passerby in a denim jacket adds movement and realism.

Two hoodies inspired by the Zurich 2038 Winter Olympic Games, showcasing bold Swiss-style designs. The left hoodie features a vibrant red halftone image of a tennis player mid-swing with yellow vertical typography reading ‘Zurich.’ The right hoodie displays a red halftone image of a sprinter in motion, complemented by bold blue typography running vertically along the side. Both hoodies incorporate a modern aesthetic with clean, dynamic lines and colorful drawstrings that match the design elements, reflecting energy and Swiss design precision.

A promotional image for the BreatheEco application UI/UX case study. The design showcases a sleek, blue background with the app’s name, ‘BreatheEco,’ prominently displayed alongside the tagline ‘Designed only for Breathe SoCal.’ Two smartphones are featured, showing the app interface with the main screen titled ‘Choose Your Challenge,’ offering options such as Eco-Ride Challenge, Green Route Planner, Carpool Connector, and Transit Rewards. The image emphasizes clean design and user-friendly navigation. The designer, Mostafa Malek, is credited as UX/UI Designer and Concept Developer through highlighted buttons.

An informational presentation slide for the Breathe-Eco Project. The text highlights EcoPath, a user-friendly mobile application designed to promote environmentally conscious decisions. It integrates real-time data, sustainable commuting routes, community challenges, and educational resources to foster a greener lifestyle. The overview explains how the app helps users reduce their carbon footprint, engage in eco-friendly challenges, and access educational content. The slide mentions that EcoPath is available on both iOS and Android platforms, with yellow buttons indicating the respective platforms. The design features a dark gradient background with bold white and blue text for clarity and emphasis.

A presentation slide titled ‘My Role’ for the BreatheEco project, highlighting the role and contributions of the lead UX/UI designer. The slide describes responsibilities such as orchestrating the visual and functional framework of the application to meet high design standards while aligning with eco-conscious commuting needs. Key areas of contribution are outlined in labeled sections: ‘UI Documentation’ for detailed guidelines, ‘Provide Assets’ for ensuring consistent and functional design across platforms, ‘UX/UI Audit’ for preempting usability issues, ‘User Testing’ involving usability and A/B tests, ‘Flow Documentation’ to aid developers in understanding app processes, and ‘Research’ to align app features with market and user needs. The slide features a grayscale circular portrait of the designer in a formal shirt and tie, placed in the top-right corner. The background is a dark gradient with white and blue text for emphasis.

A presentation slide titled “Design Strategy” outlines the core elements of BreatheEco’s design approach, aimed at creating a sustainable, user-centric mobile experience for environmentally conscious transportation. The content is divided into four sections:
1. Intention: To provide a robust platform for users to plan eco-friendly commutes, earn rewards, and track environmental impact.
2. Target User: Focused on individuals aged 18-50 who use smartphones as their primary device and are committed to reducing their carbon footprint.
3. General Task: The app integrates features like route planning, commute tracking, reward systems, and community challenges to promote sustainable habits.
4. Success Factors: Success is measured by user engagement levels, commute tracking accuracy, user satisfaction scores, and the environmental impact reported by users.

The slide uses a dark gradient background, bold yellow and blue text for headings, and white text for descriptions, emphasizing a clean and professional layout.

A timeline illustration titled “Design Process” depicting the phased development of the BreatheEco application. The text explains the creation process, starting with deep user research and progressing through detailed UX and UI design stages to refine functionality and aesthetics. The timeline spans from September to December, with key milestones: “Problem & Solution” and “Research” in September weeks 1-2, “Surveys & Interview” and “User Persona” in September weeks 3-4, “Empathy Map,” “User Flow,” and “Low-fi Wireframes” in October weeks 1-2, and “Mid-fi Wireframes” and “Style Tiles” in October weeks 3-4. “User Testing” and “High-fi Wireframes” occur in November weeks 1-4, followed by “Visual Design Documentation” in December weeks 1-4. The visual emphasizes a structured approach to delivering a user-friendly platform for promoting sustainable living.

A presentation slide titled “Design Process” illustrates the phased development timeline for the BreatheEco project, detailing key milestones from user research to high-fidelity prototypes. The timeline spans from September to December and is divided into weekly segments:
• September W1-2: Identifying “Problem & Solution.”
• September W3-4: Conducting “Research,” “Surveys & Interviews,” and creating “User Persona.”
• October W1-2: Developing “Empathy Map,” “User Flow,” and “Idea Sketches.”
• October W3-4: Producing “Low-fi Wireframes,” “Mid-fi Wireframes,” and “Style Tiles.”
• November W1-2: Conducting “User Testing.”
• November W3-4: Developing “High-fi Wireframes.”
• December W1-2: Finalizing “Visual Design Documentation.”

The timeline emphasizes a structured approach, with yellow and blue color codes used to highlight different tasks against a dark gradient background, reflecting a professional and modern aesthetic.

A presentation slide titled “UX/UI Roles and Responsibilities” showcases the key phases and components of user experience (UX) and user interface (UI) design processes. The slide is divided into four main sections, aligned with a central Venn diagram depicting the overlap between UX (yellow circle) and UI (blue circle), representing their collaborative nature.
• User Research (Yellow): Includes activities such as “Problem & Solution,” “Objectives & Goals,” “Research,” and “Survey & Interview.”
• Research Analyst (Yellow): Covers tasks like “User Persona,” “Empathy Map,” and “User Flow.”
• Interface Design (Blue): Focuses on “Mid-fi Wireframes,” “Style Tiles,” and “User Testing.”
• Design Specs (Blue): Encompasses “UI Prototype,” “High-fidelity Wireframes,” and “Visual Design Documentation.”
• Design Ideation (Yellow): Highlights “Idea Sketches” and “Low-fidelity Wireframes.”

The slide features a dark gradient background with text in contrasting yellow, blue, and white, creating a clean and professional aesthetic. The layout emphasizes the distinct yet interconnected roles in UX/UI design, making the information easy to follow.

A presentation slide titled “Problem Statement” features a clean design on a dark gradient background. The slide includes two white abstract scribbles, visually representing confusion or complexity, connected by a continuous white line. Below, the text highlights the problem:

“In a world increasingly aware of environmental challenges, many individuals lack the tools and knowledge necessary to make sustainable lifestyle choices. Despite the desire to act, they face barriers in accessing real-time environmental data, understanding the direct impact of their actions, and finding practical, daily solutions that contribute to global sustainability. This gap hinders personal and collective efforts to combat climate change effectively.”

The design uses blue and white text for contrast, with “Problem Statement” prominently displayed in bold blue to draw attention. The visual and textual elements emphasize the challenge of simplifying complex environmental issues for users.

A presentation slide titled “Solution” uses a dark gradient background with a visual sequence of white spiraling lines transitioning into yellow lightbulb-like shapes, symbolizing clarity and innovative ideas. The design progresses from abstract scribbles to a glowing yellow lightbulb with white rays, illustrating the transition from complexity to a clear solution.

The text below explains EcoPath’s solution:
• Creation of an all-encompassing eco-friendly app: Includes features like real-time environmental monitoring, route optimization for lower carbon footprints, and educational resources.
• Real-Time Data & Alerts: Provides users with live updates on local air quality, energy usage, and more, enabling immediate and informed action.
• Sustainable Route Planner: Offers the most eco-efficient routes for daily commutes, reducing individual carbon emissions.
• Community Challenges and Rewards: Engages users in sustainability initiatives with a reward system to encourage eco-friendly habits.
• Interactive Educational Tools: Integrates augmented reality and interactive content to make sustainability education engaging and impactful.

The design and content emphasize EcoPath’s innovative approach to empowering users with practical tools for sustainable living.

A presentation slide titled “Objectives & Goals of Breathe-Eco” with a tagline, “Empowering Sustainable Lifestyles Through Technology.” The slide is designed on a dark gradient background with blue and yellow text accents.

It outlines the following objectives and their impacts:
1. Enhance Environmental Awareness:
• Educate users about their environmental impact using real-time data and analytics to foster deeper sustainability understanding.
• Impact: Increase user knowledge and awareness, leading to informed and conscious decision-making.
2. Promote Sustainable Commuting Options:
• Offer optimized commuting routes and alternatives to reduce carbon emissions and encourage greener transportation.
• Impact: Reduce users’ carbon footprints by providing smarter, eco-friendly commuting choices.
3. Facilitate Community Engagement:
• Build a platform for users to participate in community-driven environmental challenges and initiatives.
• Impact: Strengthen community ties and collective efforts in sustainability, amplifying the overall impact.
4. Incorporate Educational Resources:
• Integrate interactive and engaging content on environmental conservation and sustainability practices.
• Impact: Equip users with knowledge and skills for sustainable daily practices.
5. Deliver Personalized User Experiences:
• Tailor app features to user preferences and behaviors to enhance usability and effectiveness.
• Impact: Boost user engagement and satisfaction, ensuring long-term use and advocacy for sustainability.

The content and layout aim to showcase Breathe-Eco’s strategic focus on environmental awareness, sustainable practices, and user-centric solutions.

A presentation slide titled “User Research” on a dark gradient background. The slide emphasizes the importance of user research in developing BreatheEco. It explains that surveys and interviews were conducted to understand potential users’ behaviors, preferences, and challenges in adopting sustainable commuting habits.

Below the main section is a highlighted subsection titled “Survey,” which details that:
• A survey was conducted with 30 potential users.
• The data collected included both quantitative and qualitative insights.
• The target demographic consisted of individuals aged 18-45 who are interested in reducing their carbon footprint.

The slide design uses bold white text for headings and blue text for key subsections, ensuring clarity and focus on the content.

A presentation slide displaying three donut charts on a dark gradient background, visually representing survey results for BreatheEco’s user research.
1. First Chart (Age Group):
• The chart answers, “What is your age group?”
• Segments: 43% (18-25, blue), 38% (26-35, yellow), 19% (36-45, white).
2. Second Chart (Carpool Feature Likelihood):
• The chart answers, “How likely are you to use a carpool feature to reduce your environmental impact?”
• Segments: 51% (somewhat likely, yellow), 41% (very likely, blue), 8% (unlikely, white).
3. **Third

Chart (Carbon Footprint Challenge Interest):**
• The chart answers, “Would you be interested in a feature that challenges you to reduce your carbon footprint weekly?”
• Segments: 82% (interested, blue), 16% (somewhat interested, yellow), 2% (not interested, white).

The color-coded legend at the bottom links the responses with the color segments, ensuring clear and accessible data interpretation.

An ‘Interview’ section highlighting feedback from six participants selected for virtual interviews conducted via Zoom to explore commuting routines and preferences. The section features participant names, roles, and quotes:
1. Mostafa Haghi (Architect): ‘An app that suggests the least polluting route would not only help the environment but also help me manage my time better.’
2. Mobina Kalhorian (Consultant): ‘I need real-time updates on public transit delays and bike-share availability to rely more on sustainable transport options.’
3. Elham Badrabadi (Software Developer): ‘It’s hard to find safe and quick bike routes in the city. An app that could provide this information would be invaluable.’
4. Emma Clarke (School Teacher): ‘I’d use an app that tracks my carbon savings from commuting—it would motivate me to keep using green modes.’
5. Natalie Chen (Marketing Manager): ‘I’m interested in sustainable travel methods. An app that plans efficient routes with minimal environmental impact would significantly help.’
6. Alex Johnson (University Student): ‘I prefer not driving for environmental reasons, but need reliable transit updates. An app offering this would be incredibly useful.’

The layout emphasizes user diversity and their unique insights to guide eco-friendly app development.

User Flow Diagram for the BreatheEco App showcasing the user’s journey from downloading the app to participating in eco-friendly challenges. The flowchart illustrates the app’s intuitive navigation, emphasizing user actions and decision-making points to promote environmentally friendly choices. Key features of the flow include:
1. Starting Point: The user downloads the app.
2. Sign-In Process: Users can either log in or create an account, with options for third-party integrations such as Google or Apple sign-in.
3. Onboarding: Guided steps to introduce users to the app’s features and benefits.
4. Main Navigation: Multiple pathways for accessing features like:
• Sustainable Route Planner
• Eco-friendly Challenges
• Carbon Footprint Tracker
• Community Engagement
5. Decision Points: Represented by diamond shapes, showing choices such as joining challenges, tracking commutes, or customizing user preferences.
6. Actions: Circular nodes represent tasks like setting goals, logging activities, or accessing rewards.
7. Completion: Pathways converge to outcomes like earning rewards, viewing sustainability reports, or sharing progress within the community.
8. Legend: A legend at the bottom explains the diagram’s symbols: blue circles for actions, yellow diamonds for decision points, and white rectangles for processes.

This user flow highlights the app’s thoughtful design, empowering users to seamlessly adopt eco-friendly habits while navigating through personalized and community-driven features.

Low-Fidelity Wireframes for the BreatheEco App showcasing the foundational design of the app’s user interface and interaction flow. The wireframes represent early-stage sketches that focus on the layout and functionality, simplifying complex concepts into basic elements to ensure clarity and usability. Key details include:
1. Primary Pages:
• ‘Our Mission’ and ‘Rich Heritage’ screens providing introductory content.
• ‘Make a Difference’ and ‘Select Service’ screens outlining user engagement options.
• ‘Transportation’ page displaying multiple transport options.
2. User Authentication:
• ‘Create an Account’ and ‘Sign In’ pages.
• ‘Forgot Password’ and ‘New Password’ workflows.
3. Home and Challenges:
• ‘Good Morning’ dashboard with personalized content.
• ‘Badges’ page showcasing achievements.
• ‘Choose Challenge’ pages with multiple task options.
4. Interactive Features:
• ‘Source’ and ‘Step-by-Step’ screens guiding users through eco-friendly practices.
• ‘AR’ (Augmented Reality) section for interactive experiences.
• ‘Setting’ page for user preferences.
5. Visual Layout:
• Basic placeholders for images and text content.
• Uniform navigation bar across pages for consistency.

These wireframes highlight the app’s structural design, prioritizing functionality and ease of navigation, while serving as a blueprint for further refinement during the development process.

Style Tiles for the BreatheEco App, showcasing the visual identity elements used in the design. The tiles include:
1. Color Palette:
• Primary colors: Blue (#4285F4), Yellow (#FBBC01), and Red (#EA4335).
• Secondary colors: Green (#0F652D), White (#FFFFFF), Light Blue (#D2E3FC), and Grey (#9AA0A6).
2. Typography:
• Typeface: Helvetica Neue.
• Styles: Regular (40/50) and Bold (16/23).
• Example text demonstrates uppercase and lowercase alphabets along with numerals.
3. Icons and Graphics:
• A set of blue icons representing eco-friendly and transportation concepts, such as lungs, leaves, buses, bicycles, and carpooling.
• Colored illustrations of people using various transportation modes (e.g., bicycles, buses, and carpooling).
• A row of circular avatars representing diverse users.
4. Design Elements:
• Minimalist curves complement the visual design.
• The overall design reflects an eco-friendly and accessible theme, with an emphasis on clarity and sustainability.

Mid-Fidelity Wireframes for the BreatheEco App, showcasing detailed screen layouts and navigation flow. These wireframes represent an intermediate stage of app design, incorporating refined user interface elements such as typography, icons, and layout structure.
1. Top Section:
• Screens for onboarding, account creation, login, and password recovery processes.
• Progression flow displayed using connecting lines to show user navigation paths.
2. Middle Section:
• Main dashboard screens featuring ‘Good Morning’ greetings, badges, resources, and personalized challenges.
• Navigation to content such as AR guides, eco-friendly resources, and settings.
3. Bottom Section:
• User action screens for selecting and completing challenges, joining carpool groups, and tracking progress.
• Interaction-focused screens for customizing routes, earning rewards, and participating in community-driven initiatives.
4. Design Layout:
• Consistent header and footer navigation bars across screens.
• Clear paths connecting the screens visually represent the user journey.

The wireframes provide a cohesive view of app functionality, emphasizing usability, clear navigation, and eco-conscious features.

User Testing Summary for BreatheEco App, highlighting insights from four different participants, including their background, habits, obstacles, rewards, and prioritized features.
1. User #1:
• Background: Office worker interested in reducing their carbon footprint.
• Tech Habits: Regular app user with moderate comfort with technology.
• Insights: Interested in real-time environmental alerts and sustainable transportation routes.
• Feature Priorities: Ranked most interested in real-time alerts, community engagement, and enhanced eco-routing.
2. User #2:
• Background: Professional promoting sustainability in personal and professional life.
• Tech Habits: Advanced tech user with preferences for seamless app integrations.
• Insights: Emphasized the importance of data on environmental impact and social sharing features.
• Feature Priorities: Prioritized smart device integration, advanced environmental data, and social group-sharing tools.
3. User #3:
• Background: Freelancer passionate about reducing environmental impact during daily activities.
• Tech Habits: Comfortable with app ecosystems and data-driven features.
• Insights: Highlighted the need for advanced mapping tools and local transport integration.
• Feature Priorities: Focused on mapping tools, local integration, and collaboration tools.
4. User #4:
• Background: Educator integrating sustainability into their curriculum and daily life.
• Tech Habits: Uses apps occasionally but prioritizes family-related sustainability.
• Insights: Favored group management features and educational tools for students.
• Feature Priorities: Group management, educational content, and real-time environmental data.

The testing highlights specific user needs and pain points, aiding in refining the app’s features and enhancing usability tailored to diverse lifestyles and priorities.

An open magazine spread featuring a modern, artistic layout with a black background. The left page highlights a male figure, identified as Finneas, seated at a white keyboard under a spotlight, accompanied by descriptive text detailing his contributions as a collaborator and songwriter.

The right page contrasts with a bold red ladder prop, where Billie Eilish, dressed in an all-red outfit, leans dynamically. Surrounding her are various typographic elements, including words like ‘Songwriter,’ ‘Electropop,’ ‘Bad Guy,’ ‘Sagittarius,’ and ‘California,’ visually emphasizing her identity and achievements. The overall design uses contrasting colors and dynamic visuals to create a dramatic and engaging aesthetic.

Magazine spread featuring a modern and artistic layout. The left page has a dark background with a small grayscale photograph of a seated person in a contemplative pose, captioned ‘Billie Eilish 2001.’ The right page displays a close-up, monochromatic portrait of Billie Eilish with an overlay of a blue triangular graphic on her face. The text reads ‘The New Edge of Seventeen,’ accompanied by her website URL (www.billieeilish.com) and her birthdate, ‘December 18, 2001.’ The design incorporates minimalist typography and vertical yellow and green lines for a dynamic visual effect.

Magazine spread featuring a dynamic design with Billie Eilish and her brother Finneas. The left page includes a photo of Finneas seated at a white piano, accompanied by a biographical text about his achievements as a songwriter and producer, with bold excerpts from a Variety interview. The right page shows Billie Eilish in a vibrant red outfit, striking a pose atop a red ladder. Surrounding her image are artistic text elements with words like ‘Songwriter,’ ‘Bad Guy,’ ‘Pop Superstar,’ and ‘Los Angeles,’ highlighting her identity and achievements. The layout employs a dark background with contrasting bright visuals and typography for a modern, edgy aesthetic.

Magazine spread featuring Billie Eilish performing on stage under dramatic lighting. The background showcases a blurred image of her face and bright beams of light, creating an ethereal atmosphere. Billie wears a vibrant yellow oversized shirt with graphic illustrations and holds a microphone while smiling. Bold typography overlays the image, with the words ‘Ocean Eyes’ in purple and ‘NO Fair’ in large white letters. The layout includes a detailed narrative about Billie Eilish’s breakout song ‘Ocean Eyes,’ its origins, and its journey to success, framed stylishly within the dynamic visuals.

Monochromatic magazine spread featuring Billie Eilish with a melancholic expression, her face partially obscured by wisps of hair. She wears a textured knit sweater and lace sleeves, adding depth to the composition. The headline reads ‘Don’t Smile at Me,’ referencing her 2017 EP. The accompanying text discusses her breakout success with singles like ‘Bellyache,’ ‘Copycat,’ and ‘My Boy,’ noting her dark yet danceable musical style. A tracklist from the EP is displayed in a minimalist overlay, adding to the modern and introspective tone of the design.

Magazine spread featuring Billie Eilish with a dramatic juxtaposition of two visuals. On the left, a haunting scene shows a woman with eerie white eyes crawling out from under a disheveled bed in a dimly lit room, evoking a chilling atmosphere. On the right, Billie Eilish is captured mid-performance, kneeling on stage while wearing a vibrant green and black outfit with matching headgear emblazoned with her name. The spread includes the headline ‘When We All Fall Asleep, Where Do We Go?’ alongside a subtitle ‘Bad Guy,’ describing her 2019 album’s unique style and theatrical sensibilities. A tracklist in various fonts cascades across the bottom, featuring songs like ‘Bury a Friend,’ ‘You Should See Me in a Crown,’ and ‘Bad Guy.’

My Expertise

Delivering purpose-driven brand experiences, accessible digital products, and AI-powered creative solutions that connect people, business, and technology.

Creative Technology & AI Integration

Custom GPT Design & Training
Automated Workflow Development (Make, Zapier, Slack)
AI-Enhanced Branding & Asset Delivery Systems
API Integration for Creative Operations

Sustainability & Design Ethics

Accessible, Inclusive, and User-Centered Design
Environmentally Responsible Packaging & Production
Gender-Equitable and Culturally Aware Campaigns
Ethical Use of AI & Automation in Design

Brand & Communication Design

Brand Strategy & Positioning
Packaging & Sustainable Product Design
Visual Identity Systems & Style Guides
Typography & Layout Design
Print & Digital Campaigns
Social Media Kits & Content Systems

UX/UI DESIGN

User-Centered Research & Persona Building
Wireframing & Interactive Prototyping (Figma)
Accessibility & Inclusive Design
Mobile App & Web Design
Usability Testing & User Flows
Design System Management

CREATIVE DIRECTION

Campaign & Concept Development
Cross-Functional Team Leadership
Art Direction & Storytelling
Problem-Solving & Strategic Thinking
Design Mentorship & Collaboration
AI-Driven Creative Automation

DEVELOPMENT & TOOLS

Figma & Prototyping Platforms
Adobe Creative Cloud & 3D substance Family
HTML, CSS & Web Technologies
No-Code Platforms (Webflow, Wix, Wordpress)
AI Tools & Automation (ChatGPT, Zapier, Make)
Google Workspace & Project Management Tools

Photoshop Illustrator Figma InDesign Substance 3D family Corel Draw After Effects Premiere Pro wordpress MAYA SLACK visual Studio code

ABOUT MOSTAFA

Multidisciplinary designer with 15+ years translating business goals into brand-led, user-centric products. Proven record of lifting engagement to 70%, cutting design cycles 80%, and shepherding 100+ digital & print launches for businesses of all sizes and natures from agencies to start-ups, and municipalities.

Combines art-direction roots with data-driven design thinking, WCAG-compliant UX, and AI-powered workflows (custom ChatGPT, automation) to scale impact. Expert in Figma, Adobe CC, HTML/CSS, and cross-functional leadership; ready to drive end-to-end product vision where brand, accessibility, and growth converge.

Melody Picture LLC
Intersect LA
Legacy Licensing Partners
Freelance
Capital Municipality
Tandis Designers Ltd.

10/2024 - Present
01/2025 - 05/2025
01/2025 - 03/2025
02/2020 - 10/2024
04/2012 - 03/2019
10/2007 - 12/2018

Packaging design

Stealth

Concept Devolopment

Drake

Presentation slide showcasing the packaging design process for the HyperGear Stealth ANC earbuds. The layout includes a detailed flat design of the product’s packaging with labeled sections for branding, product specifications, and visuals of the earbuds. The bottom right corner displays a photo of assembled packaging boxes on a wooden surface. Text overlay reads ‘PACKAGING DESIGNING PRESENTATION’ in bold white font, emphasizing the focus of the presentation.

Creating a Master Carton for the HyperGear Brand

Introduction

As a graphic design student at California State University, Northridge (CSUN), with a background in visual design and various Adobe certifications, I am constantly seeking opportunities to apply my skills in practical, real-world projects. My recent endeavor involved designing a master carton for HyperGear's Stealth Pods ANC, a product known for its cutting-edge technology and sleek design. This project allowed me to blend my technical proficiency with creative insights to produce a packaging solution that is both functional and visually appealing. This design was specifically requested by a company as an assignment to demonstrate my skills during the job application process.

Minimalist flat die-line template for packaging design. The outline showcases the structural layout of a box with foldable flaps and panels, designed to form a 3D package. The red line defines the cutting edges, and the blank interior allows for customizable design elements.

Design Concept and Objectives

The primary objective of the master carton design was to create a packaging solution that effectively protects the product while enhancing its shelf appeal. Given the competitive nature of the consumer electronics market, the design needed to reflect the high quality and advanced features of the Stealth Pods ANC. The design also had to adhere to specific dimensions and structural requirements to meet practical shipping and display needs.

Flat die-line template of a master carton with detailed dimensions labeled in millimeters. The layout includes panels for the rear, left side, front, and right side, along with foldable flaps. Orange outlines indicate the cut lines, while dotted lines signify fold lines, providing a clear guide for constructing the 3D packaging

Technical Specifications

The master carton was designed with precise dimensions: a length of 587 mm, a height of 327 mm, and a width of 400 mm. These dimensions were crucial in ensuring that the carton could securely accommodate multiple units of the Stealth Pods ANC. The design process involved creating a detailed die-cut layout that specified the positions of various panels and flaps, ensuring ease of assembly and structural integrity.

Visual Design Elements

The brand identity of HyperGear drove the visual design of the master carton. Key elements included: Brand Colors and Logo: HyperGear's signature orange and white colors, along with the prominently displayed logo, ensure brand consistency and recognition. Product Imagery: High-quality images of the Stealth Pods ANC were included on the front and side panels, showcasing the product's sleek design and key features. Informational Graphics: Icons and text were strategically placed to highlight important product features, such as active noise canceling, Bluetooth compatibility, and up to 28 hours of playtime. Clean and Modern Layout: The overall layout was clean and modern, with ample white space to avoid clutter and enhance readability.

Software and Tools

The design was created using Adobe Illustrator, leveraging my expertise in this software to produce a professional and precise layout. The die-cut design involved careful planning and attention to detail to ensure that all elements aligned correctly and the final product was both functional and aesthetically pleasing.

Adobe software interface displaying a 3D mockup of HyperGear Stealth Pods ANC packaging design. The workspace showcases three product boxes arranged on a wooden table, with realistic lighting and shadows in front of a blurred window background. The left panel features design elements and tools, while the right panel shows properties and object layers. The central canvas provides a detailed preview of the packaging design in a photorealistic setting.

Challenges and Solutions

One of the key challenges was ensuring that the design was not only visually appealing but also practical from a manufacturing standpoint. This required close collaboration with the production team to understand the limitations and capabilities of the printing and cutting processes. Adjustments were made to the design to optimize it for efficient production while maintaining the intended aesthetic.

Conclusion

The master carton design for HyperGear's Stealth Pods ANC represents a successful integration of technical skills and creative design. By focusing on both the practical and visual aspects of the packaging, I was able to create a solution that enhances the product's marketability and ensures its protection during shipping and handling. This project not only showcases my capabilities as a graphic designer but also highlights the importance of thoughtful and strategic design in creating effective packaging solutions. This assignment, requested by a company, was a valuable opportunity to demonstrate my skills and creativity in a professional context.

All credit and rights to the 3D picture of the product, logo, brand name, and color swatch used in this design are the property of the HyperGear brand. The inclusion of these elements in this project is intended solely for the purpose of showcasing my design skills and is used with respect for HyperGear's intellectual property rights.