Frontend Web Designer

📍 Job Overview

Job Title: Frontend Web Designer

Company: Associated Students, Inc.

Location: San Francisco, CA, US

Job Type: Student, Part-Time, Intern

Category: Marketing & Communications

Date Posted: 2026-05-26T18:59:00

Experience Level: Entry Level (0-2 years)

Remote Status: On-site

🚀 Role Summary

• This student role focuses on enhancing the visual aesthetics and user interface of the Associated Students (AS) website, ensuring a cohesive and engaging user experience.

• Responsibilities include implementing user research to develop intuitive user interfaces, creating engaging visuals, and maintaining brand consistency across the website.

• The Frontend Web Designer will collaborate closely with the Backend Web Developer to ensure seamless implementation of visual designs and functionality.

• This position also involves working with the Marketing & Communications team, specifically Graphic Designers and the Design Coordinator, to align design initiatives with broader organizational goals and strategies.

📝 Enhancement Note: While the original job title is "Frontend Web Designer," the responsibilities clearly indicate a strong emphasis on UI/UX design, visual content creation, and collaboration with development and marketing teams. This role is best categorized under Marketing & Communications with a strong digital design component, rather than a pure Revenue or Sales Operations function. The "Student" employment type suggests this is an entry-level, potentially internship-style position aimed at developing practical skills.

📈 Primary Responsibilities

• Collaborate with the Backend Web Developer to implement user-centric design changes and enhancements to the AS website, ensuring a seamless integration of front-end elements.

• Conduct user research and testing to gather insights that inform and guide web development decisions, focusing on improving user flows and overall satisfaction.

• Design intuitive user interfaces, create detailed wireframes, mockups, and interactive prototypes for website updates and new features, ensuring a clear visual roadmap.

• Develop visually appealing graphics, images, and multimedia elements to enhance website content and engage the target audience, aligning with brand guidelines.

• Ensure consistent application and adherence to brand standards across all website design projects, maintaining a unified brand identity.

• Regularly communicate with the Backend Web Developer to discuss design considerations, assess technical feasibility, and strategize effective implementation plans.

• Work closely with the Design Coordinator to align web design initiatives with organizational goals, strategic objectives, and ongoing marketing campaigns.

• Conduct research on emerging design trends, tools, and technologies to propose innovative solutions and maintain a modern web presence.

• Collaborate with team members to gather feedback, iterate on web designs, and refine solutions for AS Programs, Board of Directors, and Internal department pages.

• Design and brand dedicated pages for specific AS initiatives (Programs, Board of Directors resources, services, departments) in a functional, user-friendly manner to keep the AS website updated and informative.

• Collaborate with the Backend Web Developer to process Web Requests accurately and in a timely manner, ensuring efficient workflow management.

• Partner with the Backend Web Developer to meet with, coordinate, strategize, and present larger-scale website updates to AS staff and administration, in collaboration with the team and supervisor.

📝 Enhancement Note: The responsibilities emphasize a hands-on approach to design implementation, user research, and cross-functional collaboration. The focus on specific AS departments and initiatives highlights the need for clear communication and understanding of organizational structure.

🎓 Skills & Qualifications

Education:

• Must be a currently enrolled SFSU student, maintaining a minimum of 6 units for undergraduates or 4 units for graduates during Fall 2024.

Experience:

• Demonstrated experience in creating custom pages and posts within WordPress or another comparable web-building platform.

• Familiarity with user research and testing methodologies to gather insights for design improvements.

Required Skills:

• Proficiency in WordPress or similar web content management systems.

• Knowledge of prototyping tools such as Adobe XD and Figma for creating interactive designs.

• Strong experience with Adobe Illustrator and Adobe Photoshop for graphic creation and image manipulation.

• Understanding of web design principles, usability best practices, and user-centered design methodologies.

• Basic knowledge of HTML and CSS for understanding web structure and styling.

• Familiarity with Google Analytics and Search Engine Optimization (SEO) principles.

• Excellent communication and interpersonal skills for effective collaboration with developers, designers, and staff.

• Strong organizational skills and attention to detail for managing multiple design tasks.

Preferred Skills:

• Specific experience with Elementor for WordPress is a significant plus.

• Experience with A/B testing or other methods for validating design choices.

• Understanding of responsive design principles for various devices.

• An existing portfolio showcasing web design projects, UI/UX work, and graphic design capabilities.

📝 Enhancement Note: The qualifications emphasize practical, hands-on skills with common web design tools and platforms. The requirement for current SFSU student status is a critical eligibility criterion.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• A curated portfolio is essential, showcasing practical experience in web design, UI/UX, and graphic creation.

