<h2>Mobile-First Design</h2>
<p>We created a tailored design framework with polished patterns, clear principles, and carefully curated component libraries. Covering the essential UI components like buttons, typography, dropdown menus, and more, our enhancements enabled the product team to seamlessly achieve their desired functionality and user-friendly design.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-257 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/mobile-first.jpg" alt="" width="1170" height="600" srcset="https://api.yoda.design/wp-content/uploads/2024/03/mobile-first.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/mobile-first-300x154.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/mobile-first-1024x525.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/mobile-first-768x394.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p>&nbsp;</p>
<h2>Rooted in Research</h2>
<p>We started our project off with extensive usability studies engaging Leap’s users to bridge any insight gaps. Through our comprehensive research sessions and audits, we aimed to develop a deeper understanding of users’ pain points, and Leap’s business needs.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-38 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/test-image.jpg" alt="" width="1170" height="600" srcset="https://api.yoda.design/wp-content/uploads/2024/03/test-image.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/test-image-300x154.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/test-image-1024x525.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/test-image-768x394.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p>These insights formed the foundation for our product revamp efforts and iterative design processes, ensuring impactful solutions that meet users&#8217; needs effectively.</p>


<h2>Dashboard Design</h2>
<p>Leap’s event companion app, Greencopper required a product revamp. We redesigned the web platform of the app builder module to cater to the client&#8217;s requirement for a user-friendly mobile interface featuring a mobile-first approach, and intuitive drag-and-drop functionalities.</p>
<p><img loading="lazy" decoding="async" src="http://api.yoda.design/wp-content/uploads/2024/03/dashboard-design.png" alt="" width="4680" height="2824" class="alignnone size-medium wp-image-339" srcset="https://api.yoda.design/wp-content/uploads/2024/03/dashboard-design.png 4680w, https://api.yoda.design/wp-content/uploads/2024/03/dashboard-design-300x181.png 300w, https://api.yoda.design/wp-content/uploads/2024/03/dashboard-design-1024x618.png 1024w, https://api.yoda.design/wp-content/uploads/2024/03/dashboard-design-768x463.png 768w, https://api.yoda.design/wp-content/uploads/2024/03/dashboard-design-1536x927.png 1536w, https://api.yoda.design/wp-content/uploads/2024/03/dashboard-design-2048x1236.png 2048w" sizes="(max-width: 4680px) 100vw, 4680px" /></p>
<h2>Integrated Solutions</h2>
<p>For TicketLeap, Leap’s ticketing product, we developed a solution to integrate a third-party seating system into the existing flow. The existing dashboard was also revamped to make the user journey more intuitive and frictionless.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-258 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/integrated-solutions.jpg" alt="" width="1170" height="681" srcset="https://api.yoda.design/wp-content/uploads/2024/03/integrated-solutions.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/integrated-solutions-300x175.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/integrated-solutions-1024x596.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/integrated-solutions-768x447.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>


<h2>UI Kit &#038; Design System</h2>
<p>Leap’s products required a more consistent and intuitive design language. To achieve this, we built an elaborate design system for both light and dark modes, incorporating Figma’s Variables feature.</p>
<p><img loading="lazy" decoding="async" src="http://api.yoda.design/wp-content/uploads/2024/03/ui-design-kit.png" alt="" width="4680" height="2648" class="alignnone size-medium wp-image-344" srcset="https://api.yoda.design/wp-content/uploads/2024/03/ui-design-kit.png 4680w, https://api.yoda.design/wp-content/uploads/2024/03/ui-design-kit-300x170.png 300w, https://api.yoda.design/wp-content/uploads/2024/03/ui-design-kit-1024x579.png 1024w, https://api.yoda.design/wp-content/uploads/2024/03/ui-design-kit-768x435.png 768w, https://api.yoda.design/wp-content/uploads/2024/03/ui-design-kit-1536x869.png 1536w, https://api.yoda.design/wp-content/uploads/2024/03/ui-design-kit-2048x1159.png 2048w" sizes="(max-width: 4680px) 100vw, 4680px" /></p>


<p>Leap is an event tech solutions platform providing an all-in-one suite of ticketing, mobile apps, experiential marketing, merchant services, and management tools to event organizers.</p>


Kurt Emch

Team’s ability to generate ideas on the long-established parts of our product was fresh and worked within our constraints.

<h3>Large Scale Integration</h3>
<p>One of our main tasks was to integrate a third-party seating system within TicketLeap, addressing the client&#8217;s demand for an intuitive and frictionless user journey for their existing system. Showclix called for a more streamlined UX architecture to address user demands for a seamless ticket transaction experience. GreenCopper necessitated a comprehensive redesign of the app builder module to cater to the client&#8217;s requirement for a user-friendly interface featuring intuitive drag-and-drop functionalities.</p>


The Challenge

Design Sprints

UX Design

Usability Testing

Prototyping & Wireframing

UI Design

User Research

Leap

