Dovashi / Original published motion study
01 / Dovashi
The context
Brand identity and product experience for Dovashi, a language-learning product at Ridmik Labs. The published motion study connects the identity to the places people encounter the brand.
Reading the problem / Dovashi
Motion needs to leave a recognizable learning identity.
The published film connects brand character with product presentation. Its narrative is different from the learning app’s operational flow.
The original branding film connects Dovashi identity, product presentation and applications. Its scope is visual communication, separate from the lesson-design account.
How can motion connect a learning brand’s identity with its product experience?
Evidence: the project account and the attributed artifacts on this page. Process drawings and interaction studies are reconstructed explanations; numerical research or business results are included only where separately supported.
02 / Dovashi
The design focus
- Logo, illustration and visual language
- Brand applications and campaign presentation
- Motion that connects identity to product
The process / Dovashi
A direction.
A way to build it.
The film’s process is about recognition and application, separate from the product’s lesson-design journey.
A schematic of sequence and overlap, not a dated project schedule.
Establish the identity message
Identify the visual character that should connect the learning brand and its applications.
Sequence recognition and usage
Introduce the identity before showing how it belongs in the product and wider brand material.
Explore the motion language
Connect logo, illustration and application scenes into a coherent presentation.
Review format adaptations
Check that a new composition preserves recognition rather than only repeating an earlier layout.
How can motion connect a learning brand’s identity with its product experience?
The film moves from recognition to application. An opening identity moment gives the viewer a visual reference, and the following product and brand scenes show where that character belongs. This is a communication sequence, not the learner’s lesson flow documented on the product page.
Journey map / Dovashi
See the whole task in context.
Choose a step to connect the person’s intent with the interface and the design decision.
Introduce the identity
The original branding film connects Dovashi identity, product presentation and applications. Its scope is visual communication, separate from the lesson-design account.
- Interface context
- Identity opening
- Review question
- Does the illustration clarify the lesson or compete with the task?
Representative task sequence and recovery path, not a measured emotional curve or historical research map.
Behind the experience
From composition to a consistent deliverable.
For Dovashi, this map connects “Introduce the identity” to “Show applications”. Read across to follow the task, then select a layer to inspect the interface, design and delivery references behind it.
| Layer | Introduce the identity | Establish visual character | Connect to the product | Show applications |
|---|---|---|---|---|
| The task | Introduce the identity | Establish visual character | Connect to the product | Show applications |
| Visible interface | Identity opening | Identity opening | Product connection | Brand applications |
| Design checkpoint | The original branding film connects Dovashi identity, product presentation and applications. Its scope is visual communication, separate from the lesson-design account. | Establish a recognizable identity before adding variation. | Show how the visual language belongs inside the product. | Extend the character into a coherent set of applications. |
| Implementation reference | Identify the visual character that should connect the learning brand and its applications. | Introduce the identity before showing how it belongs in the product and wider brand material. | Connect logo, illustration and application scenes into a coherent presentation. | Check that a new composition preserves recognition rather than only repeating an earlier layout. |
| Recovery | Incorrect response → explain the learning point → offer another attempt | |||
A reconstructed delivery map: the implementation row summarizes design-process dependencies, rather than claiming to document the original backend architecture.
A connected identity-to-product story.
Reconstructed comparison of design approaches. These are review studies, not a claim that both directions were historically tested or shipped.
What this direction changes
A connected identity-to-product story
Lets each composition prepare the next learning-brand impression.
Storyboard the connection between identity and product.
These reconstructed frames divide the presentation into an identity opening, a product connection and brand applications. The sequence needs to establish a recognizable character before showing variation. Otherwise each attractive application risks reading as a separate visual idea.
Establish a recognizable identity before adding variation.
Show how the visual language belongs inside the product.
Extend the character into a coherent set of applications.
Try the interaction
Dovashi / Composition study
View 01
Identity opening
Establish a recognizable identity before adding variation.
Introduce the identity
Let the learning brand speak beyond the logo.
Distinguish the wordmark, learning message and supporting application copy. Each needs a recognizable role when the composition changes through motion.
Introduce the identity.
Show applications.
24 / 30 px · regular16 / 26 px · regular12 / 18 px · regular12 / 18 px · regularPortfolio-font hierarchy illustration; the source does not establish the exact client font or token scale.
Keep character consistent as the application changes.
Does the illustration clarify the lesson or compete with the task?
Identity applications can vary in composition while retaining a clear visual relationship. The mark and illustration language provide continuity without requiring every frame to repeat the same arrangement.
How should corrective feedback encourage another attempt without resembling a system error?
The product should feel like a natural home for the identity. Motion can show that relationship, but it should not be mistaken for evidence about lesson performance or product growth.
Package a visual language that can be adapted.
The published animation combines logo, illustration and brand applications. A production reference should identify the identity assets and their relationship across scenes, so a new cut or format preserves the brand’s character rather than only reproducing one finished composition.
A future Claude-assisted brand brief should reference the approved identity and the purpose of the new format. Keep language-learning product outcomes outside the motion deliverable’s claims, and review any new application as an extension of the same visual world.
The film demonstrates original brand and motion work; the linked Dovashi product case study covers the learning experience.
Accessibility & standards
Access belongs in the design.
For Dovashi, carry accessibility requirements from the core user journey into component states, prototypes and engineering acceptance criteria.
WCAG 2.2 AA · EN 301 549 · APCA · WAI-ARIA · Platform guidance
Turn the palette into usable roles
Document approved text/background combinations for body text, large text and UI components. Assess functional content against WCAG 2.2 AA; use APCA to refine type size and weight.
Carry identity without losing meaning
Provide non-color cues, readable type hierarchy and accessible template reading order. Review captions and a reduced-motion alternative for product films and animated applications.
Make the rules usable in production
Include accessible color tokens, component states and content guidance in designer, developer and Claude/Codex references. Logo presentation alone does not establish interface accessibility.
Review scope & standards references
These are design references and review priorities, not a claim that this historical project passed a WCAG audit. Record criterion-level evidence, assistive-technology and device results, unresolved issues and retest outcomes before making a conformance statement.
APCA supplements the WCAG 2.2 contrast checks; it does not replace them. WCAG 3 remains a draft. EN 301 549 v4.1.1 is the latest published edition checked on 6 November 2026; its publication and its formal EU legal citation are separate matters. Confirm the applicable procurement or legal baseline with the client.
Outcomes & scope
What the work delivers.
- Original published branding animation. Product milestones belong to the wider team; the film showcases my visual and motion work.
Results are described within the documented project scope. Illustrative studies are identified separately from original project artifacts.
Review & next iteration
What needs to hold up in use.
Use these questions to review Dovashi against the behavior the design is intended to support.
- 01
Can the opening and final frame be recognized as the same brand?
- 02
Does motion leave enough time for the central message?
Project-specific acceptance questions for a future review, not reported usability-test results.
Reflection / Dovashi
What I’d carry forward.
Motion can introduce the character of a learning brand before explaining every feature. The sequence works best when its closing moment still leaves the product recognizable.
Go deeper into the systemDesign decisions, examples
and developer handoff.5 detailed chapters
Design decisions / A practical system walkthrough
An identity that belongs to the learning experience.
Dovashi’s published brand and motion work connects identity, illustration, interface and marketing presentation. My Ridmik Labs contribution included branding guidelines, logo, illustrations and icons alongside the language-learning product experience. The goal of this walkthrough is to explain how those parts support one recognizable story.
Brand & product problem
Make learning feel approachable without losing clarity.
Language learning asks people to return repeatedly, understand feedback and build confidence over time. The brand must help that experience feel approachable, while the interface remains clear enough to support vocabulary, practice and progression. Attractive illustration cannot substitute for understanding what to do next.
The earlier portfolio frames Dovashi around a personalized language-learning experience for Bangladesh and Arabic-speaking regions. My contribution included logo, illustrations, icons, culturally relevant presentation and Android UX based on Material Design principles. Those responsibilities connect the brand to the product rather than placing identity work in a separate layer.
The published motion presentation shows how that visual language can extend into applications and communication. A consistent mark, illustration language and hierarchy allow different formats to feel related even when their composition changes. The portfolio film is a presentation of that work, not a claim that each pictured application became a live campaign.
Working examples / Illustrative scenarios
A learning message outside the app
- The situation
- A social asset introduces an activity a learner can later encounter in the product.
- The design decision
- Keep identity, illustration style and message hierarchy connected to the product’s own visual language.
- Why it matters
- Marketing sets an expectation that the product should be able to fulfill visually and conceptually.
Identity, illustration & motion
Let each part of the identity do a clear job.
The mark establishes recognition, typography organizes the message, illustration adds character and motion directs attention over time. A guideline should describe those responsibilities before presenting a wall of applications. That makes it possible to explain why an asset works and how another designer can create the next one.
For a motion handoff, describe the purpose of the sequence, its hierarchy, the order in which information appears and the relationship between the logo and the product content. Separate a promotional film from functional feedback inside the app. They can share character without sharing the same pacing or interaction requirement.
The original images and film remain the visual evidence. This public walkthrough does not invent exact color values, easing curves or a private type scale that have not been supplied. The practical extension is a documented set of approved assets, examples and motion principles that can be reviewed and maintained.
Example behavior specification / Illustrative, not a client screenshot
Define the next action
Label the action and make its scope understandable before submission.
Explain what is happening
Preserve context and communicate that the operation is still underway.
Offer a way forward
Describe the problem in text and provide an appropriate recovery action.
Working examples / Illustrative scenarios
A compact brand lockup
- The situation
- An identity application has less room than a presentation cover.
- The design decision
- Choose an approved compact treatment and preserve legibility rather than squeezing every element from the full composition into the space.
- Why it matters
- Recognition depends on the relationship of the parts, not simply on including all of them.
Developer handoff plan
Connect the learning composition to the intended response.
A Dovashi composition needs to explain whether it supports a lesson, product state or promotional scene. The approved illustration, identity and content references should establish that purpose before the receiving developer or motion designer adapts the layout.
For a learning state, inspect the instruction and response. For a film, inspect recognition and reading time. These are related uses of the same brand, but the acceptance condition is different and should be written accordingly.
Working examples / Illustrative scenarios
Example handoff packet
- The situation
- A developer or motion designer needs to turn an approved learning-product composition into an interface state or a promotional sequence.
- The design decision
- Include the problem, flow, component references, state matrix, responsive notes, content examples and acceptance checklist in one linked packet.
- Why it matters
- Design intent survives the transition from Figma to code, and questions can be resolved against an explicit decision rather than a screenshot.
Review and acceptance
- Approved frame and named component/variant references
- State and content rules, including failure and recovery
- Responsive and platform behavior; keyboard and focus expectations
- Acceptance notes, implementation owner and unresolved questions
- Design review of the built component and complete task flow
Claude & Codex preparation plan
Keep a proposed campaign inside the original identity.
A future Claude-assisted campaign concept should start with approved source copy and the existing identity assets. Name the audience and communication goal so a visual variation is judged by what it explains, not simply whether it looks lively.
Keep example learning content marked as an example and review linguistic meaning before use. This is a proposed extension of the published branding work, not a claim that the original film or lessons were generated by AI.
Working examples / Illustrative scenarios
Illustrative implementation brief
- The situation
- Prepare a brand-consistent learning campaign concept using approved identity assets, original source copy and clearly marked example content.
- The design decision
- Build within the Dovashi system. Reuse approved components and semantic tokens; list any missing state or pattern before adding one.
- Why it matters
- A constrained brief makes consistency inspectable. It is easier to review an explicit exception than to discover an undocumented visual decision after it spreads.
Example reference structure — planning illustration
/design/foundations.md Color roles, type, spacing, identity
/design/components.md Variants, behavior, code references
/design/patterns.md Approved task-level compositions
/design/examples/ Reviewed visual and content examples
/design/CHANGELOG.md Version, rationale, migration notes
Task brief:
1. State the user problem and acceptance conditions.
2. Link the approved reference and existing component.
3. Reuse tokens; document exceptions.
4. Verify states, responsiveness and accessibility.
5. Return a preview and a concise change summary.Governance & update plan
Extend the illustration language without replacing it.
A new illustration or campaign format should be compared with the existing mark, character and product applications. Identify the feature that makes it part of the same visual language before adding it to the reference set.
Record the application and the reason for any accepted variation. The resulting guidance should help another designer recognize a valid extension without copying the exact composition of the original motion study.
Working examples / Illustrative scenarios
An update that stays synchronized
- The situation
- A new illustration or campaign format needs to remain recognizable alongside the original identity and interface work.
- The design decision
- Change the shared definition, update the component and its examples, then document migration and review the affected output.
- Why it matters
- Consistency is maintained by a traceable decision and aligned references, rather than relying on everyone remembering a conversation.
Review and acceptance
- Request: what problem is the change solving?
- Decision: who reviews and approves the shared pattern?
- Delivery: Figma, code and AI references agree
- Migration: affected screens and retired variants are identified
- Validation: real content, states and representative generated output are reviewed