Why And How We Gave Our Website Design a Major Overhaul
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.
Throughout the past 8 months, our team at Piktochart has been pushing out more features based on user feedback, and we’ve been talking to our users face-to-face to see what they want and need. We’ve learned who they are, what they do, how they use Piktochart, and why they have been supporting us thus far.
With this knowledge in mind, 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’ve learned from our users 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.
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 selection 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 lifestyle images from sites like Pexels, Unsplash, Death To Stock, 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.
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 design and provides more definitive whitespace, which is something we strongly advocate when it comes to design.
Tweaking our existing brand color palette was slightly more daunting for us, as colors are largely associated with brand identification most of the time. 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 contrasts better with the grey and white text that are commonly used on our website.
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 show their design skills, we want to be the bunch of visual geeks you would run to when you need to visualize your story.
With this in mind, we identified the three goals we want to achieve by launching our new website design:
→ Rebrand ourselves as a more open, interactive, and approachable design friend
We love hearing from our users, and rebranding ourselves came from our dream of being the approachable friend that they can connect easily for their visual purposes. Friendship win!
→ Help answer the questions our users usually have for us through our website copy
Through tons of user feedback and constant research, we managed to identify and compile a list of common 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.
→ Remove website clutter and ease navigation
It was the perfect opportunity to do this. Using analytics (and admittedly a fair bit of gut instinct), we organized pages according to priority and importance to users, removed unwanted pages, and revamped our site map.
Some might wonder why we’re not focusing 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 connect with our users, and we believe these doing these things increases our conversion rates while retaining those important emotional connections.
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.
Key Steps in Our Website Redesign Process
When we looked back over the past few months of the redesign process, we saw three main stages:
- Planning and research,
- Conceptualizing, and
- Officially getting down to business.
Planning and Research
The first thing we did when we realized we needed to revamp our website was to set goals and determine a game plan. The goal setting part wasn’t too hard because we’re constantly incorporating our user feedback into our plans and designs for new features.
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, track our progress, and delegate responsibilities in line with agile scrum methodologies.
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 all the questions we thought each of our 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 UX research. Underneath each group of questions, we would look to our website and see which sections or pages were 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 would need to answer any questions they might have.
Conceptualizing
The process of conceptualizing the website 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 to identify how we wanted 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.
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 design.
A good note for this exercise would be to have a strong 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, created an initial prototype based on the decided idea. At the same time, Rin, one of our in-house designers, came up with another alternate design that ran on the same values and brand direction but with a more minimalistic outlook.
We tested these two variations through UserTesting in order to observe how users responded to the different designs and which emotions they associated with them. The test provided invaluable insights on how normal site visitors would feel and experience the new designs, and the team 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 rest of our redesign process.
Getting Down to Business!
Finally, we began the official designing and coding phase of the redesign! Truth be told, it was the easiest stage we had to go through. 🤓
Understanding our users and determining the right direction for our brand and product 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 first step was to draft the page copy. 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. This team carried out A/B tests, paper prototype tests, and user interviews. Changes or improvements that were identified would then be scheduled and worked on during improvement days.
After 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? Let us know!
For more tips on startup life, along with some advice on how visual storytelling can improve your skills as a designer, marketer, and educator, check out our blog at http://piktochart.com/blog.
This article was originally posted on the Piktochart Blog.