<h2>Brand Design</h2>
<p>Our first step in the design process was to define the brand with a brainstorming exercise. We collaborated with the client and asked them to describe how they see Dbank as a brand.</p>
<p>Ultimately, Dbank stood for 5 core values:</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-261 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/core-values.jpg" alt="" width="1170" height="68" srcset="https://api.yoda.design/wp-content/uploads/2024/03/core-values.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/core-values-300x17.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/core-values-1024x60.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/core-values-768x45.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p>To adapt to Pakistan’s competitive banking and fintech sector, the logo design was kickstarted by a comp analysis. We then got to sketching our many ideas for Dbank’s logo. When we say “many”, we mean over two hundred, no big deal!</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-262 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/dbank-1.jpg" alt="" width="1170" height="564" srcset="https://api.yoda.design/wp-content/uploads/2024/03/dbank-1.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/dbank-1-300x145.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/dbank-1-1024x494.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/dbank-1-768x370.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p>The final logo was a clean and dynamic wordmark that visually connected to the parent company. Now that we had a winner, it was time to color it. We tested multiple color options not just on the logo, but on digital collateral as well. The color that resonated the most with us and the client was Dbank Blue.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-263 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/dbank-2.jpg" alt="" width="1170" height="600" srcset="https://api.yoda.design/wp-content/uploads/2024/03/dbank-2.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/dbank-2-300x154.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/dbank-2-1024x525.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/dbank-2-768x394.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p>&nbsp;</p>


<h2>Design &amp; Research</h2>
<p>Our product design process for Dbank encompassed various aspects of UX and UI design, including wireframing, prototyping, and usability testing, all of which were developed and tested in parallel with the design language of the product.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-265 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/design-1.jpg" alt="" width="1170" height="675" srcset="https://api.yoda.design/wp-content/uploads/2024/03/design-1.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/design-1-300x173.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/design-1-1024x591.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/design-1-768x443.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p>This is where user research came in — our initial wireframes were extensively tested with users to guarantee a seamless experience. The prototype went through numerous iterations based on user feedback and insight.</p>
<p>Once we had the design system and mobile app in place, we also designed a streamlined, mobile-responsive landing page, amplifying Dbank’s visibility online.</p>
<p>&nbsp;</p>


<h2>The Product</h2>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-266 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/design-2.jpg" alt="" width="1170" height="600" srcset="https://api.yoda.design/wp-content/uploads/2024/03/design-2.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/design-2-300x154.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/design-2-1024x525.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/design-2-768x394.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-264 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/dbank-3.jpg" alt="" width="1170" height="600" srcset="https://api.yoda.design/wp-content/uploads/2024/03/dbank-3.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/dbank-3-300x154.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/dbank-3-1024x525.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/dbank-3-768x394.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>


<p>Dbank came to YODA with a singular mission: to become the country's first fully digital bank and transform Pakistan's financial landscape. The company had recently secured seed funding, and establishing a brand was essential not only for investor confidence but also for a successful market launch.</p>
<p>Pakistan, home to one of the world's largest financially underserved populations, was at the heart of Dbank’s commitment to redefine banking — making financial services universally accessible, and transcending geographical and socio-economic boundaries.</p>


Umaima Shoaib

YODA has been instrumental in bringing my team's vision to life. Their project management, content, and design teams are amongst the best ones I have worked with so far

<h3>The Brief</h3>
<p>With Dbank, our project goals were to design a mobile app and establish a strong brand presence in Pakistan&#8217;s competitive banking and fintech sectors. Our project’s key elements were product design, website development, and brand design.</p>


The Project

Brand Design

Website Development

Product Design

Dbank

