This is the first project I have completed with my team members in Flex-Solver. Conducting a website redesign and rebranding exercise is not an easy feat and when I started on this project it was a little overwhelming. However, it will bring more opportunities to the business down the line as our previous website did not highlight the full extent of our capabilities as a business. Here is my sharing of the lessons I have learnt and the challenges that I faced during this project.
What is the purpose of our redesign?
Our Business is growing.
The previous website no longer could satisfy the content that was necessary for presentation to potential clients and stakeholders. As a society we have been able to witness how Covid-19 has changed the way we work and live, for example the number of restaurants that use e-Menu and e-Commerce platforms have increased rapidly. These implementations have helped different companies to meet the needs of their customers while aligning with restrictions of the pandemic. Since 2017, Flex-Solver has grown from a duo to 52 staff members. We have also expanded our product line, services and added new approaches to our business processes. These have been implemented to solve customer existing pain points.
Our design processes
To create an effective solution, we had to ensure that our processes are structured and aligned with all our projects. This ensures that we continue to have consistency for all our products and services. Here are the four steps that we have taken in our design process.
Step 1 — Evaluated the website with Heuristic evaluation
Before I started the design of the website, I have a habit of doing some analysis for the current state of the website design. The reason I do this is that it helps to define the problem that needs the most attention. These problems or issues need can’t be too broad or narrow. I do this by conducting a heuristic analysis. Here were some of my findings.
· Poor IA structure arrangement and lack of important product information
The information was not structured correctly, it was placed randomly, especially on the product pages. The website also lacked support information that can help the visitor understand why they needed the services. In addition, some of the titles were not written in layman terms, this could lead to customers being confused when reading it.
· CTA button placed at the irrelevant places and does not grab the attention of the user
Under the section, Customer Spotlight, the CTA button should be titled “learn more” or “read more” instead of ‘’speak to us’’. This section shows visitors and potential client’s details of every project we have completed. Speak to us button here would have confused visitors.
· Lack of consistency and standardisation
When reading the Flex HQ Enables sections, this looks more like jargon; we should use our products & services/ solutions with clearer terminology. In the new website, we rephrased all the main titles and simple explanations to each content so that visitors can have a better and easier understanding when they are browsing through the pages. In addition, we made sure every title matches with the title in the navigation bar.
· Missing help and documentations
There was no FAQ section on the old website. FAQs can provide more information for users or allow the target audience to easily understand and guide them on how to complete a task.
Step 2 — Aligning Style guide with the brand
We wanted to bring a new visual style and sense of emotion to our existing and future audiences. To do this, we infused four groups of vivid colours into the new website design. We selected blue to be our brand and main key colour. This blue was applied on our call-to-action buttons and in the background as well. The other three colour included Green which represented Flex Retail & F&B Hub, Orange for Flex People Hub and Purple which was Flex Experience Hub. Each colour represented what we wanted to express as a company.
· Blue: Integrity, loyalty, reliability. This represents our professionalism and the high-quality products.
· Green: Freshness, trust, and sustainability.
· Orange: Warm, enthusiastic, successful, determination and friendly.
· Purple: Creativity, wisdom, and confidence. Purple is a unique, strong colour to use within a website colour scheme as it stands out.
Along with the improved user interface, the core product with different colours helps visitors to navigate through the website and guide them through the site content easily and quickly. This is also conveys an innovative, energetic and friendly approach.
Another part of the guide is the typeface. We choose Rubik which comes with 7 tier font sizes and types. The slightly rounded edges make this typeface unique and fun to use while keeping things classy and sharp. It serves the purpose of portraying service quality, stability, and beauty, which is exactly what Flex-Solver wants to build for our customer. We also included all these elements of banners, icons, and illustrations to make the website more lively and delightful.
We reorganize the information architecture (IA) and sorted the product range to give a clear overview of what we do and introduced all the products by using the mega drop-down menu. Furthermore, the product categories are also written clearly on the top of the homepage. This will lead visitors to the page they want right immediately.
We applied the same layout hierarchy for all the product pages according to these, Banner-benefit for this products-features-pricing plan (the most exciting part)-contact form and footer with the shortcut.
Call to action (CTA) acts as a signpost that lets the user know what to do next. It makes it clear to the potential customer which action to take next and helps remove friction in moving the visitors down the sales funnel. We marked all the highlighted panels to place CTA buttons and make sure it can lead visitors to the correct directions.
Step 3 — Design Iteration
The design has gone through rounds and rounds of changes. Until we finally decided on the final one. This non-linear process was done internally, we gathered all the feedback and suggestions by having a stand-up meeting twice a week from all the key members of our team.
Step 4 — Validate and launch
Before handing it over to the Development team to build the website, we ran 2–3 rounds of audit checks for all the pages for both mobile and desktop platforms to spot any bugs, inconsistencies, and errors. This ensures the finished product runs smoothly as per our initial expectation during the prototype phase.
Takeaways and Learnings
Breaking the problem down with bite-sized chunks in rebranding projects
By implementing this methodology, we were able to break down the hard problems and pain points. We were even able to uncover some unforeseen obstacles that could be quickly solved.
Include your entire team member in this process
Design is a collaborative process. We should involve every team member and other key members in this journey by gathering their feedback, opinions. At the same time, we should encourage contributions no matter big or small. Moreover, this also can strengthen their ownership of the products during the journey.
Design prioritizes usability not just creativity
Fancy and creative design can catch the attention of users easily. However, the ease of use is still the key point when creating digital products. To achieve this, we have to make sure the website design layout is consistent, features and function are self-explanatory and other guidelines can deliver a good user experience to our audiences.
Through this case study, I would like to mention colleagues, mentors specially HC Tan, Su Myint Myat Moe, Gerard Tan and Nicholas Teo for guiding and helping me throughout the project.
Closing note
Thank You for Reading!
If you loved the case study, do drop a clap .Also, leave your valuable feedback to improve. If you are into design, sketches, sports, or are interested in building things, feel free to connect on Linkedin and behance.
