For a company that provides an innovative solution across the telecommunication sector, I believe it is essential to have a web presence that effectively communicates our vision. This blog post illustrates my approach to taking the content of our existing website and transforming it into a completely new online presence, what it is today. This is the story of leveraging the Pareto 80/20 Principle to effectively portray wgtwo as the innovative telco brand it is.
Backgroundβ
I recently listened to a podcast about a CEO making her biggest mistake - not promoting within her company. She was pressured into hiring an external CEO to fill her position while she could focus on leading the design initiatives. Long story short, this was her biggest mistake and she learned that promoting people from within the company leads to better results.
Outsourcing the design of our website, this podcast made it clear to me why it failed to show the true identity of wgtwo. What we needed was a clear storyline, dialogue, and understanding of the Insider to simplify and structure the content, giving the viewer an intuitive understanding.
At wgtwo we have a startup culture where we build initiatives from the ground up - self-doing and empowering the developer. The company promotes this concept on a semi-quarterly basis through hackdays - where we creatively solve complex problems and build new solutions for our telco core network or learn a new programming language.
Knowing the inner workings of our technology and services and having a hidden passion for creating websites I was in the perfect position to change reality. One day during a daily standup, the inner spark was lit and it was go time.
Step 1: setting the objectives
Step 2: understand the 5 main issues of the wgtwo online presence
Step 3: come up with strategies to solve
Step 4: organize important content and design away - tell a story
Step 5: code it up
Step 1: Objectivesβ
80/20 Principleβ
Before diving into the nitty-gritty details of how I achieved to build a new website in a week, I wanted to briefly discuss the concept of the Pareto 80/20 Principle. Essentially, if someone is not aware of the concept, it has been around for a while but in theory, is a concept that has been applied and proven by many economists. This principle can be applied to wealth, consumption, consequences, and most importantly output and results.
β― the majority, that has little impact
β― the small minority, that has a major, dominant impact
20% input = 80% output
20% effort = 80% results
80% = Done
For the website, it was important to focus on, what is our 20% input. If a task comes to the table then it was important to know the importance of the task, and how much time should be spent on this. I will be referencing back to this 20% input and 80% output. For our context, 80% is a completed website.
Objectivesβ
I needed a mechanism to scope the amount of work and be able to "grade" the work at the end to ensure I meet my goal and most importantly, not get distracted from the goal. Part of the 80/20 principle is to ensure that 20% of the work is done to achieve 80% of the output.
Primary objectives (80%)β
A website is used by an audience. It was important to understand the end-user so I can ensure that their experience was prioritized. After brainstorming I came up with two scenarios:
- Commercial: Convert potential customers from being interested in taking action
- Talent: Inspire software engineers to consider wgtwo as their next employer and start engaging with us
Secondary objectivesβ
As our secondary objectives, these were still always in the back of our head but in theory, had less of a priority. There was some overlap with the primary objectives. In the end, however, I was able to also include this as part of the 80% website offering as a lot of the written content previously existed on the old website.
- Third parties: Educate media, analysts, and third-party developers about the future of our industry and our offerings
- Internal: Be an active platform for external knowledge sharing by employees (docs, policies, case studies, blogs, etc)
Personasβ
Ok sweet, so now that I have our finite goal in mind, let's think about the personas related to achieving our goals and objectives. Specifically, I found that it made sense to have two groups of personas, external and internal.
External audienceβ
We can think about external audiences as who is using the website.
- I am a technical manager at MVNO company x trying to learn about how wgtwo solves business problems for me
- I am a software engineer looking for a new challenge and job within the telco space
- I am an existing customer of wgtwo finding documentation to APIs and contact details
- I am an existing customer looking to find their security documentation
- I work at a news outlet (journalist, analyst, investors) trying to find more information about wgtwo
2 out of 5 were true with the old website
Creating these statements allowed me to think about what content is important and the organizational architecture. This gave us the criteria to then grade our content for each bullet point.
As an example, focusing a lot of time on creating a storyline was critical for answering the questions around content organization on what business problems wgtwo solves, hiring and recruiting, and links to our external products like API Docs and support portals, as they did not exist before.
Internal audienceβ
It was important to include internal personas as the website will be updated, maintained, and managed by whom, internal personas. Previously, the old wgtwo.com had a problem that the website was only updated by a select few in the sales team - but even then - an external request to a third-party company has to be made.
Who and how will wgtwo be updating the website. In short, everyone will have access to the website and be able to update content.
- I am an engineer looking to write a technical blog post in markdown
- I am the head of marketing looking to post company news about a new feature wgtwo deployed
- I am the head of marketing looking to update the header text on the homepage
- I am an engineer looking to add a new link to the APIs doc
- I am an engineer looking to add a new page about details of Voice
- I am the CTO looking to update our tech page as I have a new capability
- I am the CEO finding information about how I do XYZ for a sales chat
- I am a salesperson looking to add a case study
- I am a salesperson looking to find a link to more information to send to a customer
2 out of 9 were true with the old website
Essentially, from these bullet-point lists above, I reflected and see that well I have a technical and non-technical persona that needs to be able to update the website. I need something modern and scalable to allow rich and modern web content while basic text blog posts and documentation. This was important when determining the tech stack for the website.
Step 2,3,4: Problem Analysis and Solutionβ
The bulk of the blog post will be this section. To help organize and communicate the problems, approach, and solution - there were a few domains that were clear to me that required work and altering.
Before tackling any problem listed before, it went through a process such as:
- Problem: Identity what was not working with the old website and keep a total list
- Approach: Look back at the personas and objectives as mentioned earlier and come up with a definition of done (DoD)
- Solution: Have an ordered priority list of action items that must be done. It was important to review this list multiple times to ensure that one item on this list did not take more than 20% of the time compared to the other items.
Ok, I am starting to get somewhere. Let's jump into some identified problem domains and see how I was able to achieve a cleaver solution and impact.
Storylineβ
Problem: Unclear message of what the wgtwo business is.
Approach: Envisioning different personas (mvno employee, 3rd party developer, journalist, future wgtwo employee) trying to explain the business in different ways. Essentially, how can I build an elevator pitch for the website viewer?
Solution: Restructuring the existing content on the website, and intuitively creating a hierarchy of content. I achieved this via a landing homepage that is made up of several components.
(Example homepage: Intro, Vision, product, existing customers, case studies for future customers, action to get in touch)
Homepage - Landing Page
What are we selling =>
Mobile Core Network
No details on what the product is =>
Added a section of Console
No information from existing customers =>
Added a testimonial
No sense of credibility =>
Logos with external links to business deals
Taking a page from Apple and Facebook
Brandingβ
Problem: No clear wgtwo identity, different brand names / no clear βsloganβ
Approach: Understand our personas, business model, and decide on a central way to communicate our brand // analysis of existing content to understand how the brand should be communicated
Solution: Working Group Two AS = company name, while when referencing our company, wgtwo in bold - all lowercase to match our logo // programmable, scalable, innovative
What's our company name?
Working Group 2 =>
Working Group Two AS
Working Group 2 As =>
Working Group Two AS
WorkingGroup2 =>
Working Group Two AS
WGTWO =>
wgtwo
WG2 =>
wgtwo
Word analysis
To achieve this, I had to run a script to download the HTML of the website, as we did not even own the source code of the website. Below you can see the small script I ran to recursively download all pages from the old website. From some small grepping, I found our that innovation was one of the top lists.
wget --recursive --page-requisites --adjust-extension --span-hosts --convert-links --restrict-file-names=windows --domains wgtwo.com --no-parent wgtwo.com
Content organizationβ
Problem: Hidden content (too long paths)
Approach: Miro board chart to understand the existing website structure and content
Solution: everything accessible via one click, make more use out of the header and footer of the page
(Example: find the interview process page)
Mapping the website structure with Miro
This was a time consuming process to map out the structure of the old website but in doing so, it was / is quite clear that the new website has a huge improvement in readability.
27 pages => 8 pages
Product Ecosystem
5 pages => 1 page
User Experienceβ
Problem: Difficult to read text, website nonresponsive, outdated, not techy
Approach: Adopt a modern scalable framework using React, Typescript, Docusourus. Thoroughly test the site on desktop and mobile when developing.
Solution: no images only text-based site, clear structure of header/subtitles/text, mobile-friendly, and brand messaging!
Shutterstock images to graphical text
Shutterstock images => Crafted messaging
Mobile Friendliness
Non-descriptive headers => Product we are selling
Interview process
A weird empty white space => Interactive elements
Operationalβ
Problem: Few internal people and externals can update the site, hosted on WordPress, managed by externals
Approach: Understand user personas for the website to ensure all internal users can make updates / give people in the company the ability to work on the website/ inspire to be proactive in making blog posts again / create an identity within the company (every tech company should own their tech)
Solution: Public git repo, markdown, education material in updating the site, a framework to inspire to create content
(Example: blog, docs)
Goodbye Wordpress, Hello React
7 days => 5 minutes
$$$$ => 0
Step 5: The techβ
As mentioned in the Internal audience, I needed to cater to personas inside our company that were both technical and non-technical. I had use-cases where I wanted something that could be self-managed and hosted low maintenance and was a modern and scalable workflow.
- The non-techy staff and blog posts such as this, the industry-standard now days is markdown. So I knew I needed markdown.
- For the techy to make a website that could be customizable, secure, scale, and use APIs - react is also an industry standard. In addition, I wanted something that generated just plain HTML so I could host on GitHub without an issue.
- React/Typescript - Scalable modern framework that allows for complex API calls. For example, it came in handy for creating our Careers Page
- https://docusaurus.io - native support for markdown allowing for a rich blog (which is what you are reading today!)
- Github and GH Actions for hosting, building, and collaborating
Lessons learnedβ
What went wellβ
- 80/20 model was critical to get progress made in a week.
- Scoping the project with a defined time (1 week) helped. I scoped it in several ways such as focusing what links to include in the header and footer, as well as, keeping the original text as much as possible from the previous website.
- Keeping this initiative small. The fewer people, the faster one can move and make decisions and get stuff done.
- Accepting that a website is never complete and focus on getting something out of the door.
- Using React with live reload was a breeze for quickly testing and demoing out new component designs
The badβ
- Don't waste time on illustrations. Illustrations are tricky because it is a love/hate relationship. Some will love, and others will dislike - and seldom a full agreement. Crafting good text will tell a better story than a cheap illustration that people remember. All in all, I probably wasted 5 hours trying to come up with solutions and doing research that ended with the original text I had in about 5 minutes of thinking.
- Handling a company-wide iniative, several people have opinions in how things can be best done. This critique and push back can be hard for some people but I never let this get to me mentally and instead followed my gut and kept pushing forward.
What I learnedβ
- I learned a new framework and language - React, Typescript, Docusaurus
- I learned about modern website design concepts
- I learned how Github actions work
- I learned how to better prioritize my time
- I learned the importance of following your gut and doing what I am passionate about
- I learned how hard illustrations are
Todayβ
After the week was up, it was time to present this new website in our company-wide Friday demos. After a short 15 minute walkthrough, the excitement I bottled up has now been spread across the company. Several hip hip hoorays and smiles around. People feel like wgtwo's identity is now represented. Some that were never interested before are now providing feedback and are inspired to write blog posts.
Our new website is a living, breathing machine telling our company's story one day at a time.
Overall, I want to say a special thanks to my little Senja Mae and my wife Sophia for chilling on the couch with me while I spent countless hours using Apple airplay to cast my computer screen on the tv while coding away.