• Include examples of custom WordPress pages/posts, demonstrating proficiency with the platform.

• Showcase projects that highlight user-centered design principles, wireframes, mockups, and prototypes created using tools like Figma or Adobe XD.

• Demonstrate your ability to create visually appealing graphics and multimedia elements using Adobe Illustrator and Photoshop.

Process Documentation:

• Be prepared to discuss your design process, from initial concept and user research to final implementation and iteration.

• Highlight your collaboration process with developers and other stakeholders, detailing how you communicate design requirements and resolve technical challenges.

• Showcase your approach to maintaining brand consistency and applying design standards across different web projects.

📝 Enhancement Note: For a design-focused role, a portfolio is paramount. The emphasis should be on demonstrating practical application of design tools and methodologies, as well as the ability to articulate the design process and its outcomes.

💵 Compensation & Benefits

Salary Range:

Benefits:

• This is a student position, and typical benefits associated with full-time employment may not apply. However, potential benefits could include:
  • Valuable hands-on experience in web design, UI/UX, and digital marketing within a university organization.
  • Opportunity to build a professional portfolio with real-world projects.
  • Skill development in industry-standard design software and web platforms.
  • Networking opportunities within SFSU's Marketing & Communications department and with AS staff.
  • Flexible scheduling to accommodate academic commitments.

Working Hours:

• Up to 20 hours per week.

• Specific days and hours to be determined, with flexibility to accommodate academic schedules.

📝 Enhancement Note: The salary is clearly defined as an hourly rate for a student position. Benefits are inferred based on the nature of student employment, emphasizing experience and skill development over traditional compensation packages.

🎯 Team & Company Context

🏢 Company Culture

Industry: Non-profit organization, Student Services, Higher Education Administration. Associated Students (AS) of San Francisco State University (SFSU) operates as a non-profit organization dedicated to serving the SFSU student body.

Company Size: The AS at SFSU is a substantial organization, employing numerous student staff and professional personnel to manage a wide range of services, programs, and advocacy efforts for thousands of students. This size implies a structured environment with defined departments and roles.

Founded: Associated Students, Inc. at SFSU has a long history, established to provide essential services and representation for students. This longevity suggests a stable operational framework and established traditions.

Team Structure:

• Marketing and Communications Department: This role sits within the Marketing and Communications department, which is responsible for all external and internal communications, branding, and digital presence.

• Reporting Structure: The Frontend Web Designer reports directly to the Assistant Executive Director of Marketing & Communications.

• Collaboration: Close collaboration is expected with the Backend Web Developer, Design Coordinator, Graphic Designers, and other members of the Marketing & Communications team, as well as AS staff and administrators for specific page design requests.

Methodology:

• User-Centric Design: The role emphasizes understanding and implementing user needs through research and testing.

• Data-Informed Decisions: Utilizing tools like Google Analytics and SEO principles to guide design choices and website performance.

• Brand Consistency: Maintaining a unified visual identity across all digital platforms.

• Agile Collaboration: Working closely with developers and designers in iterative cycles to refine designs and implement changes effectively.

Company Website: https://asi.sfsu.edu/ (Inferred from domain_derived)

📝 Enhancement Note: The context of a student-run organization within a university setting is crucial. It implies a dynamic environment with a focus on student development, service, and advocacy, supported by professional staff and structured departments.

📈 Career & Growth Analysis

Operations Career Level: Entry-Level Student Position. This role is designed for current SFSU students seeking practical experience. It's an excellent starting point for individuals looking to build a foundational skill set in web design, UI/UX, and digital marketing.

Reporting Structure: Reports to the Assistant Executive Director of Marketing & Communications, providing direct exposure to leadership within the department. Collaboration extends to the Backend Web Developer, Design Coordinator, and Graphic Designers.

Operations Impact: The Frontend Web Designer's work directly impacts the user experience of the AS website, influencing how students, faculty, and the public interact with AS services, programs, and information. Effective design contributes to clear communication, engagement, and the overall perception of the Associated Students organization.

Growth Opportunities:

• Skill Specialization: Deepen expertise in UI/UX design, specific design software (Figma, Adobe XD), WordPress development, or front-end technologies (HTML/CSS).

• Portfolio Development: Build a robust portfolio of professional design work that can be leveraged for future internships or career opportunities.

• Cross-Functional Exposure: Gain experience working with various departments within AS and understanding their communication needs.

• Mentorship: Learn from experienced designers, developers, and marketing professionals within the AS organization.

• Potential for Advancement: While this is a student role, exceptional performance and demonstrated skills could lead to increased responsibilities or recommendations for future roles within AS or SFSU.

