Spark Space | Frontend & Take-Home Challenge
What is the Project?
Project?The project was a take-home coding challenge from Sparkspace.ai, aimed at evaluating my ability to enhance a two-page web funnel (Home and Grade Essay) to increase conversions from visitors to email sign-ups. The original flow—Visitors → Grade Sample Essay → Signup with Email—required a mobile web rebuild with at least two strategic changes to improve user engagement and conversion rates. The client provided flexibility in choosing a tech stack, with instructions to exclude authentication (Clerk), backend APIs, and Mixpanel integration. The expected effort was 10-20 hours, culminating in a Loom video explaining the changes and their rationale, along with a report of hours spent.
What I Did on This Project?
As the sole developer, I reimagined and rebuilt the Sparkspace.ai funnel, delivering both desktop and mobile versions with a focus on user experience and conversion optimization. Here’s a systematic breakdown of my contributions:
Landing Page Overhaul:
- Objective: Addressed the original bare-bones design lacking context for new visitors.
- Additions:
Hero Section: Introduced the service’s purpose and benefits.
Stats Section: Highlighted key metrics (AI-generated placeholders) to build credibility.
Testimonial Section: Showcased user success stories for trust.
FAQ Section: Answered common queries to reduce friction.
How It Works Section: Added an interactive step-by-step guide with a submission form on-page, featuring visual cues (e.g., flickering outlines) and a one-click sample paste option.
Grade Essay Page Enhancements:
- Objective: Improved usability and visual engagement post-submission.
- Changes:
Relocated AI Detection Possibilities to the top for immediate teacher visibility.
Replaced the linear progress bar with a circular one for space efficiency, intuitive readability, and better small-change visibility.
Retained the markdown preview for feedback consistency.
Added a scroll navigator on mobile to jump between results and the top effortlessly.
Tech Stack & Development:
Built with React, TypeScript, and Vite for rapid development and performance (Vite outperforming Webpack).
Styled with Tailwind CSS and leveraged Shadcn/ui for polished, reusable components.
Hosted the live site on Vercel with the GitHub repo shared for review.
Timeline & Deliverables:
Completed the project in 16 hours, within the 10-20 hour estimate.
Recorded and submitted a Loom video showcasing the site, changes, and conversion rationale to david@sparkspace.ai, per instructions.
Results & Impact
My enhancements to the Sparkspace.ai funnel delivered a more engaging and conversion-focused experience, with potential to significantly boost email sign-ups. Here’s a structured overview of the outcomes:
Improved User Clarity:
The revamped landing page, with its Hero, Stats, Testimonials, and FAQ sections, provides a compelling first impression, addressing the original lack of context and aligning with competitor standards (e.g., EssayGrader.com).
The interactive “How It Works” section with an on-page form reduces navigation barriers, encouraging immediate interaction.
Enhanced Engagement:
Visual upgrades (e.g., circular progress bar, flickering input outlines) and usability features (e.g., one-click sample paste, mobile scroll navigator) create an intuitive, enjoyable experience, likely increasing time-on-site and form submissions.
Prioritizing AI Detection on the Grade Essay page caters to teachers’ needs, streamlining their workflow.
Conversion Potential:
By embedding the submission form on the landing page and guiding users with clear, interactive steps, the design minimizes drop-off points, driving more visitors toward sign-up.
Placeholder content sets a scalable foundation for real data, ensuring long-term relevance.
Technical Success:
Delivered a polished, mobile-friendly site in 16 hours using a modern stack, demonstrating efficiency and skill under time constraints.
The Vercel-hosted site and GitHub repo provide a professional, accessible submission, exceeding client expectations.
Like this project
1
Posted Mar 4, 2025
Differentiate and engage all writers with AI tutoring. Let's do this! AI Tutor. For teachers grades 5‑12. Select your grade and subject. Select your assignment.
Likes
1
Views
13
Timeline
Sep 24, 2024 - Oct 1, 2024
Clients
Spark Space
Advice | Mobile & Full Stack
Monarch Money | Frontend & CMS
Telnyx | Frontend
Connecteam | Mobile & Backend