Skip to content

Dovashi

A learning identity, introduced through motion.

Bringing a learning brand to life through identity, product design and motion.

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.

  • Brand identity
  • Visual design
  • Motion & presentation
My role
Visual direction, product presentation & design
Focus
Brand identity · Visual design · Motion & presentation
Project status
Original published work
Period
Published portfolio work
Dovashi / Original published motion studyDribbble ↗

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.

Source materialOriginal motion

Dovashi / Original published motion study

Constraint to preserveIntroduce the identity

The original branding film connects Dovashi identity, product presentation and applications. Its scope is visual communication, separate from the lesson-design account.

The design questionRecognition & sequence

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.

01

Establish the identity message

Identify the visual character that should connect the learning brand and its applications.

02

Sequence recognition and usage

Introduce the identity before showing how it belongs in the product and wider brand material.

03

Explore the motion language

Connect logo, illustration and application scenes into a coherent presentation.

04

Review format adaptations

Check that a new composition preserves recognition rather than only repeating an earlier layout.

01 / The journey

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.

01020304
Current intent
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.

Dovashi / Task, interface and delivery dependencies
LayerIntroduce the identityEstablish visual characterConnect to the productShow applications
The taskIntroduce the identityEstablish visual characterConnect to the productShow applications
Visible interfaceIdentity openingIdentity openingProduct connectionBrand applications
Design checkpointThe 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 referenceIdentify 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.
RecoveryIncorrect 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.

Design exploration / Dovashi

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.

02 / Sequence & composition

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.

Storyboard reconstruction / Dovashi
01 / Identity opening
DovashiIntroduce the identity
OpeningResolve
Establish visual character

Establish a recognizable identity before adding variation.

02 / Product connection
DovashiConnect to the product
OpeningResolve
Connect to the product

Show how the visual language belongs inside the product.

03 / Brand applications
DovashiShow applications
OpeningResolve
Show applications

Extend the character into a coherent set of applications.

Try the interaction

Dovashi / Composition study

Reconstructed prototype
Dovashi01 / 03

View 01

Identity opening

Establish a recognizable identity before adding variation.

DovashiIntroduce the identity
Composition
Starting context

Introduce the identity

A local interaction study explaining the design principle. It does not submit data, operate the original product or reproduce an unverified historical prototype.
03 / Typography & guidelines

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.

Illustrative type-role specimenDovashi

Introduce the identity.
Show applications.

HeadingProduct connection24 / 30 px · regular
BodyHow can motion connect a learning brand’s identity with its product experience?16 / 26 px · regular
LabelShow applications12 / 18 px · regular
StateIncorrect response → explain the learning point → offer another attempt12 / 18 px · regular

Portfolio-font hierarchy illustration; the source does not establish the exact client font or token scale.

04 / Discussion & decisions

Keep character consistent as the application changes.

Discussion 01

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.

Discussion 02

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.

05 / Handoff & maintenance

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.

  1. 01

    Can the opening and final frame be recognized as the same brand?

  2. 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

5 chaptersApprox. 3 min readStory · Examples · Operating plan

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.

01

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.
02

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

Ready

Define the next action

Label the action and make its scope understandable before submission.

In progress

Explain what is happening

Preserve context and communicate that the operation is still underway.

Needs attention

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.
03

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
04

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.
05

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
Next projectTicketCo Terminal