Beyond Touch
2024.1 - Present, UX Designer, 0->1 Phone App & Watch App Design
This project explores social gameplay experiences that leverage the onboard hardware of the watch, sucha as the heart sensor. Our team consider the potential demographic, from middle school students to young professionals who often use these watches for safety and communication purposes. This project is also supported by Gierad Laput from Apple. Please visit our project website for more details: https://projects.etc.cmu.edu/beyond-beyond-touch/
Highlights
Lead design ideation & solutioning:
conducting user research and competitor analysis,
creating theming and storyboards for the social game experience based on the demographic and ensuring the design is clearly communicated and understood with both the team, players, and clients,
Cross-functional collaboration:
delivering high and low-fidelity UX flows and interactive prototypes, and collaborating with the dev team to hand off design and ensure the design specs are implemented.
Design development and media production:
recording playtests and editing videos, such as playtest videos and the final video,
designing and updating the project website during the design development.
Storyboarding, Brownboxing
● Develop
Summary
Issue & Business Oppotunity
Most screen-based games on the Apple Watch feel isolating and awkward, limited by the small screen size. Currently, there are no social games specifically designed for the watch.
Solution
A social game that utilizes the features of the Apple Watch to encourage players to engage in conversation and physical movement.
Playest, Useer Interview, Competitor Analysis
Wireframe, User Flow, User Testing
Product Design, Prototype, Technical Implemetation
● Ship Designs
● Deliver
● Define
Success Metrics
App store launch and real user feedbacks
Process
● Discover
Guest_Enter Coder
Delivery
App Store Launch
Download our app from App Store
Our first game, Otter Agent, is officially launched on the App Store! Feel free to download it and play with friends. (Each player needs an iPhone and an Apple Watch.)
Guest_Waiting Room
Immerse users in the experience of being secret agents
Before the mission begins, one agent needs to create a room for others to join. To enhance the feeling of becoming secret agents, I designed the experience to make players feel as if they are actually synchronizing their secret watches. The host receives a mission code, and others agents must scroll to enter the same mission code on their watches to join the same room.
Guest and host synchronizing secret watches
Watch App – Design an immersive experience
Pick a Prompt
Then, by confirming their identities, It’s time for the party to select a prompt to answer. Guests will see an instruction to choose a prompt along with the host, so they know they can discuss and select the prompt together.
Host_Receive Coder
Host_Waiting Room with CTA
Assign Identity
Starting the mission, each agent will get their own identity, either a truth teller or a liar.
Story Round
Moving to the next stage: story time, agents have 30 seconds to prepare their stories based on the prompt. Then another 30s to tell their stories one by one, whiles others can see the speaker’s heart rate.
Question Round
Moving to the next stage: story time, agents have 30 seconds to prepare their stories based on the prompt. Then another 30s to tell their stories one by one, whiles others can see the speaker’s heart rate.
Rankings
Finally, rankings will be revealed, and agents can check who they deceived and who they got during the training on their phone. They can also choose to replay at this stage.
Phone App - Design an engaging experience
Introduce the phone app to help user better understand our game
The main gameplay takes place on the watch. Since each watch app requires an associated phone app, we designed the phone app to provide additional guidance for the game.
Designed avatar customization for a more engaging user experience.
I designed an avatar customization feature that allows each agent to choose their own cover and code name before starting their training. This adds a layer of personalization as we want to make the experience feel more immersive and unique for each player.
Commerical
A Video showcases the game
Here is the commerical I edited, which introduces our first social game Otter Agent.
Ideation
Main directions
Smart Watch vs Secret Agents: A theme that drives the storytelling
A smart watch monitoring body status reminds us of spy movies, and we want players to feel like secret agents being monitored by advanced technology, tackling secret missions.
Players take on the role of an otter agent to infiltrate the groundhog family, but the smartwatch invented by the groundhog family will track players’ body status.
Our game provides a series of missions to help players become skilled otter agents.
Four game prototypes leverage various Apple Watch features
We designed four game prototypes that incorporate different hardware features of the watch:
Bluffing game + heart rate
Chasing game + decibel detector
Balancing game + accelerometer
Exercise game + heart rate
a suite of mini games themed around agent otter training
Bluffing game + heart rate
Balancing game + accelerometer
Chasing game + decibel detector
Exercise game + heart rate
Playtest
Concept validation through rapid prototyping
Playtest to gather real user feedback
We conducted playtests through the design process, showed designs to stakeholders, and collected feedback.
In the beginning, we playtested different types of games, such as bluffing games, playground games, etc:
30s video showing the first few weeks
When we are designing the wireframe, we held playtest days and used brown boxing to playtest our game:
Thoughts and Preparation
Lots of people enjoy playing our game druing the playtest day
When designing the high-fidelity prototype, we built it on a watch and invited more people to playtest our game. We also attended game conference to showcase our game.
Implementing the game on the Apple Watch.
We showcased our game at the Serious Play Conference
Develop
Key challenges after Playtest
Small screen limits information density
Players forget to look at their watch
Unintended play behaviors
Consistent theme/visuals/feels
Design Solutions:
Challenge One: Information Display
Players do not enjoy reading on a small screen
How I solve it:
Keep the targets large and straightforward
Keep the visual contrast prominent enough
Keep on-screen text concise and impactful
Use images to replace text descriptions
Information Display - Edge Case
When it comes to assigning identities in the game stage, players always read out their identities.
How I solve it:
Add a check page is added, which players must read and tap before seeing their assigned identity.
Keep the interactions straightforward, mostly tapping and sometimes scrolling. It's simple so players don’t spend too much time on the screen.
Challenge Two: Lack of Attention
The watch need to guide the players to speak, to vote, and to observe the speaker’s heart rate, but some players forget to look at their watch AT ALL throughout the game.
How I solve it:
Introduce sound and haptics during stage changes.
Designed the live voting system - allows audiences to make back-and-forth voting decisions while listening and encourages them to constantly check the speaker's heart rate.
Challenge Three: Theming
How can we enhance engagement and immersion in our game through visuals?
What are the best strategies for telling a compelling story on a small screen?
How I solve it:
Incorporate otter-theming with color variations to the interface while prioritize visual clarity
Use bold icons, simplified shapes, and strong contrasts for readability.
Outcomes
Post Launch
The build of the first game is currently uploaded to App Store and we are still inviting people to playtest our game.
We are fixing bugs and making more design iterations.
We are also developing our second social game.
Takeways
What I have learned?
Present design concepts and ideas clearly and efficiently to stakeholders while incorporating constructive feedback.
Lead the design and development of a 0-to-1 product, taking on designer and co-producer roles.
Maintain clean and well-organized documentation throughout the entire design and development process.
Foster strong multidisciplinary communication, collaborating seamlessly with other UI/UX designers and cross-functional teams.