Culture

Why And How We Gave Our Website Design a Major Overhaul

Posted by on .

We believe in transparency and in letting people try what we have to offer. First impressions count, and so does the first experience with our product.

The year is not over yet, but throughout the past 10 months our team at Piktochart has been seeing some truly inspirational milestones being achieved. Our user base is growing exponentially and reaching twice as many total users we had at the end of last year. We’ve been pushing out more features based on listening to users, and we’ve also been talking to many of them. We learnt who they are, what they do, how they use Piktochart, and why they have been supporting us thus far.

With this knowledge in hand, our team decided that a focus on brand affection and community building would enrich the experience of all those who cross paths with Piktochart. It all starts with our own website.

Presenting: The Piktochart Website V5

We understood from our fellow advocates who use Piktochart that many of them come from various industries, and most of them are social media marketers, bloggers, internal communication specialists, teachers, and startup CEOs. After gathering a mountain-load of feedback, we started crafting a revamped look and feel for our website.

*drumroll*

Piktochart's Newest Website Design is Live!

New Look and Feel

We wanted to incorporate a style that strongly resonates with what Piktochart is most used for, so we shifted from a vector-heavy design to a more lifestyle-focused design and layout.

We have a fold of user story videos on the homepage banner that portrays how others are using Piktochart. It’s a wonderful and inspirational compilation of how Piktochart is being used to make design easier, and to make information more beautiful. We also incorporated a lot of lifestyle images from sites like Pexels, Unsplash, DeathToTheStockPhoto, and from our own collection too.

These images set the mood for our site – we want to connect with the people who need Piktochart the most, and the images chosen for our site aim to reflect the relevant lifestyle, mood, and trend.

Piktochart's new website typefaces

Our new header and body fonts.

We switched our brand fonts from Lato to Montserrat and Proxima Nova as our header font and body font respectively. The combination of these typefaces on our website help us promote a cleaner website design and provides much more definitive whitespace, which is something we strongly advocate when it comes to design.

Our new brand colors are teal, magenta, and grey.

Our new brand color pallete.

Tweaking our existing brand color palette was slightly more daunting for us as colors are largely associated with brand identification at most times. However, through a number of trial combinations, we managed to tweak the entire color palette to achieve a more coherent set of teal and grey tones, with a more significant change being our secondary brand color: from orange to magenta. Mostly used on buttons, the new color of magenta contrasts better with the tone of grey and white text that are commonly used on our website as compared to the previous orange.

The Goals of the New Redesigned Website

We’ve always aspired to be more than just an infographic creator – to go beyond and become an intuitive everyday design tool. We dream of being a friend to everyone who needs a helping hand in design. When it comes to non-creatives trying to be creative, we want to be the bunch of visual geeks you would run to when you needed to visualize your story and information as infographics.

This led us to easily identify the three substantial goals we want to achieve by launching this new website:

1) Rebrand ourselves as a more open, interactive, and approachable design friend

We love hearing from our users, and rebranding ourselves sprouted from the aforementioned dream – being the approachable friend that they can connect easily for their visual purposes. Friendship win!

2) Help answer the most asked questions our users usually have for us – all directly through our website copy

Through tons of user feedback and constant research, we managed to identify and compile most problems our users try to solve in Piktochart. We aimed to translate these into website copy and directly answer what users have in mind before they even ask.

3) Remove website clutter and ease navigation

It was the perfect opportunity to do this. Through analytics (and admittedly a fair bit of gut) we organized pages according to priority and importance to users, removed unwanted pages, and revamped our site map.

Some might wonder why isn’t the focus on conversion rate optimization. While that’s always an underlying purpose, our big picture covers so much more than that. We believe in transparency and in letting people try what we have to offer. First impressions count, and so does the first experience with our product.

We want to increase brand affection, have emotional resonance and connection with our users, and we believe these in turn increase our conversion rates while retaining emotional connections.

Key Steps in Our Website Redesign Process

When we look back through the past months of the redesign process, we see three main stages: Planning and research, conceptualizing, and officially getting down to business.

Planning and Research

