Thank you for the opportunity to work on this assignment. I had a lot of fun building it and thinking through how I would implement this type of comparison component in a real WordPress environment. My goal was to stay faithful to the provided wireframe while also focusing on clean structure, maintainable code, and a user experience that makes comparing companies quick and intuitive. Please view my writeup below.
Jeff Chambers
Top 5 Real Estate Companies of 2026
Company
Customer rating
Price
Next steps
$5,000
3%
Assignment Write-Up
Overall Approach
- I started by reviewing the wireframe and the provided data sample to understand how the comparison cards were expected to display and which fields mapped to each UI element.
- My first step was translating the spreadsheet data into a structure that could be easily rendered inside WordPress. I wrote a small CSV parsing utility that converts the data into a PHP array and normalizes the keys.
- From there, I built the component as a custom ACF block inside a plugin, which keeps the functionality modular and allows editors to place the block anywhere within the content.
- I separated the project into a few small pieces: data parsing, block registration, and the rendering template that outputs the comparison cards.
- My focus during implementation was keeping the code easy to read and maintain while matching the layout from the wireframe as closely as possible.
Design and UX Decisions
- Comparison tables like this need to be highly scannable, so I tried to follow patterns used on sites like Nerdwallet or Bankrate.
- The company name, rating, and CTA are visually emphasized so users can quickly identify the most important information.
- I used consistent spacing, alignment, and card structure so it’s easy to compare multiple companies side-by-side.
- I also tried to maintain a clear visual rhythm across the cards so the layout feels balanced and professional rather than crowded.
- On mobile, the layout switches to stacked cards instead of forcing horizontal scrolling. This keeps the experience readable on smaller screens.
Technical Implementation
- The feature is implemented as a custom WordPress plugin that registers an ACF block.
- ACF Fields are registered and included in the plugin
- Data is read from the CSV file, parsed into structured data, and passed to the block template for rendering.
- I kept parsing logic separate from presentation so the rendering layer stays simple.
- The block template loops through the company data and generates a consistent card structure for each row.
- Styling was written to support both the editor preview and the frontend layout.
Edge Cases and Data Handling
- CSV data can be inconsistent, so I added checks to ensure the UI doesn’t break if values are missing.
- Empty or undefined fields are skipped so the interface doesn’t show placeholders or broken formatting.
- I also considered cases like long company names, missing ratings, or incomplete feature fields so the layout still renders cleanly.
AI Usage and Future Improvements
- I used AI tools mainly as a development assistant, especially for scaffolding repetitive code and brainstorming implementation options.
- It was helpful for exploring ideas like pulling the data from a Google Sheet instead of uploading a CSV.
- With more time, I would likely add support for:
- pulling data from a remote spreadsheet or API
- sorting or filtering companies
- stronger validation of the CSV format
- accessibility improvements and keyboard navigation.