CSI Blogs
Web Design
User Interface
Figma
Web Development
Team Collaboration
CHALLENGE
The marketing team wanted enhance credibility and trust of the blogs page, making blogs feel like they are coming from real people that are a reliable source.
The blogs page on the website needed to build trust with the readers, enhance engagement with users, and establish authority on how reliable the source is.
By designing a author section in the blog selected, readers can see the credibility of the author, personally see the author to put a face behind a name, and can look forward toward future blogs from the author.
PROTOTYPES
DESIGN CONCEPTS
While at CSI, I created design concepts for recommended blogs, blog comments, quotes, and a table of contents. Although these designs were not implemented during my time there, they may be used in the future to enhance the user experience.
Noticing empty space on the left side, I designed a section to recommend other blogs to the user. The open design concept aligns with the overall theme of the page and aims to spark user interest in additional blog content.
To help users quickly navigate through blogs, I designed a table of contents section on the left. Each item links to its corresponding section, and the title on the left turns bold when that section is being read.
The table of contents section on the left is designed to function as a progress bar, showing users which section they’re currently on and how close they are to finishing the reading. An orange bar advances as the user scrolls down the page.
On the right-hand side of the blog home screen, there is a trending section that shows users the most popular blogs people are reading.
I created quote headers to highlight important comments made by either customers or the author, leaving readers with memorable statements.
A second quote design incorporates more orange to align with CSI’s branding. It also includes the role of the person being quoted to add credibility and authority.
A comments section at the end of the blog encourages users to interact with each other, share their thoughts on the blog, and discuss related topics. The design is more contained, with each comment placed in a box that can expand to reveal replies.
An alternative, more open concept for the comments section features lines separating each comment, with replies styled like text message bubbles to clearly distinguish them from the original comments.
This design recommends a related blog to the user halfway through the article they’re currently reading. It’s especially helpful when a comment references a topic the current blog doesn’t explore in depth.