Branding Web Design June 3, 2019

How to build a website like Brumpost


Design and Develop a media publishing platform from scratch to manage content of various kinds.

  • Strategy

    Product Design and Development

  • Client


  • Web Technology

    PhP, HTML5, CSS, JavaScript

  • CMS


  • Design Technology


  • Duration

    2 Months

Open Project

This is the first of the many series on the topic “How to build a website like…” which I’ll write on over time and today’s case study is about how I was able to build a website like Brumpost despite all the hurdles and complex structuring and challenges the website development had initially.

Brumpost is a media company that owns a network of websites that disseminates the latest tech stories and other tech services to a large audience around the globe.

The company started in 2018 initially but was rebranded to Brumpost in 2020.

Their content span from tech news to product reviews, how-to guides, and product deals.

They also publish media content such as videos, podcasts, and pictures.

Brumpost though new is a fast-rising tech news hub and sees a rise every day.

Because of the number of content being published on a daily basis and the daunting tasks of publishing research-based content, there was a need for a well versatile website that can function not just as a Content publishing hub but also as a home to Brumpost media LLC itself.

So it was expected that this project is a hybrid website to some great extent.

Screenshot 219

2nd Generation Brumpost in late 2020

The challenge

Brumpost wants a beautiful website that portrays its brand’s prowess and reaches a global audience. Also, content is published on a regular basis so there is a need for a very easy-to-manage system that can be administered by multiple authors or content creators.

Also, there is a need to publish content in different formats such as pictures and videos.

The BPTV is expected to auto-play video contents live streamed from the Internet server where those videos are being broadcasted.

Also, there is a need to collect email from users and since each post content type is treated with differences, there was supposed to be a need for different subscription forms for each post content format and post type.

For example, there is a need for a different subscription form for users who only wants to subscribe to Latest Deals but not Tech news.

While there was a need for auto-load contents right under each content.

How this is supposed to work is that when a user reads news content to the end of the page, another post content is auto-loaded right below that same post on and on till it gets to the last post from the database.

The reason for this is to enhance each viewership for the audience so they don’t have to go back to the post archive each time they want to read something else since everything is already loaded for them right below the single post they are currently reading.

The exception was post formats like Podcasts, Videos, and Images since they want this post contents to only have their related posts underneath instead of auto-loading the rest from the database.

Other challenges include the mobile design which is expected to be very adaptive rather than feeling like a responsive website, they wanted it to feel like a real mobile website.

This includes the post archive listing and the most important being the homepage which consists of all the posts from different categories.

Brumpost Sitemap

Brumpost first structured sitemap

Expected Features Includes

There was a big pile-up of features as the core functionality of the website.

While a comprehensive CMS is the ground foundation, the website will also be a tool for marketing and purchasing goods and services.

While the team at Brumpost wouldn’t get a complete overview of how they’d love their website to function fully, I was left to decide on some things based on research and findings.

And going through other media outlets and comparing such with Brumpost’s needs and wants, I came up with a longer list.

1. Email sign-up: This is needed as a Customer retention tool. The trick here is that Brumpost wanted to create 5 microsites that are intertwined and called Brumpost altogether.

Each of these will have a different user interface and therefore a different form is expected with each leading to a different email form list created with whatever email service provider being used.

2. Paid/Free Subscription: As part of the money-making avenues of the service, there was a need for subscription-based content.

Of course, most contents were available to users for free but then there was special content specially meant for paid subscribers.

The Brumpost “Special Reports” and the “Brumpost Magazine” are those.

Users are supposed to be able to view or download or get a paperback copy of these contents when they’ve subscribed for a certain period of time usually a month, 6 months, and 12 months.

3. Social Media Sharing: What sets Brumpost social media sharing apart is that content which is being shared would have a different title, and a different description that is targeted at different since each social network website has a different stereotype.

So contents were to be targeted at each differently. Another thing is “highlight and share” which works by highlighting a part of the Web content and then the user is able to share that portion alone without needing to use the share button which shares the whole page content as a URL.

4. Microsites: The URL was supposed to just be an umbrella domain that encompasses multiple websites within it. For example, there was supposed to be:

( i. ) TirePost: A car and automobile blog that publishes the latest car news, videos, and pictures on the regular.

( ii. ) Brumpost News: Focuses on the latest tech news and rumors in the industry alone.