📝 Enhancement Note: This section focuses on the developmental aspect of the role, acknowledging its student nature while highlighting the transferable skills and experience gained that are valuable for future career paths in design and digital media.

🌐 Work Environment

Office Type: This is an on-site position, implying work will be conducted within the Associated Students facilities at San Francisco State University. The environment is likely a mix of office spaces and potentially collaborative work areas.

Office Location(s): San Francisco, CA, US. Specific campus location details would be provided upon hiring.

Workspace Context:

• Collaborative Environment: Expected to work closely with the Backend Web Developer, Design Coordinator, and other marketing team members, fostering a team-oriented atmosphere.

• Tools & Technology: Access to necessary design software (Adobe Creative Suite, Figma, Adobe XD) and web development tools will be provided or expected. This includes access to the AS website's content management system (WordPress).

• Team Interaction: Regular meetings and check-ins with supervisors and team members to discuss projects, provide updates, and receive feedback. The role involves direct interaction with AS staff for design requests for their respective pages/departments.

Work Schedule:

• Flexible schedule up to 20 hours per week, designed to accommodate academic commitments.

• The exact schedule will be determined based on departmental needs and the student's availability, requiring coordination with supervisors.

📝 Enhancement Note: The on-site nature and university campus environment are key characteristics. The flexibility in hours is a significant benefit for student employees.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: Review of submitted applications, focusing on student status, relevant skills, and portfolio.

• Portfolio Presentation/Review: Candidates will likely be asked to present their portfolio, discussing their design process, project choices, and specific contributions. This is a critical step to assess practical skills and understanding.

• Skills Assessment: Potentially a practical exercise or discussion related to design challenges, problem-solving, or tool proficiency.

• Behavioral/Situational Questions: Questions will assess teamwork, problem-solving abilities, time management, and how candidates handle feedback and collaboration.

• Meet the Team: May involve meeting with the Assistant Executive Director of Marketing & Communications and potentially the Backend Web Developer or Design Coordinator to assess cultural fit and working style.

Portfolio Review Tips:

• Curate Selectively: Showcase your strongest and most relevant work. For this role, prioritize web design, UI/UX, and graphic design examples.

• Tell a Story: For each project, describe the challenge, your role, the process you followed (research, ideation, design, testing), the tools used, and the outcome or impact.

• Highlight Key Skills: Ensure your portfolio clearly demonstrates proficiency in WordPress, Adobe Creative Suite, Figma/Adobe XD, and understanding of HTML/CSS.

• Showcase Brand Consistency: Include examples where you've maintained or developed brand guidelines.

• Be Prepared to Discuss: Anticipate questions about your design choices, how you handle feedback, and your experience collaborating with developers.

Challenge Preparation:

• Familiarize yourself with common web design principles and user-centered design methodologies.

• Review best practices for creating wireframes, mockups, and prototypes.

• Be ready to discuss how you would approach designing a specific type of web page (e.g., for an event, a service, an informational resource) for the AS.

• Understand how to articulate the importance of SEO and Google Analytics in web design.

📝 Enhancement Note: The interview process will heavily rely on portfolio assessment and practical demonstrations of design skills. Candidates should be prepared to articulate their design thinking and collaboration processes.

🛠 Tools & Technology Stack

Primary Tools:

• Web Content Management System (CMS): WordPress (Experience with Elementor is a plus). This is the core platform for managing the AS website.

• Prototyping & Design Tools: Adobe XD, Figma. Essential for creating wireframes, mockups, and interactive prototypes.

• Graphic Design Software: Adobe Illustrator, Adobe Photoshop. For creating graphics, editing images, and developing visual assets.

Analytics & Reporting:

• Web Analytics: Google Analytics. Understanding how to interpret data to inform design decisions and measure website performance.

• SEO Tools: Familiarity with SEO principles and basic tools for optimizing web content for search engines.

CRM & Automation:

• While not a direct CRM role, an understanding of how web forms and user interactions contribute to potential lead generation or information gathering for AS departments might be beneficial.

• No specific automation tools are mentioned, but understanding how front-end design impacts user flow and potential automation triggers is relevant.

📝 Enhancement Note: The technology stack is heavily focused on design and front-end development tools commonly used in digital marketing and web design roles.

👥 Team Culture & Values

Operations Values:

• Student-Centricity: A core value of the Associated Students is to serve and advocate for the student body, ensuring all initiatives and designs prioritize student needs and benefits.

• Collaboration: The team environment fosters close working relationships, encouraging open communication and mutual support between designers, developers, and marketing professionals.

• Innovation & Adaptability: Embracing new design trends and technologies to keep the AS website modern and effective, while being adaptable to evolving organizational needs.

