Embedded Files
A website design and development for an advetising company
1. Introduction
Project Overview
TarhBaran Co., a creative advertising agency, required a modern and functional website to showcase their services, past projects, and industry expertise. The goal was to design a bilingual website (Persian and English) that would captivate their target audience, communicate their brand identity effectively, and simplify user navigation.
My Role
As the UX/UI Designer, I was responsible for the end-to-end design process, including research, wireframing, prototyping, and creating a cohesive design system.
After finalizing the design, I developed the backend of website using DirectUS headless CMS and mySQL. For the frontend, I developed it using ReactJS, HTML and CSS.
Link to live website
Highlights:
End-to-end design and development for a client website.
Bilingual support (RTL Persian + LTR English).
Created responsive layouts and reusable components.
Design system, wireframes, and high-fidelity prototypes in Figma.
CMS-driven content using DirectUS and structured database.
Key Deliverables
Bilingual website prototype (desktop and mobile)
Font styles and color palette
Reusable components and style guide
High-fidelity design with responsive layouts
Developing website with React as frontend and DirectUS headless CMS as backend
Installing fully functional website
2. The Challenge
TarhBaran Co. needed a visually compelling website that aligned with their creative vision while addressing specific challenges:
Bilingual Design: Supporting right-to-left (RTL) Persian and left-to-right (LTR) English languages.
Service Presentation: Clearly communicating their two main services: creating teasers and broadcast planning.
Mobile-First Design: Ensuring seamless user experience across devices.
Distinct Branding: Leveraging their red brand color (#eb3f43) to establish a strong identity.
3. Research
Competitor Analysis
I analyzed websites of leading advertising agencies to identify design trends, user expectations, and potential areas of differentiation. Key takeaways included:
Emphasis on visual storytelling
Simple navigation with bold calls-to-action
Clear service breakdowns
User Insights
I conducted interviews with stakeholders and potential users, gathering insights that emphasized:
The importance of bilingual content
Preference for clean and minimalistic layouts
Easy access to contact information and projects
4. Design Process
Wireframes
Low-fidelity wireframes were created first with pen and paper to map out the content layout and user flow. Iterative feedback helped refine the structure. Then I continued with a low-fidelity prototype to test its structure and functionality.
Style Guide
Typography: Rubik for Persian and Poppins for English, ensuring legibility and a modern aesthetic.
Color Palette:
Primary: #eb3f43 (red)
Secondary: #f5f5f5 (light gray), #212121 (dark gray)
Black: #000000
White: #ffffff
I well organaized the reusable componemts in figma for a better and faster design proccess and proper deliverables.
5. Key Features
Home Page: An engaging hero section with bold visuals and a clear call-to-action.
Services Page: Detailed descriptions of teaser creation and broadcast planning, supported by visual icons and animations.
Projects Page: A portfolio of past work with hover effects and project details.
Contact Page: A user-friendly form, location map, and quick links to social media.
6. Results
Client Satisfaction: The client praised the design’s alignment with their vision and its ease of use.
Usability: The bilingual design was well-received for its clarity and accessibility.
Design Scalability: The modular design system ensures future updates can be implemented effortlessly.
7. Reflection
This project reinforced the importance of considering cultural nuances in design, particularly for bilingual websites. It also highlighted the value of a well-organized design system for maintaining consistency.
9. Conclusion
The TarhBaran Co. website project successfully met the client’s goals, delivering a modern, bilingual design that emphasizes usability and brand identity.
This project now is in development step and I am working to build it with Strapi as a headless CMS and ReactJS for the front-end. I will update this page as soon as I finish and deploy the website.
Interested in similar projects? Let’s connect!
Page updated
Google Sites
Report abuse