About The Client
InspectT, a start-up with a team of dedicated scientists, is committed to innovating size measurement technology in chemical analysis using optical spectroscopy. Their innovations benefit society in many ways, for example, by improving disease detection, pharmaceuticals, or environmental monitoring.
The Challenge
InspectT has received significant investments and is now getting ready to launch their product. They require a brand and a website that reflect their innovative, open, and sustainable values. That way they want to emphasise the benefits of their products, which are designed to streamline spectroscopic analysis for like-minded scientists.
Working with the client, our challenge was to identify their business aspects and translate them into a compelling design that aligns with their industry. Jim Ekanem was the project management and design lead, while Rachel Prasetya was the UI/UX designer and provided branding support.
I, Rachel, am writing this blog entry to guide you through the project from start to finish.
Process
Briefing
The process begins with a client brief and an introductory meeting, where we familiarise ourselves with the client’s services, unique selling point, vision, mission, target group, and competitors within their fields of expertise. During our project onboarding, we also discussed the preliminary structure of their website. We shared briefly how we plan to approach the project throughout different sprint phases, incorporating agile methods into our workflow.
Research
During our research, we investigated three of their competitors operating in a similar field. This important step provided insight into the industry by examining the design elements and architectural structure of the competitor’s sitemap, which could potentially serve as a foundation for the brand that we are building.
Define
In order to develop a brand identity based on the client’s desired visual communicative style, we now take the pieces from their unique selling point, vision, and company domain and transform them into visual insights in the form of a moodboard. A variety of references for diverse design types, from approachable to professional, were formed by compiling different colours, images, and patterns. Before moving on to the brainstorming stage, we ensure that the moodboard is in line with the client’s chosen visual style after it has been put together. During this step, we also began to generate concepts for the logo and created a few designs that the clients could review in the meeting.
Ideate
After receiving our client’s response, we started developing the brand’s aesthetic by selecting five to six colours that would best represent the desired style. We used Squarespace’s colour theme generator to apply the various colour tones to every area of the website. We also included details that the client had provided at that same moment at the same time. In this manner, we could determine which part of the document the client’s target audience should pay most attention to. In order to attract attention, we do this by using stronger hues on the background, the font, or the shapes. Not to mention, I tested out the contrast of each shades using a colour accessibility checker that is WCAG compliant. This allows me to determine which shades fit well with other, leveraging inclusive design for accessibility.
Design
The last step is the design phase, where we tweak the design further, making it more high-fidelity by deleting the unnecessary elements, adjust certain design elements with CSS, activating email campaigns for their pre-sale, and implementing SEOs for their website. During this phase, I also made minor adjustments to some design elements so they looked presentable on the mobile version of the website.
Revision
The revision phase is a process that was applied throughout the entire design of the website and drafts for the logo. There are not many revisions required for the website; however, we had quite a challenge trying to align our vision and take on the logo with the client’s wishes. Eventually, we decided that Jim would take care of most of the logo design tasks while I focused on building the website.
Design Artifacts
Logo
Client Idea
Our Refinement
result in Context
About the logo
On the left side logo, you can see that there is a star- or asterisk-like shape, and next to it is an arrow-shaped line. These visuals represent the act of light rays hitting the container with inside spheres of different sizes, which represent molecules or particles in a solution. The client wants a logo that clearly depicts their technology. However, it looked complicated because it looked like two instead of one logo. A logo should be seamless, simple, and straightforward.
Thus, after many iteration attempts, the second draft was created, which was the one in the middle. The font used for the logo is “Inter Tight,” which allows the logo to have a modern look with balanced letter spacing to maintain readability.
Reflection from Rachel
It was quite the journey for me to actively participate in this work. Throughout this project, I gained plenty of knowledge, including how Squarespace operates, how to properly create a brand identity, and how to collaborate and communicate with a colleague who introduced a new workflow.
Challenges & Interests
It took me some time to figure out Squarespace, especially since it was my first time setting up email marketing and optimising the website for search engines. Finding certain items was difficult because there was a lot of user terminology that I didn’t understand. I had to continue shifting between the squarespace website and the tutorial page, but eventually I was able to figure it out . Writing for SEO caught my curiosity as well. I became interested in how to improve a website’s traffic at certain points during the process in order to boost its online presence.
Collaboration requires communication
When collaborating remotly, misunderstandings can occur more easily, especially in new work settings. Aligning on our way of practicing effective and timely communication was a game changer. We were able to collaborate more efficiently by being open and honest with one another through short calls, if needed.
1 on 1 Mentorship
Creating a unique brand identity can be difficult at times, particularly when determining the appropriate tone and voice for the brand. Jim provided a big help with this. Through his thorough process of defining certain aspects of the team values, industry, vision, and goal, he taught me how to build a personal brand. His method of using colours, words, phrases, moodboards, and other imagery helps transform these ideas into something more visually appealing.
logo iterations
The most challenging step in the brand building process, in my opinion, is creating the logo. The customer had a very clear idea for a logo that is as exact in its meaning as it is in its appearance. The infrared ray striking these liquid molecules should be featured in the logo’s straightforwardness. They have very specific and technical requests, and although I occasionally design logos, this was new to me. Jim and I initially sketched three logos, but they weren’t quite what our client was looking for, so we sketched a few more. As we iterated further, Jim eventually had to take over this process full, as I the website required most of my attention. I’m impressed by his persistence in drawing multiple iterations before we got to the final one. In this project, I gained a lot of knowledge about how to develop a logo that balances the client’s needs with a professional look. Next to that, working on this project proved as a valuable opportunity to experience the complete design process from beginning to the end.