In-Person Internship and Advisors
2023
Web Design, UI, Low-Code Development
In-Person Internship and Advisors
2023
Web Design, UI, Low-Code Development
In-Person Internship and Advisors
2023
Web Design, UI, Low-Code Development
Objective
I was tasked with implementing a new web page to showcase Seaside Sustainability's in-person internship opportunities for Summer 2024. While I worked from a comprehensive content brief (provided as a Google Doc), I had full responsibility for executing the design faithfully while also optimizing for clarity, hierarchy, accessibility, and mobile responsiveness.
This page needed to clearly articulate the internship roles, key responsibilities, qualifications, and the unique value proposition of interning with Seaside Sustainability. It also aimed to educate potential applicants about the organization's mission and inspire them to apply.
Problem
-
Working within a predetermined content structure while still ensuring accessibility and best UX practices.
-
Making dense textual information (e.g., program summaries) digestible and engaging for a general student audience.
-
Balancing educational content with visual engagement.
-
Structuring calls to action that encourage applications without overwhelming the user.
-
Ensuring that real-world photos integrated smoothly with the page’s visual flow, adding value without distraction.
Goals
-
Communicate the internship program's mission and benefits effectively.
-
Clearly outline job descriptions, responsibilities, and qualifications in a user-friendly way.
-
Ensure smooth information hierarchy and visual flow from top to bottom.
-
Implement actionable CTAs for applying to the internships.
-
Optimize the page for desktop and mobile use.
Mockups
Solution
Optimized Information Hierarchy and Flow
-
Developed a clear and intuitive content hierarchy, organizing complex information into distinct, digestible sections (e.g., "Job Description," "Desired Skills," "Program Summaries").
-
Established a logical scroll sequence that guides users seamlessly through the program's overview, job description, program summaries, significantly improving user comprehension and reducing cognitive load.
Enhanced Visual Integration
-
Strategically integrated high-quality, authentic imagery throughout the page, including a prominent hero image and action-oriented photos of interns engaged in relevant activities.
-
These visuals were carefully selected and placed not just to break up text, but to visually reinforce the program's mission, provide a relatable context for prospective interns, and evoke a sense of the real-world experience, making the page far more engaging.
Content Scannability & Readability
-
Transformed dense, long paragraphs and unstructured lists from the source document into concise, easily scannable elements.
-
Utilized bullet points extensively for "Intern Job Description" and "Desired Skills," making complex details immediately clear.
-
Employed varied typography (font sizes, weights) and ample white space to create a strong visual hierarchy, ensuring efficient information absorption and improved overall readability.
Strategic Call-to-Action Placement
-
Integrated a clear, prominent "Apply Now" call to action at a logical point within the user journey.
-
Ensured CTAs were visually distinct, used active and concise language, and were positioned at optimal moments to guide interested users directly to the next step, effectively converting passive interest into active engagement.
Impact Summary
Category | Original Mockups | Final Designed Pages |
|---|---|---|
Brand Consistency | No visual tie to Seaside’s brand. | Branded colors, fonts, and layouts matching the main site. |
Content Accessibility | Long scroll of uninterrupted text. | Use of whitespace, color blocks, and consistent formatting. |
Call-to-Action (CTA) | Single, buried apply link. | Prominent application sign-up button for easy action. |
Program Highlighting | List format with no emphasis. | Card-style layouts with images and clear frequency tags. |
Information Flow | Dense paragraphs, hard to scan. | Modular sections with headings and concise descriptions. |
Visual Engagement | Text-heavy, no imagery. | High-quality photos for each program to boost appeal. |
Category | Original Mockups | Final Designed Pages |
|---|---|---|
Brand Consistency | No visual tie to Seaside’s brand. | Branded colors, fonts, and layouts matching the main site. |
Outcome
-
Delivered clean, scroll-friendly landing pages that effectively educates and activates prospective interns.
-
Designed a layout that can be easily updated with new internship roles, program details, or photos.
-
The page now serves as both an informational resource and a compelling recruitment tool for Seaside Sustainability.
Redesigned Pages
