Spark Space | Frontend & Take-Home Challenge
Leon Li
Verified
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
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
2
Views
15
Timeline
Sep 24, 2024 - Oct 1, 2024
Clients
Spark Space
Advice | Mobile & Full Stack
Monarch Money | Frontend & CMS
Telnyx | Frontend
Connecteam | Mobile & Backend
