The specification for this project was to design and create a blog area on the IR35 Shield website. The main goals were to enhance user engagement and boost SEO. Regular, relevant content educates users, attracts organic traffic, and fosters a community, ultimately contributing to brand credibility and customer retention.
Design
In the design phase, I researched several popular blog websites across the web, seeking effective design techniques and popular features. I particularly liked the design of articles on Medium; the narrow maximum width of paragraphs and high line heights make the content easy to digest. Each article is presented with a focus on information structure. Details such as author name, publication date, and article image are displayed in a concise and user-friendly format. Social media sharing buttons were added to increase organic traffic.
Build
The build was split into two main areas: the customer-facing pages and an article editor for the admin dashboard. The IR35 Shield brochure website runs on .NET Core, CSHTML Razor, SCSS, and Vanilla JS. I started by building the frontend using static data, first creating the markup structure, then applying style in SCSS (including media breakpoints for mobile devices). The work was then handed over to a backend team member for connecting to the database.
I then moved on to the admin article editor build. The editor needed to be intuitive so that non-technical members of the team could easily add and edit their content. I added functionality so that our content creators could upload an article written in .doc format (using mammoth.js and tidy-html5). The document would then be converted and populate the article editor with a live preview of the article. From there, content could be fine-tuned using an on-page HTML editor (using CodeMirror).
Outcome
The IR35 Shield blog still receives regular updates, with new articles published regularly. The article editor has been well received by other members of the team, with plans for it to be used in other projects in the near future.
Check out the IR35 Shield website to view the blog.
Technologies Used:
- HTML
- SCSS
- JavaScript
- Bootstrap
- Adobe XD