Industry
Education / EdTech
Content refinement helped important learning information and interface messaging work more clearly inside the redesigned product hierarchy.
Ispeak was an EdTech mobile application created to help students learn English through games, quizzes and animation. Vyasti worked as the strategy and product-design partner, shaping the experience from scratch across research, information architecture, user journeys, wireframes, mobile UX, UI, prototyping and the wider visual system.
The supplied project scope covers product strategy, UX, UI, prototypes and visual design. Mobile application engineering or development was not part of Vyasti's documented engagement.
Games, quizzes and animation gave Ispeak opportunities to make English learning more engaging. The product-design challenge was to organize those experiences inside a simple, accessible and coherent mobile system.
A game, quiz or visually engaging learning screen will communicate the product concept best.
Ispeak's product proposition combined English education with games, quizzes and animation, giving students multiple ways to interact with the learning experience.
An educational mobile application for students learning English through interactive experiences including games, quizzes and animation.
Games, quizzes and animation were explicit parts of the product described in the brief.
Learning experiences could use game-like interaction to move students beyond passive reading.
Quiz-based interactions created structured moments for students to respond and progress through learning.
Animation brought another visual layer into the learning experience while the interface still needed to remain simple and understandable.
The client needed a new mobile application designed from scratch while preparing to launch a new product or service.
Games, quizzes, animation, product journeys and multiple user contexts needed enough structure to operate as one coherent experience rather than a collection of independent activities.
The project paired premium product presentation with practical UX goals: simplify the experience and reduce friction in important journeys.
Give the new product a stronger, more consistent and more professional digital identity.
Make core information, activities and actions easier for users to understand.
Remove unnecessary interface complexity from important product journeys.
The explicit experience direction was simple, minimal, human, accessible and fast.
Ispeak needed a structured application system capable of supporting complex workflows, multiple roles, reusable components and real product states across more than thirty screens.
This was a strategy and design engagement. No production mobile development service is documented.
A 30+ screen application required shared hierarchy, reusable patterns, product-state logic and enough visual consistency for games, quizzes and other learning interactions to still feel like one product.
Mobile application / product screens.
Information architecture and primary journeys were simplified first. Visual direction, role-based experiences and the wider interface system could then grow around a clearer product foundation.
Content refinement helped important learning information and interface messaging work more clearly inside the redesigned product hierarchy.
The project included original visual work beyond basic interface implementation, allowing the learning product to develop a more distinctive digital language.
Figma was the documented product-design environment for Ispeak, supporting the UX, UI, design-system and interactive-prototype work. No engineering technology is attributed to Vyasti.
The resulting mobile experience became significantly easier to use, presented the company's offering more clearly and created a stronger, more consistent digital identity. The project also established a stronger foundation for future marketing and growth. No verified traffic, conversion, revenue, adoption, engagement or retention metrics were supplied.
Ispeak was created as an educational mobile product for students learning English through games, quizzes and animation. Vyasti's three-month engagement focused on turning that learning concept into a structured product experience across more than thirty screens. The work included UX research, information architecture, wireframing, user journeys, role-based experience logic, mobile UX, mobile UI, prototype design, interactive prototyping, custom graphics, custom imagery, icons, illustrations, animation and motion.The design direction was intentionally simple, minimal, human, accessible and fast, with stronger information hierarchy and reusable product logic helping the application support engaging learning content without becoming visually or structurally confusing. Vyasti's documented role was strategy and product design — not mobile application development.
Ispeak combined English learning with games, quizzes and animation. That gave the product more ways to engage students, but also more interaction patterns to organize. The design challenge was to preserve the energy of the learning experience while keeping the application simple, minimal, accessible and understandable across more than thirty screens.
Games, quizzes and animation each added useful interaction possibilities. The interface still needed enough discipline that students could understand what to do without the product's visual and interaction layers competing for attention.
Interactive experiences created opportunities for playful learning while still requiring clear navigation and consistent behaviour.
Questions, responses and feedback introduced additional states that needed to remain understandable.
Movement could make the product feel more alive without becoming another source of visual distraction.
Games, quizzes and animation were fundamental parts of the product concept, so removing interaction was not the solution.
The product still needed to feel simple, minimal, human, accessible and fast despite the number of interaction types it contained.
The supplied project brief identifies simplification of a complex application workflow as one of the central design challenges.
Games, quizzes, animated moments and the wider product experience could not be designed as disconnected activities. The application needed clear relationships between its screens, actions and states.
If the architecture and journeys remained confusing, minimal styling alone would not make the learning experience easier to use.
The supplied project material confirms multiple user roles but does not identify those roles. The challenge therefore remains at the product-system level.
Role variation needed to coexist with shared navigation, hierarchy, visual language and reusable interaction patterns.
Ispeak's documented scope exceeded thirty product screens. The design therefore needed enough shared logic to keep navigation, hierarchy, interaction and visual behaviour consistent as the application expanded.
Mobile application / product screens.
Vyasti also rewrote and improved existing client content, so information clarity formed part of the wider experience problem.
Important learning and interface information needed enough hierarchy that users could understand what required attention without every element competing equally.
The product direction called for a premium yet uncomplicated experience, making information priority essential to the design.
Empty states, errors, confirmations and edge cases were explicitly part of the design requirement.
What should the interface communicate when expected content or activity is not available?
Unexpected conditions needed clear feedback rather than adding another layer of confusion.
Users needed to understand when an interaction had produced a result.
The design language needed to remain useful outside the primary ideal journey.
Strong visual hierarchy was required to keep the experience premium without making it complicated.
The product needed clear priority between the learning activity, supporting information and the actions required to move through the experience.
Ispeak needed a new application designed from scratch as the client prepared to launch the product.
Information architecture, journeys, hierarchy, component logic, visual direction and interface behaviour all needed to be shaped as part of the original mobile experience.
Designing from scratch made system thinking important because early patterns would influence the wider product as it expanded.
Vyasti's documented role was strategy and product design. The engagement included UX research, information architecture, wireframing, UX design, UI design, mobile app UX/UI, prototype design, interactive prototyping, custom graphics, custom app imagery, icons, illustrations, animation and motion graphics.Mobile application development, Android development, iOS development, backend development or production engineering were not included in the supplied scope and should not be attributed to Vyasti.
Ispeak needed to bring English learning, games, quizzes and animation into one mobile experience while managing a complex application workflow, multiple user roles, more than thirty screens, reusable component requirements and non-ideal states such as errors, empty conditions and edge cases.At the same time, the intended experience was deliberately restrained: simple, minimal, human, accessible and fast.The challenge was therefore not choosing between engagement and clarity. It was designing a system where both could coexist.
Ispeak's central design tension came directly from its product concept. Games, quizzes and animation could make English learning more interactive, but each additional interaction also increased the amount of interface logic the product needed to manage. That complexity extended across more than thirty screens and a product architecture that also needed to support multiple user roles, reusable components, errors, empty states and edge cases.The experience still needed to remain simple, minimal, human, accessible and fast. Vyasti therefore needed to preserve the energy of an interactive learning product while removing unnecessary structural and interface complexity from the student's experience.
Ispeak needed games, quizzes and animation to remain central to the learning experience. Vyasti's approach was therefore not to flatten the product into a conventional education interface. We simplified the architecture, clarified journeys, established role-based logic and created reusable interface rules so interactive learning could remain engaging without becoming confusing.
Ispeak could remain expressive because its structure did the quiet work underneath: clearer information relationships, predictable interaction patterns, stronger hierarchy and reusable product logic.
Each stage reduced complexity before the next layer of the product became more detailed.
Begin with the product concept, English-learning context, interaction requirements and wider application structure.
Organize information and actions before adding the richer layers of games, quizzes and animation.
Define how users move through important interactions before treating individual screens as finished compositions.
Allow different user contexts to change information priority while maintaining a shared product language.
Establish screen structure, content priority and interaction relationships before introducing the detailed visual system.
Give the application enough personality for interactive learning while preserving simple, minimal and accessible behaviour.
Create shared hierarchy, spacing, components and interaction rules capable of supporting the wider application.
Keep different learning activities expressive while making important actions and feedback behave consistently.
Account for empty conditions, errors, confirmations and edge cases as part of the real application experience.
Extend the interface through custom graphics, imagery, icons and illustrations while protecting clarity.
Use interactive prototyping to evaluate navigation, progression and screen relationships beyond static UI.
Use motion to support feedback and continuity without overwhelming the learning task.
Apply the established architecture, interaction logic, visual language and state behaviour across the documented product scope.
Ispeak's underlying architecture needed enough clarity that games, quizzes and animated experiences could be added without forcing users to decode the navigation around them.
Mapping primary journeys helped separate the learning activity itself from the navigation and feedback users needed around it.
The brief confirms multiple user roles but does not identify them. Vyasti therefore structured role-based experience logic at the system level: allow context to vary while maintaining shared navigation, hierarchy and interaction behaviour.
Wireframes allowed structural decisions to be evaluated without visual personality masking hierarchy problems.
Content priority, actions, navigation relationships and screen structure could be solved before detailed visual design was introduced.
Visual energy became a layer on top of usable structure rather than a substitute for it.
Ispeak's visual direction needed enough personality for games, quizzes and animation while still supporting the explicit experience goals of simplicity, minimalism, humanity, accessibility and speed.
The system needed to support different learning interactions while maintaining recognizable product behaviour.
Games, quizzes and animated learning moments needed enough variation to remain engaging, but the surrounding product logic still had to feel familiar.
Allow richer interaction while keeping entry, action and progression understandable.
Make question, response and feedback states clear enough that the interface does not interrupt the learning task.
Use movement as a supporting layer rather than another competing element on the screen.
Empty states, errors, confirmations and edge cases were treated as part of the product system rather than cleanup work after the main interface was finished.
Explain what the current condition means even when expected content is unavailable.
Make unexpected conditions understandable without creating another layer of friction.
Communicate clearly when an action or interaction has produced a result.
Extend the same product language beyond the primary happy path.
Custom graphics, imagery, icons and illustrations helped build a more distinctive visual language around the product while remaining subordinate to clarity and interaction.
Interactive prototyping allowed the wider experience to be evaluated through relationships between screens rather than visual quality alone.
This was especially useful for an experience containing multiple interaction types, where the transition between screens matters as much as any one screen.
The prototype connected individual design decisions into a more complete representation of the intended mobile experience.
Interface animation and motion graphics extended the interactive layer while remaining consistent with the simple, minimal and accessible product direction.
Movement can help communicate that an interaction has produced a result.
Animation can support the relationship between one learning moment and the next.
Motion remains useful only while it supports rather than competes with the learning activity.
The documented Ispeak product-design scope exceeded thirty mobile application screens.
Reusable hierarchy, shared interaction logic, role-based variation, product-state behaviour and visual language allowed the wider application to inherit one recognizable system.
Mobile application / product screens.
Figma was the documented environment used for Ispeak's UX, UI, mobile product design and interactive prototyping. No development stack should be attributed to Vyasti from the supplied project material.
Vyasti's approach moved Ispeak from a new English-learning product concept into a structured mobile experience by simplifying information architecture, mapping primary journeys, establishing role-based experience logic, wireframing hierarchy, defining a controlled visual direction and building reusable interface rules. Games, quizzes and animation could then operate inside a more consistent product language, supported by real product states, original graphics, imagery, icons, illustrations, interactive prototyping and motion across more than thirty screens.
Ispeak was a strategy and product-design engagement. Vyasti's documented work includes UX research, information architecture, wireframing, UX design, UI design, mobile app UX/UI, prototype design, interactive prototyping, custom graphics, imagery, icons, illustrations, interface animation and motion graphics.Mobile application development, Android engineering, iOS engineering, backend development or production engineering should not be attributed to Vyasti.
Ispeak's product concept already contained the ingredients for an energetic learning experience: games, quizzes and animation. Vyasti's task was not to reduce that energy. It was to build the product structure that could contain it. The process began with research and simplified information architecture, moved into mapped journeys and role-based experience logic, and used wireframes to establish hierarchy before detailed visual design.The interface direction was then developed around a deliberate balance: playful enough to support interactive English learning, but simple, minimal, human, accessible and fast enough that the interface itself did not become another learning obstacle.Reusable product logic created consistency across different activity types. Empty states, errors, confirmations and edge cases extended that system beyond ideal journeys. Custom graphics, imagery, icons and illustrations established the visual language, while interactive prototyping and motion helped communicate how the interface behaved between screens. More than thirty screens ultimately inherited those shared rules, turning the product from a collection of interactive learning moments into one coherent mobile experience.
Ispeak combined games, quizzes and animation inside a thirty-plus-screen English-learning product. Vyasti connected those different learning modes through clearer journeys, shared interaction rules, stronger hierarchy, reusable components, real product states and one coherent visual language.
A game could feel different from a quiz. An animated learning moment could feel different again. The surrounding experience still needed recognizable hierarchy, actions, feedback and navigation so students were not relearning the interface every time the activity changed.
Use original Ispeak product UI.
Prefer a screen with clear question and response UI.
Use original animated or illustration-led interface.
Different learning modes could retain their own personality while operating inside a common interaction system.
The learning task remained visually dominant while supporting information and controls stayed secondary.
Shared patterns helped preserve continuity across more than thirty screens.
Empty states, errors, confirmations and edge cases were included in the wider product system.
The interface system provided continuity around different types of educational interaction while allowing each mode to retain its own visual energy.
Clear context, a recognizable primary action, understandable feedback and an obvious next step gave different learning activities a common structural rhythm.
The brief confirms multiple user roles but does not identify them, so this section intentionally presents role-based UX without inventing personas.
Information priority and journey context could vary between users while shared navigation, hierarchy and visual language helped the wider application remain coherent.
The objective was shared product behaviour rather than rigid visual repetition.
Typography, spacing, hierarchy, components and interaction states created enough continuity that users could focus on the learning activity rather than repeatedly interpreting the UI.
Empty conditions, errors, confirmations and edge cases were included as part of the actual product-design system.
01
02
03
04
05
06
07
08
09
10The documented Ispeak engagement extended across more than thirty product screens. Shared hierarchy, reusable components, state logic and visual language allowed those screens to behave as parts of one learning product rather than isolated compositions.
Custom graphics, imagery, icons and illustrations gave Ispeak a more distinctive visual character while remaining subordinate to the learning task.
Original visual assets could make games, quizzes and animated experiences feel more engaging while the underlying interface continued to prioritize hierarchy, readability and accessibility.
Interactive prototyping made navigation, progression, response and screen relationships visible across the wider experience.
A learning product containing different activity types requires more than strong individual screens. Prototype connections made the intended progression and interaction continuity easier to inspect.
Interface animation and motion graphics were part of the documented design scope.
Motion could reinforce interaction feedback and the relationship between product states while preserving the simple, minimal and accessible experience direction.
Use the broadest useful project canvas available—ideally showing flows, components, final screens or prototype relationships together.
Ispeak's documented UX, UI and interactive prototype work was created in Figma. Showing the broader project canvas makes the system behind the thirty-plus-screen engagement visible.
Ispeak's solution connected games, quizzes and animated English learning through clearer journeys, role-based experience logic, stronger hierarchy, reusable components and real product states. Custom graphics, imagery, icons and illustrations added personality, while interactive prototyping and motion extended the experience beyond static screens. Those shared decisions could then scale across the documented thirty-plus-screen product system.
Ispeak was a strategy and product-design engagement. Vyasti's documented work covers UX research, information architecture, wireframing, UX design, UI design, mobile app UX/UI, prototype design, interactive prototyping, custom graphics, custom imagery, icons, illustrations, interface animation and motion graphics.Mobile application development, Android engineering, iOS engineering, backend development or production engineering should not be attributed to Vyasti.
Ispeak needed to make English learning more interactive without making the product harder to navigate. The solution was therefore not one visual style applied across every screen. It was a shared product language capable of supporting different kinds of learning interaction. Games could remain playful. Quizzes could prioritize questions, responses and feedback. Animated learning moments could introduce more visual energy. Role-based experiences could change information emphasis.Beneath those differences, reusable hierarchy, components, interaction rules and product-state behaviour created continuity.Empty states, errors, confirmations and edge cases extended that system beyond ideal journeys. Custom graphics, imagery, icons and illustrations gave the application a more distinctive visual identity, while interactive prototyping and motion communicated how the experience behaved between static screens. Across more than thirty screens, the result was not visual sameness. It was enough consistency that different learning experiences could still unmistakably belong to the same product.
Ispeak combined English learning, games, quizzes and animation across more than thirty mobile screens. The design work brought those experiences under a clearer, more consistent product system—making the application significantly easier to use while strengthening how the product presented itself digitally.
Games, quizzes and animated interactions could retain their individual energy while clearer hierarchy, reusable patterns, role-aware experience logic and structured product states made the wider application easier to navigate and understand.
Documented mobile product-design scale.
Strategy and product-design engagement.
Documented UX, UI and prototype environment.
Product strategy and design—not app development.
The impact is best understood through the documented changes in clarity, usability, consistency and product-system quality rather than unsupported commercial or learning-performance figures.
Each additional interaction type increased the number of states, journeys and interface relationships that users might need to understand.
Clearer information architecture, hierarchy, reusable patterns and state behaviour created continuity without forcing every learning activity to look identical.
The project documentation supports qualitative improvement in usability, clarity, digital identity and future product foundation.
The product experience became significantly easier to use as journeys, hierarchy and interface relationships were simplified.
Better structure and information hierarchy made the product and what it offered easier to understand.
Shared interface rules and original creative assets helped more than thirty screens feel like one product.
A structured product system established a stronger foundation for future marketing and growth.
The design system strengthened the distinction between the learning task, supporting information, primary action and feedback—reducing the amount of interface interpretation required around each activity.
Games, quizzes and animation did not need visual sameness. They needed recognizable product behaviour around them.
Interactive activities could retain more visual energy while still inheriting common hierarchy and navigation logic.
Questions, responses and feedback could use familiar interaction principles so the learning task stayed clear.
Motion and illustration could add personality without replacing clarity as the dominant interface priority.
More than thirty screens required product logic that could survive beyond the showcase interfaces.
Shared hierarchy, component behaviour, product states and visual rules reduced unnecessary variation across the wider application.
Mobile application / product screens.
Product quality extended into empty conditions, errors, confirmations and edge cases rather than stopping at ideal screens.
More understandable when expected content was unavailable.
Clearer feedback when an interaction did not behave as expected.
More visible understanding of successful actions and responses.
Shared product rules extended outside primary flows.
Custom graphics, imagery, icons, illustrations and interface animation extended the product beyond generic education UI, while shared hierarchy and interface patterns preserved consistency.
The documented result includes a stronger foundation for future marketing and growth. That foundation came from making the product easier to present, easier to understand and more internally consistent.
Growth does not become easier because a product has more screens. It becomes easier when those screens communicate one clearer product.
A complete Figma canvas or strong multi-screen composition is the best evidence for the scale and consistency of the Ispeak design engagement.
Prefer an image where games, quizzes, standard product screens, states and visual assets can be seen together.
The complete system shows how multiple learning modes, user contexts, interface states and creative assets could operate across more than thirty screens while remaining connected by shared design logic.
No verified figures were supplied for student learning improvement, downloads, active users, adoption, completion rates, retention, engagement, conversion, revenue or commercial performance. Those outcomes should therefore not be attributed to Vyasti.The documented impact is qualitative: the mobile experience became significantly easier to use, the product offering became clearer, the digital identity became stronger and more consistent, and the work created a stronger foundation for future marketing and growth.
Vyasti structured Ispeak's English-learning experience around clearer information architecture, stronger hierarchy, mapped journeys, reusable interface logic, role-based UX and real product-state behaviour. Games, quizzes and animation could remain visually distinct while operating inside a more consistent interaction language. Original graphics, imagery, icons, illustrations, prototypes and motion extended that system across more than thirty screens. The result was a clearer and easier mobile experience, a stronger and more consistent digital identity, and a better foundation for future marketing and growth.
Ispeak should not be presented as a case study about invented download numbers, retention percentages or learning-performance claims. Its strongest documented result is visible inside the product itself. A mobile application combining English learning, games, quizzes, animation, multiple user roles and more than thirty screens became easier to understand because the complexity underneath was given stronger structure.Information architecture became clearer. Important journeys were prioritized. Role-based contexts could vary without abandoning the shared product language. Reusable components created continuity. Empty states, errors, confirmations and edge cases remained part of the designed experience. Custom graphics, imagery, icons, illustrations and motion added personality without making the interface less coherent. The outcome was a clearer learning product, a stronger digital identity and a more scalable design foundation—while Vyasti's documented contribution remained strategy and product design, not mobile application engineering.
Ispeak needed different kinds of learning interaction to work across more than thirty screens without becoming a collection of unrelated experiences. Vyasti structured the product around information architecture, journeys, role-aware UX, reusable components, clear hierarchy, real product states, original visual assets, prototypes and motion—all inside one Figma-based design system.
Ispeak did not need every screen to look identical. It needed users to recognize how the product worked even when the learning activity changed from a game to a quiz or an animated experience.
Simplified information architecture created the structural foundation for the wider mobile experience.
The learning experience became easier to understand when important information and primary actions followed a clearer hierarchy across the product.
Games, quizzes and animated experiences could sit inside the same product architecture instead of each creating a separate navigation logic.
More expressive interactions could remain playful while inheriting shared hierarchy, actions and feedback behaviour.
Question, response and confirmation states could follow recognizable patterns so users remained focused on the learning task.
Motion and illustration could add personality while the surrounding experience maintained the same basic product logic.
The project documentation confirms multiple user roles but does not identify them, so the system remains intentionally role- agnostic in this case study.
Different user contexts could alter information emphasis and journey priorities while navigation, hierarchy and interface behaviour remained familiar.
Strong hierarchy allowed richer visual treatment without forcing every element to compete equally for attention.
Primary learning activity, important action, supporting information and visual personality were deliberately treated as different levels of interface priority.
The system accounted for moments where expected content or activity was not available.
Unexpected conditions needed clear feedback rather than creating additional interaction uncertainty.
Successful actions and responses needed visible confirmation so users understood what happened.
The same product language extended beyond the primary happy path into less common conditions.
Original graphics, imagery, icons and illustrations extended the product identity beyond generic education UI.
Creative assets brought more character into games, quizzes and animated experiences while the underlying hierarchy protected clarity and usability.
Use a zoomed-out Figma view showing as much of the real Ispeak design system as possible.
Ideally include wireframes, flows, polished UI, activity screens, components, states or prototype relationships in the same composition.
Figma was the documented design environment used for Ispeak's research-driven UX work, wireframes, mobile UI and interactive prototype. No engineering stack is attributed to Vyasti.
Interactive prototyping connected static designs into journeys, making progression, navigation, actions and state relationships easier to evaluate as one experience.
Interface animation and motion graphics extended the experience beyond static UI while remaining subordinate to clarity and the learning task.
The documented product-design engagement extended across more than thirty mobile screens.
Reusable components, hierarchy, role-aware behaviour, product states and visual rules gave the wider application a more consistent foundation as it expanded.
Mobile application / product screens.
Research, information architecture, journeys and role-based UX created the foundation beneath the finished interface.
Mobile UI, reusable components, states, hierarchy and original creative assets created the wider product language.
Interactive prototypes and motion communicated how the experience was intended to behave between the static screens.
Ispeak was a strategy and product-design engagement. Vyasti's documented contribution includes UX research, information architecture, wireframing, UX design, UI design, mobile app UX/UI, prototype design, interactive prototyping, custom graphics, imagery, icons, illustrations, interface animation and motion graphics.Mobile application development, Android engineering, iOS engineering, backend development or production engineering should not be attributed to Vyasti.
Ispeak's design system connected learning architecture, mapped journeys, multiple user contexts, reusable components, visual hierarchy, games, quizzes, animated experiences, product states, custom graphics, imagery, icons, illustrations, interactive prototypes and motion. Figma became the environment where those decisions remained connected as the product expanded beyond thirty screens.
The technology story behind Ispeak is deliberately simple: Figma.The complexity lived in the product decisions made inside that environment. Vyasti moved from research and simplified information architecture into mapped journeys, role-aware UX, wireframes, reusable components, detailed mobile UI and real product-state behaviour. Games, quizzes and animated learning experiences could then vary without abandoning the shared interaction language. Custom graphics, imagery, icons and illustrations added character, while prototypes and motion communicated how the experience moved between screens.More than thirty product screens ultimately inherited those shared rules. The output was a coherent learning-product design system—not a claim that Vyasti engineered or developed the production mobile application.
Ispeak extended across more than thirty screens and multiple layers of product design—from structure and wireframes to games, quizzes, illustration, role-based UX, product states, prototype connections and motion. This gallery is designed to show that breadth as evidence.
Prioritize original Figma screens, wireframes, game and quiz UI, illustration work, product states, prototype flows and motion frames. Use screenshots as proof of Vyasti's design work—not as evidence that Vyasti developed the production application.
Use a game, a quiz and an illustration or animation-led screen if possible. The contrast between them should make the core product-design challenge visible before the visitor reads the rest of the case study.
Use original game-oriented screens where the learning activity, interaction and visual personality are clearly visible.
These screens should demonstrate how playful interaction lived inside the same structured product language as the rest of the application.
Question, response and feedback screens work best as a sequence because the product logic becomes visible between them.
Use a real illustration-led or animation-related Ispeak frame rather than decorative artwork created only for the case study.
Prefer a composition where the visual layer is clearly part of the actual learning experience.
Illustration and animation gave Ispeak another way to make English learning feel more engaging while the surrounding interface maintained clear hierarchy and navigation.
A wide wireframe flow is the clearest proof that hierarchy and journeys were solved before detailed UI.
Use multiple connected screens where possible rather than a single isolated wireframe.
Wireframes helped establish content priority, screen relationships and interaction flow before the final visual language was expanded across the application.
The project documentation confirms multiple user roles but does not identify them. Use authentic role-specific screens without inventing role names in the case-study copy.
Use one real role-specific interface showing how content and actions changed for that context.
Pair it with a second user-context screen where the role changes but the overall interface logic remains recognizable.
Empty conditions, errors, confirmations and edge cases show that the design extended beyond the happy path.
Use original graphics, imagery, icons and illustrations created for Ispeak.
The visual language extended beyond basic UI components into graphics, imagery, iconography and illustration while the interface system preserved hierarchy and consistency.
Mix learning modes, utility screens, states and supporting interfaces so the archive demonstrates range rather than repetition.
Use two connected screens from the same genuine Ispeak prototype flow.
Navigation, progression, feedback and interaction continuity became visible once static frames were connected into an actual sequence.
Use still frames from the actual interface-animation or motion work, not decorative animations created later for presentation.
Motion was useful when it helped communicate a response, transition or relationship between states rather than simply making the interface feel more active.
The strongest final proof is a complete Figma view where the breadth of the product-design engagement becomes immediately visible.
Ideally show wireframes, final screens, learning modes, states, components or prototype relationships together.
The full project canvas makes the depth of the engagement easier to see: UX structure, mobile UI, activity variation, states, visual assets, prototype flows and the wider screen system all connected inside one design environment.
Use the strongest remaining Ispeak composition—preferably a visually rich learning screen or multi-screen presentation not already used above.
Use a polished final interface, learning composition or multi-screen product presentation.
The documented Ispeak work spans UX research, information architecture, wireframes, multiple user contexts, mobile UX, mobile UI, games, quizzes, reusable product logic, empty states, errors, confirmations, edge cases, custom graphics, custom imagery, icons, illustrations, interactive prototypes, animation and motion across more than thirty screens.
Ispeak's gallery should move between those two layers. Show the games, quizzes and visual learning that gave the product energy, then expose the wireframes, role-based logic, product states, reusable screen system, original visual assets, prototype connections and complete Figma environment that allowed that energy to remain coherent across more than thirty screens.
The strongest Ispeak gallery should begin with the finished learning experience and gradually reveal the structure behind it. Open with contrasting game, quiz and visual-learning screens. Show game interaction in more depth, then follow a quiz from question to response to feedback. Include animation and illustration, expose the wireframes, show authentic role-based screens, document empty states, errors, confirmations and edge cases, isolate the custom graphics, imagery, icons and illustrations, and then demonstrate the breadth of the thirty-plus-screen product. Finish by showing the interactive prototype, interface-animation work, complete Figma canvas and one final polished learning composition.The result should make Ispeak read as a genuine product-design system for interactive English learning—not simply a set of attractive mobile screens.
What impressed us most was the systems thinking behind the execution. The final experience feels intentional, scalable, and built for real users.
Interactive products naturally accumulate complexity.More features create more screens. More user contexts create more variations. More animation, interaction and content create more states the interface has to manage.The answer is not to remove everything that gives the product personality. The answer is to create enough structure that personality, interaction and complexity can coexist without becoming the user's problem. That was the product-design challenge behind Ispeak: information architecture before interface decoration, journeys before isolated screens, reusable product logic before uncontrolled variation, and clear hierarchy beneath games, quizzes, illustration and motion.Vyasti works across product strategy, UX, information architecture, interface systems, prototyping and digital experience design to turn complex product ideas into clearer, more scalable systems.