• Efficiency & Effectiveness: Striving to create functional, user-friendly designs that clearly communicate information and achieve organizational goals efficiently.

• Brand Integrity: Upholding the Associated Students' brand identity and ensuring consistent representation across all platforms.

Collaboration Style:

• Cross-Functional Integration: Close partnership with the Backend Web Developer is crucial for successful design implementation. Collaboration with the Design Coordinator and Graphic Designers ensures alignment with broader visual strategies.

• Feedback-Driven: An open culture for providing and receiving constructive feedback to refine designs and improve project outcomes.

• Goal-Oriented: Projects are driven by specific organizational objectives, requiring clear communication and a shared understanding of desired results.

📝 Enhancement Note: The culture is deeply rooted in serving students, which translates into a collaborative and mission-driven work environment. Emphasis on practical application and teamwork is expected.

⚡ Challenges & Growth Opportunities

Challenges:

• Balancing Design Aesthetics with Technical Constraints: Ensuring visually appealing designs are technically feasible and can be implemented efficiently by the Backend Web Developer.

• Managing Diverse Stakeholder Needs: Designing for various AS departments and initiatives, each with potentially different requirements and priorities.

• Staying Current with Trends: Keeping up-to-date with rapidly evolving web design trends, tools, and best practices while managing academic responsibilities.

• Gathering and Implementing User Feedback: Effectively translating user research and feedback into actionable design improvements.

Learning & Development Opportunities:

• Hands-on Skill Development: Gaining practical experience with industry-standard design software and web platforms.

• Mentorship: Learning from experienced professionals within the Marketing & Communications department.

• Portfolio Enhancement: Building a strong portfolio that can be a significant asset for future career prospects.

• Understanding Non-Profit Operations: Gaining insight into how marketing and design functions support the mission of a student organization.

• Potential for Specialization: Opportunity to focus on specific areas like UI/UX, graphic design, or front-end web development.

📝 Enhancement Note: The challenges are typical for design roles, particularly in a collaborative and potentially resource-constrained environment. The growth opportunities are strongly tied to skill acquisition and portfolio building.

💡 Interview Preparation

Strategy Questions:

• "Describe your process for designing a new webpage or feature, from concept to final design. How do you incorporate user feedback?" - Preparation: Outline your design thinking process, highlighting research, wireframing, prototyping, and iteration. Use examples from your portfolio.

• "How would you ensure brand consistency across different sections of the AS website?" - Preparation: Discuss your understanding of brand guidelines and how you apply them. Mention tools and methods for maintaining consistency.

Company & Culture Questions:

• "What interests you about working for Associated Students, Inc. at SFSU?" - Preparation: Research AS's mission, programs, and values. Connect your interests to serving students and the university community.

• "How do you approach working collaboratively with team members, especially developers and other designers?" - Preparation: Emphasize your communication style, willingness to share ideas, and ability to work constructively towards common goals.

Portfolio Presentation Strategy:

• Structure Your Presentation: Begin with an introduction to yourself and your design philosophy. Then, walk through 2-3 key projects, detailing the problem, your solution, your process, and the outcome.

• Focus on Impact: For each project, explain why you made certain design choices and what the intended or actual impact was.

• Demonstrate Tool Proficiency: Be ready to discuss the specific tools you used (Figma, Adobe XD, Photoshop, WordPress) and why you chose them.

• Articulate Collaboration: If applicable, describe how you collaborated with others on projects.

• Keep it Concise: Respect the time allocated for the presentation. Focus on quality over quantity.

📝 Enhancement Note: Interview preparation should heavily emphasize the portfolio, practical design skills, and the ability to articulate one's thought process and collaborative approach in the context of a student organization.

📌 Application Steps

To apply for this student Frontend Web Designer position:

• Submit your application through the provided ADP link.

• Portfolio Customization: Ensure your resume and any accompanying materials highlight your current student status at SFSU and your relevant design skills. Tailor your portfolio to showcase projects that align with the requirements (WordPress, UI/UX, graphic design, prototyping tools).

• Resume Optimization: Clearly list your proficiency with required software (Adobe Creative Suite, Figma/Adobe XD, WordPress) and any experience with HTML, CSS, SEO, or Google Analytics. Quantify achievements where possible.

• Interview Preparation: Practice presenting your portfolio, focusing on explaining your design process and decision-making. Be ready to answer questions about your experience with the specified tools and your approach to collaboration.

• Company Research: Familiarize yourself with the Associated Students, Inc. mission, values, and current initiatives at SFSU to demonstrate genuine interest and understanding of the organization's purpose.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and operations industry-standard assumptions. All details should be verified directly with the hiring organization before making application decisions.