( iii. ) Brumpost “How to” guide: Publishes quick guides and step-by-step hacks into tech things that matter to subscribers (free and paid and anonymous)

( iv. ) Brumpost Deals: Post products and affiliate-based products discounted by the company as an affiliate deal with OEM and retailers.

( v. ) Brumpost Reviews: Details every bit of tech products and gadgets. Requires a rating and review system and pricing system.

5. Continuous Content Reading: As a practice to keep users on, this was the conclusion for each content to keep loading after the end of each single post content.

6. A Dynamic Header/Footer: This was required to accommodate the Uber menu system to be employed.

While the footer can be pre-built to take on any dynamic design which can be changed or replaced anytime with convenience.

7. Mobile Support: Aside from being Google AMP compliant, it has to be extremely mobile compatible fitting well on all screens and all browsers.

8. Post design: The editors want to have different look and feel for each piece of content as they’d want. At least there should be availability for 4 different UI for each post type (i.e Text, Video, Pictures, and Podcasts)

9. Front-End Publishing: This is required for contributing authors to have the independence of publishing their own contents without needing the Admin approval to write but needs Admin approval to be published.

10. Advertisement System:
A very powerful ad system that can be used both on the Web version and mobile version of the platform so that the money-making Avenue won’t be put into jeopardy.

My Role

Being the lead product designer, I had to come up with various sketches and ideas based on the views of the company.

While that view is necessary for the project, the end users’ view is the most important since they’re the ones to be using the service.

I wanted to make sure that the website is the easiest to use by anyone while still retaining its beautiful look and feel.

I also want to make sure that the navigation system is well built so moving from page to page would be seamless as this is also necessary for good SEO results since search bots need links to move from one page to the other with ease.

After doing my research based on what users want and what Brumpost wants, I placed them both side by side so I came up with a Conclusion that would put both the company and its audience on the same track.

I COPIED the big guys!

Screenshot 218

CNET is my favorite in terms of interactive UI and UX as well as functionalities

Screenshot 216

01Net has a beautiful UI Design with better content rendering

Screenshot 221

The Verge Homepage Screenshot

Screenshot 220

The Next Web Landing Page

Screenshot 217

Mashable Homepage Screenshot

Screenshot 222

DigitalTrends Homepage screenshot

I Had thought about creating something from scratch entirely but then I realized that based on the few people I spoke with, none of them really wanted to go through the hurdle of learning to use a new website just to read some articles and do some stuff.

While the majority of technology-based websites look alike to some extent, some are more unique while still maintaining that brand look and feel.

For example, This French-based tech news uses a lot of grids to arrange its content. Combining the color red and the Montserrat font family made the website very appealing.

Its navigation system is very easy to go through as there were fewer nested links.

Because the website is very large and they have a huge pile of data and information, arranging them into microsites was a necessity.

