Cufflink - Website Redesign
A case study detailing the redesign and implementation of the Cufflink website after a recent brand refresh.
A case study detailing the redesign and implementation of the Cufflink website after a recent brand refresh.
This project was centred around updating and improving the Cufflink website to reflect the new corporate identity created earlier in the year.
It was also necessary to update the content of the site after our participation in a variety of accelerator programs lead us to discover that we should be pivoting the business in more of a B2B direction and as a result was required to update the content to suit.
The current issue commonly faced by users was that they left the website still not completely understanding what it was that we did here at Cufflink.
From this discovery, I liaised with the Co-founder to better understand if there were any other issues that we would like to address in the update.
After confirming the scope of the project, I got to work researching our current competitors’ websites studying a variety of formats and flows until I was able to form my own. With these in mind, I started by creating a sitemap and a series of wire frames forming the skeleton of the website.
After these were complete I sought more feedback from team members and the co-founders to agree on a final design and finally implemented it within WordPress.
Once completed we sought feedback from external advisors and members of the public and received good feedback with them liking the changes made and overall though it to be clearer and more succinct and aligned with not only our brand update but also the businesses in which we were looking to target as future customers.
1
To begin my research, I started by asking all team members to take a copy of the current website and annotate areas of improvement and any suggestions that they may have, be it graphical improvements, content, tone of voice etc.
This was done so I could gather a variety of different perspectives on the site as everyone on the team approached the task differently. This enabled me to get a broader understanding of the potential problems faced by our visitors and how to improve them.
Once this part of the research was completed, I decided to create a site map of the current site to gain a better understanding of the current hierarchy and if we had any pages that could be removed or combined etc.
This ended up being a valuable task as I could clearly see some areas where we had previously duplicated pages essentially telling the user the same information in a slightly different way. It also highlighted areas to me within the text that may be too confusing for a non-technical audience.
To complete my research, I decided that it would be good to create a series of mood boards that were comprised of the newest website design trends along with our competitors’ websites to gain a better understanding of how they are currently advertising their products online etc.
By creating mood boards, I was able to paint a clearer picture of the current digital landscape while gaining invaluable inspiration on how I wanted our site to look going forward.
Based on the research carried out there were some additional design opportunities that presented themselves.
We needed to update all of our graphical elements along with improving / updating the app screen mock-ups as we had now moved on with the design and the current images were no longer true to the final product.
2
3
To kick off the new website I started by reviewing my research and developing a new sitemap, this was like the original however I was able to amalgamate a variety of the pages to cut down on the journey time for prospective customers.
Another slight tweak was the creation of a solutions drop-down within the nav where people could view either our business solutions (SaaS) or public app (Cufflink app). This was done to delineate between the two offerings.
Another update and tweak to the current format was the transition of the homepage becoming more focused on business rather than consumers, again, this was done to reflect the recent business pivot of targeting B2B customers.
Once this was completed, I created a series of low-fidelity wireframes taking on earlier team members feedback I removed any sections that were not completely necessary to create a more consistent and concise flow to the website.
We then discussed the flows as a team and made slight changes here and there but ultimately were all happy with the proposed concepts. To ensure everyone was on the same page with the proposed frame I decided to create a slightly higher fidelity version that would allow team members to click through the website and get an even better understanding of the proposed changes etc.
I have included some examples of this process below.
Once the low-fidelity stage of the project was ironed out I started to create a series of high-fidelity designs that incorporated some of my earlier research into current design trends.
This part of the project included a lot of experimentation as I was torn between a variety of different visual styles but ultimately was happy with my chosen design as it boldly incorporated our new brand guidelines while keeping the professional, mature tone while remaining colourful and visually interesting for users.
I also made sure that our main CTA for getting companies on board was as evident as ever with frequent contact us modals and useful business benefits shown throughout the site as previously we thought that it wasnt clear enough for how users could get in touch.
The main goal of the new design was to take businesses on an informative journey detailing the pitfalls of poor information management and how our solution solves their problem.
Below I have included some screenshots from this experimentation process and a few of the earlier design Ideas along with the final proposed design.
4
5
When it came to the implementation of the site, we decided to continue using our current provider WordPress along with some new additions such as Elementor pro and the essential addons tool as this would give me greater flexibility when building out some modules.
I approached the build from a mobile-first perspective as like most websites a lot of our traffic came from mobile devices, I also wanted to ensure that the written content would not appear too long on mobile devices and users could still easily read and access the relevant information as needed.
Below I have included some images from the final build.
Once the build was complete, we reviewed the project internally and found overall to have received good feedback.
Members of the team said that the site now worked harmoniously with the new brand it was mentioned that this transition could be seen and was a step in the right direction for us as a company.
A few members of the team had some feedback and concerns regarding some aspects of the site however these were quickly rectified and updated before making the site live.
We also decided to go back to the accelerator advisors and ask them what they thought of the new changes. Overall, they were happy with the progress we had made and believe that it a big improvement.
Personally for me I had a lot of fun working through this process and would like to revisit this again in a year or so and implement more of what I have learned to take it a step further and build out something truly bespoke.
6
I'm always eager to hear from new people regarding their projects and love discussing new ideas so if you fancy a chat drop me a line.