The first thing we did when we realized the need to revamp our website was to set goals and determine a game plan. The goal setting part wasn’t too hard as we talk to our users on a frequent basis. Specifically for the website redesign project, we conducted more user interviews to pinpoint our most updated user personas and understand their behaviour. After aligning the direction of the project with these goals, we set up a game plan using Trello to organize tasks, progress and responsibilities in line with agile scrum methodologies.

Our Trello Board for the Website Redesign Project.

A screenshot of our Website Redesign Trello board a few months into the project.

The most vital part of the research plan for this project was to identify core questions the website needed to answer. After identifying user personas, we listed down all the questions each of the personas could have when landing on our homepage.

The methodology used here is called the ‘gap’ analysis. It is a common information architecture method in the User Experience Research field. Underneath each group of questions, we would look to our website and see which part of the website was designed to answer each question. If no part of the website could answer the question, that would be a considered a gap that we would need to fill. This is how we started coming up with our Site Map – realizing which pages users will really need and what pages would need to answer the questions they might have.

Conceptualizing

The process of conceptualizing the website mainly involved designing and experimenting. The few major activities we carried out here were:

1) Defining the first customer journey

We prioritized questions that needed answering and started designing the flow of the homepage to form an easy step-by-step journey through the Piktochart editor.

2) Being consistent on brand values

We had a brainstorming session with a goal to identify how we want our brand to be perceived as well as what our long-term goals are in terms of branding and positioning. This stage introduced the tweaks to our font selection and color scheme in alignment with the goals we set before.

3) Creating mockups and initiating creative thinking

Several methodologies were used here. To spark creative thinking, we started off by participating in the ‘Crazy 8’ exercise commonly used by Google Ventures. By coming up with 8 different ideas and solutions for the website in 5 minutes, members were able to hit their peak in creativity.

We then dove deeper into the most solid ideas, using the Design Sketchboard method we discovered on the Adaptive Paths website.

We used a design sketchboard to sketch ideas for the website revamp.

The chaotic end result of our design sketchboard and brainstorm session.

The sketchboard is a great way to get different team members together to come up with ideas that don’t require a lot of work or deliberation. We drew our ideas on paper, talked about the pros and cons of each idea, and decided on one final idea to design.

A good note for this exercise would be to have a good facilitator steer the first sketchboard meeting. This person should be committed to moving the team forward, having participants brainstorm as many “big picture” solutions at first on paper, then refining their ideas with more detailed sketches.

4) Creating the first prototype (and an alternate one for testing)

For this stage, Giri, our resident web designer and coder, went on and created an initial prototype based on the decided idea. At the same time, Rin, one of our inhouse designers, came up with another alternate design that ran on the same values and brand direction, but with a more minimalistic outlook.

We then tested these two variations through UserTesting with the motive of observing how users respond when they see the different designs, and which emotions do they associate the designs with. The test provided invaluable insights on how normal site visitors would feel and experience the new designs, and the team then proceeded to create amendments that were more optimal.

At the end, the winning variation’s moodboard, style, and structure were chosen as the main reference for the remaining of our redesign process.

Getting Down to Business!

Finally, the time for us to get down to the official designing and coding part of work! Truth be told, it was still the easiest stage we had to go through compared to the prior two.

Understanding our users and determining the right direction for our brand and website were key to improving our website, and the rest of our coding work was only to turn these golden findings into reality.

At this stage, we split the team into two. The first team was in charge of writing, designing, and asset gathering. Focusing on one page at a time, the respective page copy would be first to be drafted out. Based on the copy, a mockup of the page design was created, and the relevant assets required such as testimonials, logos etc would be prepared. We managed to gather media mentions and testimonials from various renowned companies, including TechCrunch, Forbes, The Guardian, Booking, Moz, and SurveyMonkey.

The second team focused on testing and interviewing. Constant streams of tests and interviews helped us stay on track, so this team carried out A/B tests, paper prototype tests, and user interviews for the prior week’s page. Changes or improvements that were identified would then be scheduled and worked on during improvement days.

After around four months of thorough research, planning and experimenting, plus another two months of coding and optimizing, our website is now good to go, and officially live. The effort was all worth it!

What do you think of our new homepage design: yay or nay? If you enjoyed reading our insights and processes from behind-the-scenes, stay tuned for our November blog series, where we’ll share more marketing and growth-oriented topics to complement your infographic strategies.

0 Shares
+1
Reddit
Pocket
Share
Pin