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 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 contents such as videos, podcasts and pictures.
Brumpost though new is a fast rising tech news hub and see a rise everyday. Because of the number of content being published on a daily basis and the daunting tasks of publishing research based contents, there was a need for a well versatile website that can function not just a Content publishing hub but also as a home to Brumpost media LLC itself. So it was expected that this project be a hybrid website to some great extent.
Brumpost wants a beautiful website that portrays its brand’s prowess and reach to a global audience. Also, content are publish 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 contents of 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 need to collect email from users and since each post content types are treated with differences, there was supposed to be need for different subscription forms on each post content format and post types.
For example, there is 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 contents. How this is supposed to work is that when a user reads a 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 on from the database.
The reason for this is to enhance each of viewership for the audience so they don’t have to go back to 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 includes 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 post from different categories.
Expected Features Includes
There was a big pile up of features as the core functionality of the website. While Being a comprehensive CMS is the ground foundation, the website is also going to 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 fully function, I was left to decide on somethings based on researches and findings. And going through other media outlets and comparing such with Brumpost’s needs and wants, I came with a longer list.
1. Email sign up: This is needed as a Customer’s 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 different email form list created with whatever email service provider being used.
2. Paid/Free Subscription: As parts 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 were special contents 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 contents which are being shared would have a different title, a different description that are targeted at different since each social network websites have 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 user is able to share that portion alone without needing to use the share button 3hich shares the whole page content as a URL.
4. Microsites: The url brumpost.com 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 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 matters 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 is can be pre-built to take on any dynamic design which can be changed or replaced anytime with convenience.
7. Mobile Support: Aside 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 content as they’d want. At least there should he availability for 4 different UI for each post types (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 ads 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.
Bring 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 one 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 needs links to move from a page to the other with ease.
After doing my researches based on what users want and what Brumpost wants, I placed them both side by side so I came up with a Conclusion which would put both the company and its audience on the the same track.
I COPIED the big guys!
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 wants to go through the hurdle of learning to use a new website just to read some articles and do some stuffs.
While majority of technology based websites look alike to some extent, some are more unique while still maintaining that brand look and feel.
For example, 01Net.com. This French based tech news uses a lot of grid to arrange its content. Combining the color red and Montserrat font family made the website very appealing.
It’s navigation system is very easy to go through as there were less 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 the red as its brand. For example, the old Netgills which was the earliest ancestor of Brumpost was 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 uses grid to arrange their contents especially CNET, which was more grid-centric just like 01Net.com.
The beauty of CNET made me combine that with 01net and came up easily with the homepage design.
Checking on CNET and 01Net.com for example, this 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 tend to be more of tech culture and entertainment, The Next Web is more on general tech but Engadget focuses on gadgets.
The similarity motivated the grid conclusion on 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 grid on mobile isn’t very user-friendly considering the sizes of different smartphones. Of 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 is that of Brumpost look and feel. But 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 01Net.com 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 01Net.com.
The content arrangement between 01Net.com and CNET are quite similar and then we have Brumpost. But each of these websites retains their 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 01Net.com.
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, it was a really daunting and challenging tasks 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 assets
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 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 01Net.com. 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 suite my own very taste.
There were thousands of templates on Themeforest.net (Web development marketplace where templates are sold) for example and going through those endless list and checking them. One after 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 suite my need.
But eventually I looked though and purchased these 3 templates
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 a 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 which were meant to alter/improve the functionality to suite what I was trying to create. Jnews on the other hand was faster and even sleeker but Tana had an audio system which 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.
Afterwards, I drew out the UI/UX of the website including the user journey and sitemap using open sheet and then transferred it to Draw.io and Adobe Photoshop(I’m an addict of 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% 01Net.com 10% Digital Trends and TNW but less TheVerge all which will was all based on my UX Researches.
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 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 user 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.
After the launch of Brumpost in October 2018, the website had witnessed various bug fixes which weren’t discovered by the Beta testing team earlier but each bugs 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 practises were also part of the resulting improvement as the website display excellently on Google. For example, product review showed reviewer, 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.
As part the company’s plans to reach 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 freewill 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 majority of users wants something unique that only caters much for 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 Mobioe
5. Huffpost app
6. Fox News Mobile app
Users were quick to disqualify 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 choice.
The choosing of these two applications made me realise 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 ability to pre-select what they’d like to read and what they won’t like to.
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 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 latest updates they might miss. For example, some users might have loaded their smartphone 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.
Website name: Brumpost
URL : www.brumpost.com
Industry : Media publishing
Type: Technology and Product reviews
Core Software used: WordPress
UI mimic: CNET, 01net.com, 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.