<h2>Brand Design</h2>
<p>Reflecting Kisaan’s commitment to making agritech services accessible to all, the idea was to design a brand that is accessible to the local farming community in its visual language and tone of voice.<br />
Kisaan’s brand was based on 3 core values:</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-270 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/values.jpg" alt="" width="1170" height="68" srcset="https://api.yoda.design/wp-content/uploads/2024/03/values.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/values-300x17.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/values-1024x60.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/values-768x45.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<h4>Logo:</h4>
<p>For the logo, we ideated on multiple variations that could effectively convey the brand message. The final logomark was a visual blend of innovation and agriculture.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-271 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/logo.jpg" alt="" width="1170" height="313" srcset="https://api.yoda.design/wp-content/uploads/2024/03/logo.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/logo-300x80.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/logo-1024x274.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/logo-768x205.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-272 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/logo-2.jpg" alt="" width="1185" height="382" srcset="https://api.yoda.design/wp-content/uploads/2024/03/logo-2.jpg 1185w, https://api.yoda.design/wp-content/uploads/2024/03/logo-2-300x97.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/logo-2-1024x330.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/logo-2-768x248.jpg 768w" sizes="(max-width: 1185px) 100vw, 1185px" /></p>
<p>We ensured that the logomark is adaptable to Urdu to be relatable to Kisaan’s diverse audience.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-273 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/logo-3.jpg" alt="" width="1200" height="337" srcset="https://api.yoda.design/wp-content/uploads/2024/03/logo-3.jpg 1200w, https://api.yoda.design/wp-content/uploads/2024/03/logo-3-300x84.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/logo-3-1024x288.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/logo-3-768x216.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></p>
<h4>Typography and Color Palette:</h4>
<p>Kisaan&#8217;s brand colors, which are bright and vibrant, aimed to represent hope and optimism. We analyzed competitor brands’ colors to create a distinct palette that makes Kisaan stand out.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-274 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/type-1.jpg" alt="" width="1190" height="411" srcset="https://api.yoda.design/wp-content/uploads/2024/03/type-1.jpg 1190w, https://api.yoda.design/wp-content/uploads/2024/03/type-1-300x104.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/type-1-1024x354.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/type-1-768x265.jpg 768w" sizes="(max-width: 1190px) 100vw, 1190px" /></p>
<p>A nod to fresh soil and citrus, the color orange also denotes energy, passion, and growth, while purple symbolizes dignity, innovation, and creativity.</p>
<h4>Icons and Illustrations:</h4>
<p>We also designed iconography and illustrations for the brand’s communication. The aim was to craft creatives that are bright and dynamic, and accurately visualize Kisaan’s identity and processes.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-276 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/icons-1.jpg" alt="" width="1170" height="640" srcset="https://api.yoda.design/wp-content/uploads/2024/03/icons-1.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/icons-1-300x164.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/icons-1-1024x560.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/icons-1-768x420.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p>The icons were in simple line art form, to make the visuals easy to understand. The illustrations were vibrant and bold to make the brand stand out.</p>
<h4>Brand Collateral</h4>
<p>Once Kisaan’s brand identity had been planted, it was time to bring it to life. The main branded collateral consisted of business cards, uniforms, and badges for in-store service reps. and in-field lab assistants.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-277 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/collateral-1.jpg" alt="" width="1174" height="488" srcset="https://api.yoda.design/wp-content/uploads/2024/03/collateral-1.jpg 1174w, https://api.yoda.design/wp-content/uploads/2024/03/collateral-1-300x125.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/collateral-1-1024x426.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/collateral-1-768x319.jpg 768w" sizes="(max-width: 1174px) 100vw, 1174px" /></p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-278 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/collateral-2.jpg" alt="" width="1170" height="488" srcset="https://api.yoda.design/wp-content/uploads/2024/03/collateral-2.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/collateral-2-300x125.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/collateral-2-1024x427.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/collateral-2-768x320.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p>Our most fun playground, however, was the storefronts and service centers. To fully cement Kisaan’s brand, we designed customized graphics for the center locations, including signage, murals, and stickers.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-279 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/photo-1.jpg" alt="" width="1170" height="751" srcset="https://api.yoda.design/wp-content/uploads/2024/03/photo-1.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/photo-1-300x193.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/photo-1-1024x657.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/photo-1-768x493.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>


<h2>Photography and Videography</h2>
<p>A very crucial part of building the Kisaan brand was developing an extensive photo and video library. We wanted the brand visuals to be culturally relevant, human-centric, and natural; the team conducted shoots to capture Kisaan’s processes, people, and locations, to be used in the marketing and brand collateral.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-280 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/photo-2.jpg" alt="" width="1170" height="961" srcset="https://api.yoda.design/wp-content/uploads/2024/03/photo-2.jpg 1170w, https://api.yoda.design/wp-content/uploads/2024/03/photo-2-300x246.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/photo-2-1024x841.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/photo-2-768x631.jpg 768w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>


<h2>Website Development</h2>
<p>Part of our plan for Kisaan was to develop a comprehensive website, catering to a variety of audiences including potential partners, investors, and farmers. We conducted a design sprint to start the project off, engaging the key stakeholders in a ‘Think, Feel, Do’ exercise to effectively map our users and their journey. The insight gathered during our design sprint informed the main information architecture of our website. Our primary audience for the website was potential partners and investors.</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-281 size-full" src="http://api.yoda.design/wp-content/uploads/2024/03/website.jpg" alt="" width="1193" height="562" srcset="https://api.yoda.design/wp-content/uploads/2024/03/website.jpg 1193w, https://api.yoda.design/wp-content/uploads/2024/03/website-300x141.jpg 300w, https://api.yoda.design/wp-content/uploads/2024/03/website-1024x482.jpg 1024w, https://api.yoda.design/wp-content/uploads/2024/03/website-768x362.jpg 768w" sizes="(max-width: 1193px) 100vw, 1193px" /></p>


<p>Kisaan is a farming platform that uses real-time data to assist farmers in their practices and livestock management. Their primary focus lies in enhancing various facets of the agricultural value chain, including sourcing essential raw materials, conducting comprehensive soil testing, delivering crucial veterinary support, and actively engaging in marketing and distribution endeavors.</p>


Tania Aidrus

YODA's approach to user experience, website design and brand development in an under-served market has been transformative in building Kisaan. The Kisaan team found YODA to be a forward-thinking and bold agency that takes the time to understand their users & build products with empathy.  We would love to work with them again.

<h3>The Brief</h3>
<p>Ensuring a robust brand identity was extremely important in establishing a meaningful connection with the farming community, and laying the foundation for building a consumer base. Kisaan’s target audience was diverse – from local farmers with varying tech-literacy knowledge to local and international organizations looking to partner with the company.</p>


Our work