Redesigning Sentifi.com: A Case Study in Brand Evolution
Sentifi is an award-winning Swiss fin-tech company, which provides investors and companies around the world with relevant insights from multiple news and social media channels. They use machine learning and semantic methodologies to screen through millions of content pieces within seconds and recognizing what is being said by whom about a company, commodity or currency.
Rebranding their website was my first project at Sentifi in 2017
My role
- Proposing solution for rebranding.
- UI/UX Design
- Prototyping
My team
Stephen Madeinlo – Head of UX Design
Jim Wilton – Chief Marketing Officer
Phúc Phan – Head of Front-End
1 product manager, 2 QA , 1 marketing staff
Tools I used:
- Sketch
- InVision
When I joined Sentifi, the board had decided to rebrand and shift their business model from B2C to B2B, with a focus on enterprise customers.
Goal
- Create a new website that would position them as a leading enterprise-level software company, but also maintain the connection to their existing logo as a unifying visual element.
- Deliver a clear message about Sentifi’s product: Assist the customer in gaining a clear understanding of how Sentifi’s product transforms traditional and alternative raw data into investment analytics.
- Deliverables: Mobile and Desktop compatible screens (Responsive)
Problem
- The restriction of the branding guidelines caused difficulties in creating a modern and fresh design for the website. The available color palette was limited to only 5 colors, with the primary colors being orange, dark grey, white resulting in the website appearing outdated and failing to effectively convey the company’s brand image as a leading provider of high-tech, machine learning software.
- Difficult to understand product: The product is complex and it was difficult for users to understand how it worked and the benefits it offered. The previous website targeted to B2C.
- Lack of content: we struggled to effectively display them on the website.
- My limitation: lack of financial knowledge and understanding of the investment world. The specialized terminology used within this field feels like an alien language to me.
How I solve it
- To create a cohesive visual identity, we also proposed a horizontal layout that would allow visitors to get a full overview of the company’s offerings at a glance, similar to a brochure.
- I began to learn about the investment world at Investopedia to understand about the terms and the needs of our target audience. I’m still a noob but better than a blank.
Design Iteration
1. Conduct research:
To redefine the architecture of the website, we asked our stakeholders to define what are some of the most important questions that come to mind about their target user? Those were shortlisted to top 3:
- How should we introduce Sentifi?
- What is the product’s direction and business plan?
- Who is our target customer?
- The old users, or B2C, were generally interested in investments and stocks.
- Our new targeted users, or B2B, were investors and asset managers in the European Union, with an average age of 35.
2. Brainstorm and Sketch:
Before sketching, here are some ideas to consider:
- I recommend updating the current homepage design, as I really like the header.
- Improving the navigation to make it easier for users to find the information they need.
- Enhance user understanding by adding explanatory videos to the website. These videos will showcase the features and benefits of Sentifi’s products, helping users see the value in using them.
- Use a simplified color scheme, perhaps utilizing gradients to add liveliness and modernity to the design.
- Make sure each page has a clear call to action.
- Provide enough information for them to understand how Sentifi works, but not too much.
- Treat the website as a salesperson that guides customers in understanding how Sentifi works. The sales team should be able to quickly identify the customer’s interested product when they reach out.
3. Design the user interface:
I created a very quick and basic lo-fi prototype to present my ideas, and then moved on to the hi-fidelity version.
- I emphasized the Smart Search feature to showcase the power of the Sentifi Engine.
- We decided on a tab-based application design for the website, with a dashboard that effectively communicates the main points about Sentifi at a glance. This design was especially beneficial as we added new features, as it allowed us to easily expand the dashboard.
- The tab-based design is easy to navigate, allows users to see all the products and understand the overall concept and brand of Sentifi.
- Focused on creating visually appealing images to make the website clean and lively, with a youthful appeal. I also paid attention to UX writing to ensure that the website was user-friendly.
4. Develop a prototype
The prototype was created using the high fidelity version as a base. By this point, 80% of the process was completed. InVision was used to create the prototype, which was an excellent tool for prototyping in 2017.
5. Test the prototype
The prototype was tested with 3 groups:
- Internal design team to ensure the idea was implemented correctly
- Product Manager and stakeholders to ensure the design aligns with the brand’s direction and to identify any insights or bugs
- Developers to provide feedback on the feasibility of the design and to ensure it is grounded in reality
6. Refine the design
Positive feedback:
- The overall concept of the tab-based design, they finding it easy to navigate, fresh and new compared to other websites.
- The combination of white and orange was well-received, with the website appearing clean and playful.
- There were no major difficulties in implementing the design from a coding perspective.
Suggestions for refining the design:
- Reducing the amount of content on the homepage to make it less heavy and more streamlined.
- Toning down the use of orange as the primary color, or incorporating other colors to balance it out.
- Separating the blog from the homepage to improve readability and make it easier for users to access. This may also align with the marketing team’s plans for SEO.
7. Final Design
After several rounds of refining the design (I lost count of how many times I had to tweak those minor details), it was finally ready to be handed off to the developers.
The Designer hand-off process:
- Gather all the assets and document them in Zeplin files.
- Hold a hand-off meeting with the development team, including the leaders and junior members.
- Keep in constant communication with the developers whenever they run into any issues.
- Refine the design once more for the beta stage based on feedback from the QA team.
- Project launch! Time to celebrate with a well-deserved slice of cake.
How to measure success:
- Project was launched on time on both mobile and desktop versions.
- Meeting the project goals, including effectively conveying the message about Sentifi’s products.
- Improving user experience, as evidenced by positive feedback from sales team and customers about the new design being more user-friendly and easy to navigate.
Conclusion
Working on this project also allowed me to learn more about the fin-tech industry and the specific needs and expectations of our target users.
I was able to apply my knowledge of user research and visual design to create a website that was both visually appealing and user-friendly.
Learning
- Working on this project helped me become an effective communicator and also opened my eyes to the UI/UX paradigms.
- I was able to take notice of how even minor design tweaks could make a huge difference in user experience.
- It wasn’t just smooth sailing though; there were several micro-challenges along the way which only made it more enjoyable!
- Ultimately, I gained valuable insights that enabled me to resolve any issues effectively.