This challenge is for the Junior Web Developer role at CFA (Community Financial Access), an entry-level position in the Front-End / Web Development pathway.
Scenario — "Make the Sign-Up Page Work for Everyone"
A small business's website has a simple email sign-up page. Users have reported that it's hard to read on mobile devices and doesn't clearly communicate why they should sign up.
Your task is to design improvements to make the page accessible to all users, including those using screen readers or keyboard navigation. The page should be readable and user-friendly on mobile devices, and more engaging with clear messaging about why users should sign up. Your improvements should be built using semantic HTML, CSS, and basic JavaScript. You don't need to write complete code—just explain the structure, improvements, and reasoning behind your decisions.
Record a video walking us through your approach and submit your layout plan and enhancement notes as supporting documents.
Apply semantic HTML for accessibility and structure
Implement responsive design principles for mobile-first development
Apply WCAG accessibility guidelines
Create engaging user interfaces with clear messaging
Test and validate usability improvements.
Required Submissions:
1. Layout & Structure Plan (Required)
Submit a PDF or document with a maximum length of 1 page. This should include a rough outline of your HTML structure (header, form, footer), key accessibility improvements such as ARIA labels, semantic elements, and keyboard navigation support, and responsiveness strategies including media queries, flexible layouts, and mobile-first approach considerations.
2. Enhancement Notes (Required)
Submit a PDF or document with a maximum length of 1 page. Provide a short explanation of your design choices including fonts, colors, spacing, and interactions. Explain how you'd test it for usability through manual testing, browser tools, and user feedback. Include one engagement idea such as a success message, tooltip, progress indicator, or compelling headline. Focus on clarity and user confidence, showing that you understand what makes a landing page effective.
3. Video Recording (Required)
Submit an MP4 file that is 7-10 minutes long (continuous recording, one take). Your video must include all three components detailed below.
Submission Guidelines
Video Requirements:
Your 7-10 minute video must include all three components:
1. Introduction (1-2 minutes)
Tell us about one web project you've built or improved — this can be a class project or personal site. What challenges did you face and what did you learn?
2. Traits Assessment (2-3 minutes)
Which situation sounds more enjoyable to you, and why?
In Scenario A — "The Quick Polish" (Execution), you're asked to fix layout spacing and color contrast issues before a campaign launch. The design is approved, and you just need to implement the fixes quickly and accurately. Would this focused, deadline-driven work energize you?
In Scenario B — "The Redesign Idea" (Discovery), you notice users are confused by a sign-up form and propose a clearer layout and messaging flow. You'll research best practices, create mockups, and present your recommendations. Would you enjoy this exploratory, user-focused work?
There's no right or wrong answer — just share which environment helps you do your best work.
3. Challenge Response (3-5 minutes)
Walk us through how you'd approach improving the simple webpage scenario. What HTML structure would you use? What CSS improvements would make it mobile-friendly and accessible? What one engagement idea would you add and why?
AI Usage Declaration:
At the end of your video, please state whether you did not use any AI tools, or if you used AI tools, briefly describe how, including prompts and edits.
On this page
