Claris, an Apple Company
FileMaker, developed by Claris, an Apple Inc. subsidiary, is a versatile relational database software. It combines a powerful database engine with an intuitive graphical user interface (GUI) and robust security features. This integration empowers users to visually tailor databases to their needs. FileMaker offers versions for desktops, servers, iOS, and web delivery, catering to various platforms seamlessly.
In June 2021, I joined the Web Team at Claris as a Web Design Intern. There, I was tasked with designing a new web page with the function of teaching new and existing Claris FileMaker customers about how to develop advanced applications with our product.
my role + tools
Web design & development Adobe XD Adobe Dreamweaver Adobe Photoshop Adobe Illustrator
The team
Year
2021
I was given Claris's brand identity to work with, and had the opportunity and flexibility to explore innovative ways to make use of the assets and general look Claris's Web Team wants to achieve.
Ideation
The Marketing and Content Team wrote the copy for the new page, and I was given the general outline to base my wireframe on. I created a rough low-fidelity wireframe by laying out the information, and separated them into contrasting sections.
Interface Design System
Based on Apple's and Claris's brand identity, I chose several colors from Apple's official brand guide and adjusted the saturation and brightness. However, the typography is consistent throughout the website, so I only made minimal font weight decisions for the page's typography.
Iteration & Design Solutions
For web design and selling products or services, a call-to-action button is an integral part of the design. CTA buttons have proven to be successful near the top and bottom of the page. I included the top CTA button after the first section that explains what our product is about, and before the nitty-gritty details that dive deeper into application development. I made sure that the section color was high-contrast in relation to the rest of the page, so that eyes can be easily led to it.
For the "Types of app development section," I opted for a design that makes use of the full-width real estate. I separated the three sections (Desktop, Web, and Mobile) evenly, and chose to use a combination of stock images, an overlay, and custom illustrations. Claris uses circles and x's throughout the web assets, and I wanted to creatively implement them on top of stock images.
For the "Stages of app development" section, I wanted to visually depict the stages using oversized numbers. Claris uses semi-circle and rounded shapes throughout their identity, so I thought that it would be a great opportunity to use them as a base.
The final hurdle in the design was the final CTA and form section. However, the initial copy did not include the text for this section, so I worked around existing copy. We found that the first rendition was rather long, and the form was also too long, which brings up issues, such as if potential customers would feel less inclined to finish the form. The final form leads customers to an ebook first. This way, they are less overwhelmed and can take in information slowly.