I took the grid and the color away considering the fact that Brumpost uses red as its brand. For example, the old Netgills which were the earliest ancestor of Brumpost were built entirely in Maroon color (#aa0000) which was beautiful. The red showed at the navigation and links.

Then I went back to compare with CNET, The Verge, The NEXT Web, Digital Trends, Mashable, and Engadget… All these websites also use the grid to arrange their contents, especially CNET, which was more grid-centric just like

The beauty of CNET made me combine that with 01net and came up easily with the homepage design.

Checking on CNET and for example, these two websites pull on average of 10 Million daily visitors combined.

And considering that number, users who are visiting those websites are likely the same audiences Brumpost is targeting considering similarities in their niche…

“Consumers Electronics, Science and Electric vehicles”

While the rest are quite different and unique on their own, for example, The Verge is somewhat political and Scientific, Mashable tends to be more on tech culture and entertainment, and The Next Web is more on general tech but Engadget focuses on gadgets.

The similarity motivated the grid conclusion on the Brumpost homepage.

After that, I realized Brumpost doesn’t have enough data or content yet to compete with these two 20-something-year-old websites that have been known for decades, there was the need to make those existing content compatible with the design prospects.

Another big challenge was the mobile. Using a grid on mobile isn’t very user-friendly considering the sizes of different smartphones.

If I was to adopt the grid for mobile, what if the user isn’t visiting the website on a Huawei Mate 20X Pro with its oversized 7.2-inch screen?

What if they’re visiting on an iPhone 5 which has a tiny little screen?

Then I realized a list view would be a good option.

Hence the separation of mobile UI and Web UI.

The similarities between the two are that of Brumpost’s look and feel. But the separate template was created for both and a simple PHP redirect code was used to detect where the users are accessing the Web content from (mobile or desktop)

Eventually, I had to narrow down my “Model” websites to just and CNET eventually.

While Brumpost looked almost like both… For example, when scrolling from the top right after the three featured contents at the top, you notice the Best Products straight underneath it.

This was the same but modified design used by

The content arrangement between and CNET is quite similar and then we have Brumpost.

But each of these websites retains its brand identity.

For the color combination, I went for 3 which were Black, White, and Maroon.

But this time around, the Maroon wasn’t very present just like Netgills or even

Black was more consistent. The post titles, the top header, the footer, button holder, and so many more uses black color while the maroon was used as a subordinate.

The white was of course the background on which those images were.

Being the lead designer and developer of the solution, was a really daunting and challenging task but it was fun altogether and the development was very great and faster than I had imagined.

I single-handedly built the website from scratch up till its finish. Things I was brought on to do were

  1. Design a competitive product
  2. Develop the product
  3. Design the brand
  4. Create the brand’s marketing asset
  5. Structure the brand and its assets based on the product design framework
  6. Test the entire product
  7. Correct necessary errors based on user feedback.
  8. Launch the first version of the product

These were my main deliverables as the product design lead.

How I did it

WordPress was the first solution that came to my mind based on the content management requirement of this project.

The website is expected to support posts of different formats and types.

For example, the sub-website within the website (Tire Post) is a separate website that only deals with Cars and automotive news and stories.

So a CPT was the first plug-in I installed to come with this.

I created different post types with each supporting different formats.

So this would make it easy for the post Admin or content creator to easily add a post type without using the format as with the default single posts CPT within the WordPress system.

That was a great move.

The next thing I did was create the functionalities required for the website such as email form, post-auto-load, product review, product deals, sliders, content ranking and so much more.

Then I looked again at the company’s competitors such as CNET, DigitalTrends, The Next Web, The Verge, Mashable, and I saw their functionalities and how they arrange their contents.

This gave me a better understanding of what Brumpost should look and feel like.

The challenge continues as to the type of template to select to achieve the look and feel.

Initially, I thought about hiring a Company to build a custom template from scratch but then I realized I could fine-tune an existing premium solution to suit my own very taste.

There were thousands of templates on (A web development marketplace where templates are sold) for example and going through that endless list and checking them.

One after the other was really tiring and annoying. Because I have to read through each template to see what functionalities they have and if I could easily modify those to suit my need.

But eventually, I looked through and purchased these 3 templates

  1. Jannah
  2. Herald
  3. Engine

But none of these templates could achieve what I wanted as they had promised based on their functionalities.

Herald was the closest but still, I wanted more. So I had to make more research until I landed on Tana and Jnews.

Both templates were great and did exactly what I wanted but Tana had a problem…

It was too SLOW just like Engine. And the reason for this snail-speed was Because I had manipulated the template to include my own custom codes and CSS styles.

All of which were meant to alter/improve the functionality to suit what I was trying to create.

Jnews, on the other hand, was faster and even sleeker but Tana had an audio system that was great and sleeker but I had to adopt JNews.

So I quickly ported my codes into this template with ease coming with a very sleeker website that was easier for me to manipulate using the template and Child Theme support.

Afterward, I drew out the UI/UX of the website including the user journey and sitemap using an open sheet and then transferred it to and Adobe Photoshop (I’m an addict to that tool) which was the proposed look and feel.

Eventually, I was able to come up with a solution that looked more like 60% CNET, 20% 10% Digital Trends and TNW but less TheVerge all of which will was all based on my UX Research.

The company’s management loved what they saw and so I began adding the features to the UI from the website using page builders such as Visual Composer and Site-origin Panel builder.

The UI took me 3 weeks to eventually finish with the homepage being the longest and most time-consuming due to trials and errors.

Each post archive had a different UI design.

Then on to static pages such as About us, and so forth.

The back-end was more tricky since I wanted to make it more beautiful rather than the generic WordPress default Admin.

I developed a theme for the back-end which makes it way easier for users to use the Admin interface with ease while still enjoying the beautiful experience.

The entire project took about 4 months before it was completed including the testing and launching.

Testing started after the website was presented to the management and bugs were quickly fixed for the first version of the website based on beta users’ feedback which was great based on the modern look and feel.

The mobile UI was also included in the project though it was developed separately.

Screenshot 47

1st Generation Brumpost in early 2019

Screenshot 48

Best Products area mimicked that of

Screenshot 49

Screenshot 50

Brumpost uses an irregular-grid design to render post contents throughout the entire website, especially on landing pages

Screenshot 51

Brumpost media area design mimicked that of CNET.

Screenshot 52

Brumpost magazine footer used to promote special posts and events or products

The result

After the launch of Brumpost in October 2018, the website witnessed various bug fixes which weren’t discovered by the Beta testing team earlier but each bug were fixed.

With thousands of visitors coming to Brumpost every day, the need to keep the website’s load time to be as fast as possible was necessitated.

The cache tool used was very efficient and the conversion rate increased.

Articles were easily found and content archives are easy to access via a comprehensive Uber navigation system which links the website together with ease.

Great SEO practices were also part of the resulting improvement as the website displayed excellently on Google.

For example, product reviews showed reviewers, pricing, and review stars on Google just as they were on the website.

Users confessed their love for the website as its sleek and comprehensive.

Brumpost Mobile

Brumpost responsive mobile website

(Left) Brumpost Mobile homepage (Middle) Single post in light mode (Right) Single Post in dark mode

As part of the company’s plans to reach a more global audience, a mobile application was proposed.

The mobile UI was meant to be oversimplified in order to enhance reading convenience for the end user.

I proposed two types of UI based on my UX findings on the project.

The first was a grid home page while the Other was a list view.

While the conclusion was to incorporate both UI into the single application which would be left for the user to decide what they want their app to look and feel like.

Giving the end user the free will to choose how they want to read their favorite news is a very good way of making them feel considered during the developmental processes.

Since the majority of users want something unique that only caters much to them, this move was essential and smart.

I interviewed 6 people from different locations asking them what their ideal news app would look like. I then brought up 6 different applications for them to easily chose from.

The list included

  1. BBC mobile app
  2. CNET mobile app
  3. Tech Crunch mobile
  4. Instagram Mobile
  5. Huffpost app
  6. Fox News Mobile app

Users were quick to disqualify the FoxNews app and Huffpost mobile all saying they wanted something that would be extremely easy for them.

BBC was favored above CNET which also came second on their list of choices.

The choosing of these two applications made me realize the power of list view.

Although I had decided to make the views both list and grid leaving the user the choice to pick whichever they’d prefer.

Users also want functionalities such as Night View mode and the ability to pre-select what they’d like to read and what they won’t like.

This means that the mobile app would be totally customizable all based on the user’s own wants and needs.

The end user would have full control over what they want to subscribe to and what they do not.

The night mode function will make the app easy to visit at night and features such as social media share would make it easy for the contents to be shared.

Also, push notification was needed. Users said they love it as it reminds them of the latest updates they might miss.

For example, some users might have loaded their smartphones with tons of applications. Going through the list to check for their favorite tech news app might be annoying so the push notification alerts them whenever there is something new as well as a widget system.

Brumpost Single Post Website

Content Structuring for single post (1) Breadcrumbs (2) Post Main title (3) Post Subtitle (4) Author and Post Meta (5) Comment Count icon (6) Post content body (7) Social network share buttons (8) Ads banner placement at the right sidebar (9) Bargainers/Deals (10) Featured Video

Quick Overviews

Website name: Brumpost
Industry: Media publishing
Type: Technology and Product reviews
Core Software used: WordPress
UI mimic: CNET,, Mashable, DigitalTrends, The Next Web
UX: Fluid content flow, Content autoload, and Grid post display
Fonts: Montserrat, Varela, Gegloo,
Colors: White, Black, and Maroon
Features: Gallery, Video, Podcasts, Post autoloader, Adaptive UI, Uber Menu, Dynamic Footer, Product Reviews, How To Guides, Multi-Lingual support, Account support, Guest Page, Email sign up form, Social network sign up, commenting system, Content sharing system, subscription, Magazine design, and so much more.


We use cookies to give you the best experience. Disclaimer

Cookie Policy