Background
Bear Times (formerly known as 518 Career Ginseng) is a self-media powered by 518 Bear Works, it helps fresh graduates and senior workers to find the most abundant work and career articles from workplace culture, job search experience, labor standards act, etc.
Self-media is one of the attempts of our brand refresh. We wanted to make our brand and design look clean and neat. Also, the team wanted to rip off the labels and don’t let people define us as the traditional job matching services platform by curating rich content about work and career.
Goal
- Create a brand-new self-media platform
We provided fresh graduates and senior workers with abundant work and career articles from workplace culture, job search experience, labor standards act, etc.
- Build the brand awareness
The second goal of Bear Times is to increase brand awareness, and the self-media is also a way for users to recognize our new brand: From 2019 to 2021, 518 Job Bank has changed its logo into a new brand called "518 Bear Works". Thus, we need a brand new self-media as the brand's self-introduction.
- Boost the organic traffic and SEO rankings
After the launch of our brand new self-media platform, we needed organic traffic and more people to discover the brand, so it was necessary to improve SEO and the rank of search engine results pages.
Principle
1. Consistency
After the 518 Job Bank changed its logo in 2019, the brand also changed its color plan. Therefore, the new brand palettes were applied in all of the products to ensure consistency, allowing users to discover the new brand visuals, and making it an opportunity to reintroduce our brand to users.
2. Make it clear
The core of the content curation platform is about how we display the articles and gather the relevant information for a particular topic or area of interest. As a professional self-media, we must share verified and useful information to the readers and become a go-to resource and reliable resource in the job matching services industry.
Therefore, we left a large amount of white space and proper line spacing and kerning to make it easy to read so that users can pay full attention while reading the articles. The space between the paragraphs can also create a sense of rhythm in reading and maintain the user's level of engagement.
3. User-friendly
When designing the website, I wanted to build the best reading experience. In terms of color contrast, I hoped to comply with standards AA and above. Moreover, I added alternative text to the picture, to ensure that everyone is able to read the same content, and it’s also easier for the physically challenged to use VoiceOver to read the text.
Deliverables
This is the first edition of self-media that went online before it changed its name to Bear Times.We wanted to make our brand and design look clean and neat. Also, the team wanted to rip off the labels and don’t let people define us as the traditional job matching services platform by curating rich content about work and career.
Front-end Development
- Using a local copy of Bootstrap 4, reducing the impact of third-party code
I downloaded my own copy of Bootstrap 4 and integrated and revised it in our repositories to comply with our front-end codebase to avoid conflicting CSS declarations.
- Using the Mustache template system to build a reusable component system
Backend engineers installed the Mustache.js template to render the component. Our HTML file was divided into several parts, such as carousels, article cards, etc. We made each of them a component and eventually created a component library. It reduced the time the developers spend on debugging, adding new code, or maintaining the codebase.
Web Design
After the brand was renamed 518 Bear Works, the website renewed the brand colors to align with the new brand “Bear Times” and the rest of the brand visuals.
In this project, in addition to the web design, we put our main focus on improving SEO and the implementation of Google AMP, hoping to increase organic traffic. And the rest of the efforts I put into the front-end development, while those more related to the web design are breadcrumbs and sitemaps, both of which are also the important SEO metrics.
Outcome
After improving SEO and implementing Google AMP, the average daily page views exceeded 4,000 and increased by more than 10,000. A week after we implemented Google AMP, the mobile page speed test score improved from 78 to 88 (the recording interval is 2020/4/23-2020/ 4/30)
In this project, in addition to front-end development, SEO was also improved:We used Google PageSpeed Insights and Google Lighthouse to monitor the website performance, and several adjustments have been made to the suggestion from the performance diagnostics:
Higher compression while maintaining the visual quality means your images consume lesser data over the network and are downloaded faster.
- Compress images to reduce file size and improve the page loading speed
I tried to compress png files and lazy load the images.
- Adjust the structure of <h1> to <h5>
The <h1> HTML tag was originally used for the title of the article, but we changed the H1 description to demonstrate the brand identity: regardless of who you are or what you have been, you can accumulate experience, insight, and knowledge in this work and career column.
- Adding breadcrumbs and create a sitemap
Like chapter markers, breadcrumbs help readers understand where they are and let the content leaves a deeper impression on their mind.
- Adding alt text to each image
Adding alt text to images can help with accessibility and help visually challenged people read the website information.
When implementing Google AMP, I read the official documentation within an hour. We removed the inline-style CSS and custom javascript and minified CSS, and used AMP HTML tags and UI components. With the backend engineers’ help, the number of page views and the loading speed of the mobile page have both achieved good results.
Learning and Takeaways
This is a fast-paced project for both web design and frontend development. Under the condition of limited resources and tight deadlines, we had to deliver the final design and launch the website within one month. It was challenging. It is also the first time I had to switch my roles between design and engineering, collaborating with back-end engineers, and trying to improve the website performance by page speed optimization. Through my knowledge of design and front-end development, I read SEO and AMP-related articles and evaluated the technical feasibility of UI/UX design.
During the process, I felt appreciated working with the senior backend engineers. They helped me to bridge the gap between the front-end and back-end, and we discussed the information architecture, web page architecture, and file structure together. We also discussed what kind of technique will make the better programming performance. They shared knowledge of software development with me which helped me a lot in the project. Without their talent, I could hardly imagine I would be able to hand off the deliverables on time. Therefore, I learned more about the tips for collaborating with engineers, using each other's strengths, and building strong trust to make the project run smoothly.