Website, UX/UI Design
Sketchish
Research
Sketchish is an innovative product-building company that focuses on the intersection of AI, design, and engineering. The company offers a range of services, from product design to artificial intelligence solutions, tailored to meet the needs of diverse industries. My task was to design a landing page that would effectively communicate Sketchish's core competencies, showcase past projects, and highlight their technological expertise while encouraging visitors to engage and book a consultation.
The landing page needed to be visually engaging, convey the company’s credibility, and serve as a lead-generation tool. In designing the page, my goal was to strike a balance between making a strong visual impact and ensuring clarity of information. The design would serve as the first interaction point for potential clients and thus needed to provide an excellent user experience from start to finish.
Problem Statement
Sketchish needed an engaging and user-friendly landing page to convey their expertise in AI, design, and engineering. The challenge was to communicate complex offerings in a simple, clear manner while highlighting their portfolio and success stories.
Product Goals
Communicate Sketchish's service offerings and core strengths clearly and effectively.
Build trust and credibility by showcasing successful projects and client testimonials.
Create an intuitive and visually engaging layout that would guide users through the company's capabilities.
Optimize the landing page to drive conversions, particularly by encouraging visitors to book a consultation
Type
End to End Website
Role
Research & UX/UI
Timeline
April - Dec 2023
01 Research Discovery
Research and Insights
The initial phase of the project was dedicated to understanding Sketchish’s unique brand identity, their target audience, and what differentiates them from competitors. To start, I conducted thorough stakeholder interviews to determine what they hoped to achieve with the new landing page and what their core value propositions were.
Stakeholder Interviews & Goals:
Sketchish wanted to position itself as a forward-thinking and tech-savvy partner, specializing in a blend of AI, design, and engineering.
The stakeholders emphasized the need for a clear, bold, and instantly engaging landing page that would serve as a "first impression" to a varied target audience, ranging from large corporations to startups.
There was a strong desire to emphasize social proof through client testimonials and recognizable brand logos to establish credibility.
Additionally, Sketchish wanted a conversion-driven approach, with clear pathways for visitors to either explore services in depth or to quickly book a free call.
User Persona Development:
To inform the design decisions, I developed user personas representing key segments of Sketchish's audience:
Corporate Executives: Seeking reliable partners for long-term, large-scale projects involving AI and design.
Startup Founders: Interested in getting a sense of Sketchish's capabilities to help with product development from scratch.
Product Managers and Decision-Makers: Looking for a partner capable of solving specific product challenges or adding unique features using AI and engineering solutions
Competitive Analysis:
I also conducted a competitive analysis of other tech-driven and design-oriented agencies. This gave me a clearer perspective on common industry practices, such as:
Featuring detailed case studies and project showcases prominently.
Including client logos in the hero section as a way to establish immediate credibility.
Using strong and minimalistic visuals combined with clean typography to communicate professionalism.
This research phase helped me define a roadmap for the landing page that would:
Create an engaging first impression.
Lead visitors through the value proposition with a clear and structured hierarchy.
Reinforce credibility using real project visuals and client testimonials.
Drive conversions via a strong call to action (CTA) for consultation bookings.
02 Design and Ideation
Defining the User Journey and Content Layout
After identifying the audience and their needs, I created a detailed user flow to outline the potential journey a visitor would take on the landing page. The key journey steps were:
Attract Attention: Start with a visually strong hero section that defines who Sketchish is and what they do.
Build Trust: Immediately follow with social proof, showcasing trusted clients and previous collaborations.
Showcase Capabilities: Present past projects with real examples and succinct explanations to validate expertise.
Convert Leads: Provide a prominent and accessible CTA to book a free call, positioned throughout the page to maximize conversions.
The information architecture of the page was carefully planned to follow this flow:
Hero Section: A bold statement, "AI. DESIGN. ENGINEERING.", was used to immediately define the company's core areas of expertise. Below the headline, a brief subheading explained their approach to blending technology with user-centric design.
Social Proof and Testimonials Section: Client logos, such as those of Kaplan, GoDaddy, AVG, and more, were displayed directly below the hero section. I wanted users to feel assured of Sketchish's credibility right from the start. Testimonials with quotes from previous clients added further weight, creating a strong basis for trust.
Product Showcases Section: The third section of the page was a visual showcase of Sketchish's portfolio. These examples demonstrated the range of projects the company had successfully completed. I designed this section as a scrollable gallery, with each item accompanied by a short description that highlights the value delivered.
Core Services Section: "What We Can Do" was a key section that broke down the primary services offered by Sketchish: Design + Engineering, Artificial Intelligence, Product and Application Design, and Other Expertise. Each service was illustrated with icons to aid visual scanning.
Technology Stack Section: To appeal to a more technically inclined audience, I included a section with logos of the technologies and tools that Sketchish uses—such as MySQL, MongoDB, and Redis. This showcased the company's diverse technological capabilities.
Wireframes and Visual Hierarchy
Wireframes were created to outline the overall structure and placement of elements. I focused on establishing clear visual hierarchy:
A prominent headline at the top to ensure instant communication of the company's main services.
Well-defined sections separated by white space to allow users to easily scan and digest content.
Call to Action buttons placed consistently at key points throughout the page, including at the beginning and end of each major section, to encourage users to book a free call.
I conducted usability testing with the wireframes by presenting them to a small group of stakeholders and target users. Their feedback was instrumental in refining the user flow to make the navigation more intuitive, such as adding anchor links to help users quickly jump between sections.
03 Design Execution
Visual Design and Aesthetics
The visual design for Sketchish’s landing page had to evoke modernity, trustworthiness, and technological expertise. I used the following key elements to achieve this:
Typography and Color Scheme: I opted for a bold, sans-serif font for the headline to convey strength and innovation. Supporting text was kept minimalistic to enhance readability. The color palette primarily included shades of blue, purple, and white, which are often associated with technology and professionalism, paired with a gradient background that added visual interest and modern flair.
Hero Section Design: The hero section is the user's first impression of Sketchish, so I emphasized a minimalistic design with a large, bold headline, a brief subtext, and a clear CTA button ("Book a Free Call"). This section also used subtle animations to draw the user’s attention to the CTA without being overwhelming.
Product Portfolio and Client Logos: To showcase their expertise, I included a visually engaging portfolio carousel. Each project was displayed with a high-quality screenshot, a title, and a brief project description. Client logos were presented in grayscale to keep the focus on Sketchish while still showcasing credibility.
Testimonials and Trust Indicators: The testimonials section incorporated rotating quotes from clients such as GoDaddy and Kaplan. To create a sense of reliability, I combined client names with company logos, emphasizing the breadth of Sketchish's experience. A star rating was also included to visually reinforce satisfaction levels.
Interaction Design and Prototyping
I designed the landing page interactions to be intuitive and engaging:
Micro-interactions were used to enhance user experience, such as hover effects on project images that provided more details, and animated CTA buttons that subtly pulsated to draw attention.
I developed an interactive prototype in Figma to test the overall page flow and gather feedback from stakeholders and a test group of users. The feedback was overwhelmingly positive, particularly regarding the ease of navigation and visual appeal.
Responsiveness and Accessibility
I implemented a mobile-first approach to ensure the landing page worked smoothly on all screen sizes, from desktops to mobile devices. Key adjustments included:
Stacking content vertically for smaller screens while ensuring that important CTAs remained visible.
Optimizing image sizes for faster load times without compromising quality.
Ensuring accessibility with appropriate color contrast, alt text for images, and descriptive link text for screen readers.
04 Testing and Launch
Usability Testing
After finalizing the design, I conducted usability testing with several users who fit the target persona profiles. The objectives were:
To ensure that the information was easy to find and understand.
To test the effectiveness of the call-to-action buttons.
To identify any issues in responsiveness across different devices.
Key Findings and Adjustments:
CTA Visibility: While users appreciated the boldness of the primary CTA, some users missed the secondary "Explore Services" link, which was placed further down the page. Based on this, I added a secondary CTA button to the hero section to make the exploration option more apparent.
Portfolio Section: Users found the portfolio images engaging but suggested that clicking on an image should provide more in-depth case studies. I made adjustments to ensure each portfolio image linked to a more detailed project page for users seeking more information.
Performance Testing and Optimization
I worked closely with developers to ensure optimal page load times and smooth transitions between sections. Images were optimized without compromising quality, and modern development techniques like lazy loading were implemented for better performance.
I also conducted A/B testing for different versions of the "Book a Free Call" button to determine which design led to better conversion rates. The version with a pulsating animation and a contrasting gradient background performed 20% better than a static button.
SEO and Accessibility Optimization
SEO was another critical aspect. I ensured that all images had appropriate alt text, headlines were structured logically (H1 for the main title, H2 and H3 for subsections), and the page content was optimized with keywords that aligned with Sketchish’s offerings to enhance discoverability.
Accessibility features like ARIA labels were implemented to ensure the page could be navigated using assistive technologies, making the content accessible to all users.
05 Results and Impact
The launch of the new landing page brought significant positive changes to Sketchish’s digital presence. The landing page succeeded in making a strong impression on new visitors and effectively converting leads.
Key Metrics Post-Launch:
Increased Conversion Rate: The new landing page resulted in a 25% increase in bookings for free consultations, indicating that the clear call-to-action strategy effectively encouraged user engagement.
Reduced Bounce Rate: The bounce rate dropped by 15%, suggesting that visitors were spending more time exploring the site, which reflected the success of the information architecture and engaging content layout.
Positive User Feedback: Feedback collected from users indicated that they found the landing page easy to navigate, visually appealing, and informative. Users noted that the layout made it simple to understand Sketchish’s offerings and decide on the next step.
Testimonials from Stakeholders:
The stakeholders at Sketchish were pleased with the outcome, especially the increased engagement rates. One of the executives stated:
"The new landing page has been a game changer for us. It perfectly encapsulates our brand’s expertise and has been successful in drawing in more qualified leads than before."
Challenges Faced During Implementation:
Balancing Content with Visual Design: One of the biggest challenges was managing the balance between the need for extensive content to explain Sketchish's offerings and maintaining a clean, uncluttered visual design. To address this, I utilized interactive components like expandable sections and modal popups to keep the initial view streamlined while allowing interested users to dig deeper.
Maintaining Consistency Across Devices: Ensuring a consistent experience across multiple devices posed challenges, especially regarding the placement and behavior of elements like the portfolio showcase. I resolved this by implementing a modular design approach, where elements could adapt dynamically depending on the screen size, ensuring a seamless user experience.
06 Reflections and Learnings
This project provided me with valuable insights into designing a landing page for a technology-driven service provider. Below are some of the key learnings that I took away from the project:
1. The Importance of Strong Visual Hierarchy: Through this project, I learned that the way information is presented greatly affects user engagement. Crafting a strong visual hierarchy that guides the user from one section to the next in a logical manner ensured that visitors were fully informed and were more likely to take the desired action.
2. Micro-Interactions Can Improve User Experience: Small touches, like the hover effects on the portfolio images and animated CTA buttons, can significantly improve user experience and increase engagement rates. These micro-interactions served as visual cues to encourage exploration and emphasize action points, which helped improve the overall conversion rate.
3. Trust Signals Matter: By including testimonials and displaying well-known client logos in prime locations, I realized how crucial it is to provide visitors with immediate social proof. This goes a long way in building trust, especially for companies looking to establish themselves in a competitive market.
4. Collaboration with Stakeholders Is Key: Frequent collaboration with stakeholders was essential to align the page's content and structure with the company's goals. Holding regular feedback sessions allowed me to iterate effectively and make informed design choices that reflected Sketchish's brand identity and values.
07 Next Steps and Future Enhancements
1. Detailed Case Study Pages: Currently, the portfolio section on the landing page provides an overview of Sketchish's projects. The next step is to create individual case study pages for each showcased project, providing in-depth information about the challenges, solutions, and results of each project. This will help visitors understand the value of Sketchish’s work on a deeper level.
2. A/B Testing for Further Optimization: There is room for improvement in conversion rates, and I plan to conduct A/B testing on different page elements, such as headline variations, CTA placements, and button text. This will help determine which combinations work best for increasing user engagement and conversions.
3. Personalization Features: In the future, implementing dynamic content that adjusts based on user behavior or demographics could make the experience more personalized. For example, different content could be displayed for corporate executives versus startup founders, increasing the relevance of the content for each audience segment.
4. Integrate Video Content: Another area of potential improvement is incorporating video content to introduce Sketchish’s services. A short, engaging video could make complex offerings easier to understand and add a more human element to the landing page, further improving conversion rates.
08 Conclusion
The Sketchish landing page project was a comprehensive exercise in crafting an experience that balances engaging visuals with clear, impactful information. By emphasizing a strong user flow, integrating social proof, and ensuring the design was responsive and accessible, I was able to create a landing page that effectively communicates the company’s value proposition and drives user action.
This project strengthened my skills in end-to-end UX/UI design, from user research and wireframing to visual design and usability testing. I learned the importance of keeping the user at the core of every design decision, as well as the value of continuous iteration and collaboration to deliver a successful final product.
The results speak for themselves—a significant increase in consultation bookings, reduced bounce rates, and positive stakeholder feedback all indicate that the landing page achieved its intended purpose. It was gratifying to see my design positively impact Sketchish’s business, helping them generate more leads and build lasting client relationships.
Key Takeaway for Future Projects: The success of this project reiterated the value of combining aesthetic appeal with a well-planned content structure. A beautiful design alone is not enough; ensuring that users can effortlessly understand what is offered and be guided towards the desired actions is what makes a landing page truly effective. This is the core principle I aim to bring into all my future designs.