Hastaç Makine
Overview
UX/UI Designer, Website Designer, Coding
Figma, HTML/CSS, JavaScript
2 months,2024
User Research
User Persona
To design a user-centered experience for Hastaç Makine, I developed user personas based on user research and client input. These personas represent the core audience groups who would interact with the website. The goal was to identify their needs, behaviors, and goals to ensure the design aligns with their expectations.
Primary User Types
- The website must balance technical depth with accessibility for users who may not have a technical background.
- Visual elements like case studies, before-and-after project galleries, and client testimonials are crucial to building trust and conveying expertise.
- Navigation should be intuitive, with clearly labeled sections for services and contact options.
Competitive Analysis
Analyzing two competitors in the machining solutions industry highlighted their focus on technical specifications and customer trust, providing insights into how Hastaç Makine can enhance its UX by simplifying navigation and emphasizing its craftsmanship.
UX Strategy
Dividing the strategy into User's Perspective and Client's Perspective to ensure for addressing the needs and expectations of both sides effectively.
The insights gained from meetings with the company further informed the business objectives, allowing me to align the website design with both the company's goals and the needs of their target users, ensuring a solution that supports their vision and market demands.
User's Perspective
Client's Perspective
Sound of the Website
- Informative: The website offers clear, precise, and accessible information, allowing visitors to quickly grasp the services, products, and solutions offered by the company.
- Technically Sound: Professional and technical language is used to demonstrate the company's deep expertise in machining and engineering, while maintaining an approachable tone.
- Highlights Expertise and Ability: The content emphasizes the company’s years of experience, technical capabilities, and successful projects, fostering trust and positioning the company as a leader in the industry.
- Custom Solutions: The website showcases the company’s ability to provide tailored solutions, addressing the unique needs and challenges of each client.
- Strong Customer Service: A customer-first approach is emphasized, with a focus on providing responsive support and guidance to ensure customer satisfaction.
Ideation
Site Map
Based on user research and the client’s perspective, I developed the following site map for Hastaç Makine. This structure ensures a clear, user-centered navigation system aligned with both the users' needs and business goals:
- Home
- Machining ( Services )
- CNC Machining
- Deep Holing
- Custom Projects
- Machine Park
- About Us
- Contact
Card Sorting Method
To further refine the website’s structure, I utilized card sorting techniques. This brainstorming method helped me organize the content, identify logical connections between sections, and ensure a cohesive user experience across the website. The process was integral in aligning each section of content with the overall UX strategy and improving navigation between related pages.
Design
Low-Fidelity Wireframe
- Navigation:
- Sticky and streamlined top navigation ensures quick access to key sections.
- Top Bars: Ideal for simple sites with only a few main sections.
- Dropdown Menus: Organized structure to group similar items together.
- Call-to-Action (CTA) Placement:
- Strategically positioned CTAs guide users through the pages seamlessly.
- Ensured CTAs are visually prominent, encouraging interaction and page navigation.
- Key CTAs direct users to essential sections like Contact Us, Services, and Case Studies.
- Content Demonstration:
- Implemented card components to showcase services and machines effectively.
- Cards provide a clean, modular structure that highlights individual offerings.
- Focused on responsiveness, ensuring the card layout adapts to various screen sizes.
Low-fi-Home
Mid-fi-Machine Park
Mid-fi-About
UI Concept
Mid-Fidelity Wireframe
Mid-fi-Home
Mid-fi-Machine Park
Mid-fi-About
Delivery
Technologies Used:
- HTML: Structured the content using semantic elements for better accessibility and SEO.
- CSS: Designed custom styles to complement the Bootstrap framework
- JavaScript: Added interactive elements and dynamic behaviors, such as animations, carousels, and form.
- Bootstrap 5: Used the responsive grid system and components for faster development and mobile-first design.
- JSON for Multilingual Support: Enabled language switching functionality by storing and dynamically loading text content in different languages.