Designing a clearer path to confident conversation. Klaster connects guided scenarios, AI speaking practice, and actionable feedback in a mobile experience built around everyday communication.
01 / Design context
The supplied Klaster designs explore a mobile experience for practising English conversation with an AI coach and fellow learners. The design challenge is to connect the moment someone wants to practise with a useful scenario, a clear speaking experience, and feedback they can return to.
A real-life situation
Guided scenarios give a learner a concrete setting: a team meeting, an interview, a presentation, or a negotiation. Context makes the practice easier to begin.
A personal starting point
The open speaking route lets someone bring a topic of their own. Suggested prompts reduce the effort of deciding what to say first.
The experience links preparation, speaking, reflection, and repeat practice. Each stage gives the learner a different kind of orientation.
01
A situation or personal topic
02
Speak with visible controls
03
Review objectives and delivery
04
Revisit reports and try again
02 / Visual language
Klaster’s visual direction combines Satoshi typography, bright surfaces, soft card shadows, and a blue-to-green gradient. The speaking orb gives the AI interaction a recognisable focal point, while the same colour language carries into actions, score gauges, and the central Speak navigation item.
The supplied wordmark combines a clear name with an expressive asterisk mark.
Satoshi
Bold / emphasis and headings
Medium / interface labels
Regular / supporting copy
A consistent family connects scenario cards, controls, reports, and navigation.
The blue-to-green gradient anchors the primary action. Labels name the task directly, while supporting controls keep a lighter visual weight.
03 / Finding a starting point
The home screen combines a recommended practice with two clear ways to begin: AI speaking and live conversations. Guided browsing then organises scenarios by communication context. Before a session starts, the scenario detail explains the situation, expected effort, and learning objectives.
A quick-start recommendation, activity summary, and recent report keep the next session close to the learner.
Photography and short titles make a broad scenario catalogue tangible. Topic groups support exploration without asking for a topic from scratch.
The brief names a role, a communication challenge, and specific objectives before the start action.
Relevance
Workplace situations make the exercise concrete enough to imagine and begin.
Expectation
A short duration and visible objectives help someone anticipate the kind of practice ahead.
Choice
Guided scenarios sit alongside open speaking and live conversations, supporting different starting points.
04 / Speaking interaction
Speaking needs a different interface from browsing. The designs move attention towards a central orb, a named conversation context, and a small set of controls near the bottom of the screen. A transcript view provides a readable record when the learner wants more detail.
The topic field and a direct start action turn a personal intention into a session.
A welcoming prompt and “Speak Now” cue give the otherwise open canvas a clear instruction.
New Topic, Mute, Stop, and Transcript remain grouped while the scenario stays named at the top.
The orb gives the live conversation a visual anchor. The surrounding space reduces competing information while the learner speaks.
The transcript expands the spoken exchange into text. Distinct message treatments separate learner responses from the coach’s prompts and feedback.
The supplied screens show interaction states; animation timing and recognition behaviour are outside this case study’s evidence.
05 / Session feedback
Finishing a practice session leads into an explicit evaluation state, followed by a readable score summary. The feedback screen connects the overall result to named learning objectives and offers routes to the transcript, a detailed report, and another session.
The completion state explains that scoring is in progress and offers other guided practices and a route home.
An overall score and an encouraging sentence introduce the result before the objective breakdown.
A prominent gauge gives a quick summary. The breakdown then names the communication skills being considered, from framing and empathy to closing a negotiation.
Transcript access lets a learner revisit what was said. A new-topic action and detailed-report link keep reflection connected to further practice.
Scores and recommendations are sample design content from the Figma file.
06 / Reports and progress
The report surfaces delivery signals such as filler words, pace, pauses, and variation through chart cards and short tips. Insights expands the perspective across sessions, while the report-history tab keeps individual practice records accessible. This creates a path from one session’s reflection to an ongoing practice habit.
Chart cards combine a named metric, a value, and its pattern over time. Nearby tips suggest what to try in another session.
Time-range filters and an overall trend sit above the same performance categories, helping the learner revisit progress over time.
Session title, type, duration, and score form a consistent row. Search and tab navigation provide a route back to earlier feedback.
Session summary → delivery detail → overall insights
The structure lets someone start with a result, inspect a particular signal, and return later to understand a broader pattern.
Metric names, charts, short explanations, and suggested actions give the report a clearer reading order. Values shown are source-design examples, not evidence of learning outcomes.
07 / Practice and return
Peer Practice extends the experience beyond the AI coach. Scenario cards distinguish topic and level, while brief practice tips set a supportive tone. Together with the personal hub and report history, this surface explores how a learner can keep returning with a new purpose.
Cards explain the conversation setting, indicate level, and place Find a Match beside the brief. Guidance encourages patience and a supportive exchange.
The mobile format carries the same speaking controls and visual language into short practice moments between longer tasks.
“Give me a situation to practise,
space to speak,
and something useful to try next.”
Experience principle
01
A concrete scenario and visible objectives give practice a purpose before the conversation begins.
02
Browsing, speaking, and reflection use different information densities while sharing a consistent visual language.
03
A summary, transcript, detailed report, and session history create several ways to revisit and continue the practice.
Design case study based on the supplied Klaster mobile Figma designs. Screens contain sample names, scores, charts, and recommendations. The narrative explains observable design choices; research findings, production behaviour, and measured learning outcomes are not provided in the source.
Let's collaborate to turn your business challenges into AI-powered success stories.
Get Started
