![](https://framerusercontent.com/images/K2zzd9VFGEz0oPtpAPj1tcLLf7A.png)
![](https://framerusercontent.com/images/xdxwIY3ouXoJGDZMWhDX4sm1e7k.png)
![](https://framerusercontent.com/images/RtVKhCWwXivimHAV1gyuZGrAomY.jpg)
Level selection choose different levels within the game.
Level selection choose different levels within the game.
Mission completion pop up once a user has successfully completed a level.
Play button to begin playing the game.
Each gem represents a different level, every time a level is completed a new gem is unlocked.
Has the ability to repeat the level or move onto another level.
Home
Level Selection
Mission Completion
Design
High Fidelity Prototype
![](https://framerusercontent.com/images/maH2f8iXs1hImwN6ZBNF0paPI5s.png)
![](https://framerusercontent.com/images/j079300cKvVbOm6pM7KHkVYeLac.png)
![](https://framerusercontent.com/images/Xq9VVHnEwVorJ2uXbN9y9ZV78.png)
Future User
Interfaces
Cyber Punk
Holographic
AR
VR
Nano Tech
89% - Yes
Does aesthetics matter when interacting?
95% - Yes
Are you more intrigued by a product when there is a backstory to it?
Surveys and Interviews
Findings
63% - Buttons
Do you prefer to interact with a interface through buttons or voice?
68% - Yes
Is portability a key factor when interacting with products?
Analyse
Research Findings
Concluding my research I found that there was a clear bias towards cyber punk theme. That allowed me to pursue this theme further a the basis of my design.
Understand
Research
Initial Thinking
Existing Inspiration
The selected target audience was anyone who has a passion for the future and gaming. This came meant that the demographic was predominately people aged 17-28 years old.
As a result the research methods were surveys, forums, interviews and secondary data.
Different movie inspirations were looked at this is because most future interfaces have already been explored by movies already. So this allowed for a good starting point which I could later develop further and improve.
Research
Analyse
Design
User Testing
Journey
The Design Process
Understand
![](https://framerusercontent.com/images/EKEbF9pT6CN3ok5S7v1amrEq1k8.png)
![](https://framerusercontent.com/images/trokU0auBCwNdiPjXQ40GMA3e4.png)
![](https://framerusercontent.com/images/QGQrjliyVaMa7BF5GgY8GFPxg.png)
![](https://framerusercontent.com/images/pDYU9hhgLzYP6K6RZZ1s1A4qk.png)
![](https://framerusercontent.com/images/klgRTR9cfMxgv3qhJyEXVEcJA.png)
![](https://framerusercontent.com/images/klgRTR9cfMxgv3qhJyEXVEcJA.png)
![](https://framerusercontent.com/images/klgRTR9cfMxgv3qhJyEXVEcJA.png)
CyberGem is about crafting a compelling narrative that transcends traditional storytelling mediums, with the ultimate goal of translating this narrative into an engaging and immersive user experience through a future user interface, manifested in the form of a game. The task at hand required a harmonious fusion of creativity, technology, and user interaction.
CyberGem is about crafting a compelling narrative that transcends traditional storytelling mediums, with the ultimate goal of translating this narrative into an engaging and immersive user experience through a future user interface, manifested in the form of a game. The task at hand required a harmonious fusion of creativity, technology, and user interaction.
CyberGem is about crafting a compelling narrative that transcends traditional storytelling mediums, with the ultimate goal of translating this narrative into an engaging and immersive user experience through a future user interface, manifested in the form of a game. The task at hand required a harmonious fusion of creativity, technology, and user interaction.
The challenge extended beyond conventional design considerations, calling for a strategic blend of visual aesthetics, intuitive navigation, and seamless integration of storytelling elements into the fabric of the user interface.
The challenge extended beyond conventional design considerations, calling for a strategic blend of visual aesthetics, intuitive navigation, and seamless integration of storytelling elements into the fabric of the user interface.
The challenge extended beyond conventional design considerations, calling for a strategic blend of visual aesthetics, intuitive navigation, and seamless integration of storytelling elements into the fabric of the user interface.
The solution to this was to create a game that utilises future user interface in the form of designs. This was done by:
Future UI designs
Engaging story telling
Functional integration of technology
The solution to this was to create a game that utilises future user interface in the form of designs. This was done by:
Future UI designs
Engaging story telling
Functional integration of technology
Overview
Overview
Overview
About CyberGem
About CyberGem
Challenge
Challenge
Solution
Solution
![](https://framerusercontent.com/images/TJPPu4cYBTYDkt6PJKVHrWD4Wp4.png)
Drawing inspiration from existing movies and various media forms, I aimmed to conceptualise a future user interface that utilises imaginative interfaces to narrate a storyline. This endeavour will culminate in the development of a purposeful game, designed to engage players in a meaningful experience.
Drawing inspiration from existing movies and various media forms, I aimmed to conceptualise a future user interface that utilises imaginative interfaces to narrate a storyline. This endeavour will culminate in the development of a purposeful game, designed to engage players in a meaningful experience.
Drawing inspiration from existing movies and various media forms, I aimmed to conceptualise a future user interface that utilises imaginative interfaces to narrate a storyline. This endeavour will culminate in the development of a purposeful game, designed to engage players in a meaningful experience.
UX Design
UI Design
Redesign
2023
Game Design
(Personal Project)
Client
Year
Scope of Work
Client: (Personal Project)
FUI
Game
Creation
Game Creation
![](https://framerusercontent.com/images/K2zzd9VFGEz0oPtpAPj1tcLLf7A.png)
Client: (Personal Project)
UX Research
UX Design
UI Design
Game Creation
2023
Game Design
(Personal Project)
Client
Year
Scope of Work
FUI
Game
Creation
![](https://framerusercontent.com/images/b6YgpXUsS3dSuaC79Ig5ueOOQ.png?scale-down-to=1024)
![](https://framerusercontent.com/images/b6YgpXUsS3dSuaC79Ig5ueOOQ.png?scale-down-to=1024)
Journey
The Design Process
Research
Analyse
Understand
Design
User Testing
Understand
Initial Thinking
The selected target audience was anyone who has a passion for the future and gaming. This came meant that the demographic was predominately people aged 17-28 years old.
As a result the research methods were surveys, forums, interviews and secondary data.
Research
Existing Inspiration
Different movie inspirations were looked at this is because most future interfaces have already been explored by movies already. So this allowed for a good starting point which I could later develop further and improve.
![](https://framerusercontent.com/images/EKEbF9pT6CN3ok5S7v1amrEq1k8.png)
![](https://framerusercontent.com/images/EKEbF9pT6CN3ok5S7v1amrEq1k8.png)
![](https://framerusercontent.com/images/trokU0auBCwNdiPjXQ40GMA3e4.png)
![](https://framerusercontent.com/images/trokU0auBCwNdiPjXQ40GMA3e4.png)
![](https://framerusercontent.com/images/QGQrjliyVaMa7BF5GgY8GFPxg.png)
![](https://framerusercontent.com/images/QGQrjliyVaMa7BF5GgY8GFPxg.png)
![](https://framerusercontent.com/images/pDYU9hhgLzYP6K6RZZ1s1A4qk.png)
![](https://framerusercontent.com/images/pDYU9hhgLzYP6K6RZZ1s1A4qk.png)
Research
Surveys and Interviews
Findings
63% - Buttons
Do you prefer to interact with a interface through buttons or voice?
68% - Yes
Is portability a key factor when interacting with products?
89% - Yes
Does aesthetics matter when interacting?
95% - Yes
Are you more intrigued by a product when there is a backstory to it?
Future User
Interfaces
Cyber Punk
Holographic
AR
VR
Nano Tech
Analyse
Research Findings
Concluding my research I found that there was a clear bias towards cyber punk theme. That allowed me to pursue this theme further a the basis of my design.
Design
High Fidelity Prototype
Gaming app logo “Cyber Gem” Clear and bold at the top of the page.
Play button to begin playing the game.
Home
![](https://framerusercontent.com/images/Xq9VVHnEwVorJ2uXbN9y9ZV78.png)
![](https://framerusercontent.com/images/Xq9VVHnEwVorJ2uXbN9y9ZV78.png)
Level selection choose different levels within the game.
Each gem represents a different level, every time a level is completed a new gem is unlocked.
Level Selection
![](https://framerusercontent.com/images/maH2f8iXs1hImwN6ZBNF0paPI5s.png)
![](https://framerusercontent.com/images/maH2f8iXs1hImwN6ZBNF0paPI5s.png)
Mission completion pop up once a user has successfully completed a level.
Has the ability to repeat the level or move onto another level.
Mission Completion
![](https://framerusercontent.com/images/j079300cKvVbOm6pM7KHkVYeLac.png)
![](https://framerusercontent.com/images/j079300cKvVbOm6pM7KHkVYeLac.png)
![](https://framerusercontent.com/images/xdxwIY3ouXoJGDZMWhDX4sm1e7k.png)
![](https://framerusercontent.com/images/xdxwIY3ouXoJGDZMWhDX4sm1e7k.png)
User Testing
Feedback
After completing the prototype, I then pitched my idea and got users to test the prototype to assess its effectiveness in meeting the brief.
![](https://framerusercontent.com/images/RtVKhCWwXivimHAV1gyuZGrAomY.jpg)
![](https://framerusercontent.com/images/RtVKhCWwXivimHAV1gyuZGrAomY.jpg)
Reflection
Takeaways
The aim of the project was to create a future user interface, based on the user testing and reactions that I received this was successfully achieved. With the support of research and user testing as the back bone it help support and structure the project well.
If I had more time I could of gotten a more insightful and larger sample size which could of altered the direction of the project.
PureGym Redesign
![](https://framerusercontent.com/images/5Q0Yh6uuNE1TUpi9zQLpcdEk.png)
![](https://framerusercontent.com/images/5Q0Yh6uuNE1TUpi9zQLpcdEk.png)
Next Project
![](https://framerusercontent.com/images/K2zzd9VFGEz0oPtpAPj1tcLLf7A.png)
![](https://framerusercontent.com/images/K2zzd9VFGEz0oPtpAPj1tcLLf7A.png)
Client: Behavioural Insights Team
UX Research
UX Design
UI Design
FUI Game
Creation
Client
Behavioural Insights Team
Year
2023
Scope of Work
UX Research|UX/UI Design
![](https://framerusercontent.com/images/TJPPu4cYBTYDkt6PJKVHrWD4Wp4.png)
![](https://framerusercontent.com/images/TJPPu4cYBTYDkt6PJKVHrWD4Wp4.png)
Journey
The Design Process
Research
Understand
Design
User Testing
Analyse
Understand
Initial Thinking
The selected target audience was anyone who has a passion for the future and gaming. This came meant that the demographic was predominately people aged 17-28 years old.
As a result the research methods were surveys, forums, interviews and secondary data.
Research
Existing Inspiration
Different movie inspirations were looked at this is because most future interfaces have already been explored by movies already. So this allowed for a good starting point which I could later develop further and improve.
![](https://framerusercontent.com/images/EKEbF9pT6CN3ok5S7v1amrEq1k8.png)
![](https://framerusercontent.com/images/EKEbF9pT6CN3ok5S7v1amrEq1k8.png)
![](https://framerusercontent.com/images/trokU0auBCwNdiPjXQ40GMA3e4.png)
![](https://framerusercontent.com/images/trokU0auBCwNdiPjXQ40GMA3e4.png)
![](https://framerusercontent.com/images/QGQrjliyVaMa7BF5GgY8GFPxg.png)
![](https://framerusercontent.com/images/QGQrjliyVaMa7BF5GgY8GFPxg.png)
![](https://framerusercontent.com/images/pDYU9hhgLzYP6K6RZZ1s1A4qk.png)
![](https://framerusercontent.com/images/pDYU9hhgLzYP6K6RZZ1s1A4qk.png)
Research
Surveys and Interviews
Findings
63% - Buttons
Do you prefer to interact with a interface through buttons or voice?
68% - Yes
Is portability a key factor when interacting with products?
89% - Yes
Does aesthetics matter when interacting?
95% - Yes
Are you more intrigued by a product when there is a backstory to it?
Future User
Interfaces
Cyber Punk
Holographic
AR
VR
Nano Tech
Analyse
Research Findings
Concluding my research I found that there was a clear bias towards cyber punk theme. That allowed me to pursue this theme further a the basis of my design.
Design
High Fidelity Prototype
Home
![](https://framerusercontent.com/images/Xq9VVHnEwVorJ2uXbN9y9ZV78.png)
![](https://framerusercontent.com/images/Xq9VVHnEwVorJ2uXbN9y9ZV78.png)
Gaming app logo “Cyber Gem” Clear and bold at the top of the page.
Play button to begin playing the game.
Level Selection
![](https://framerusercontent.com/images/maH2f8iXs1hImwN6ZBNF0paPI5s.png)
![](https://framerusercontent.com/images/maH2f8iXs1hImwN6ZBNF0paPI5s.png)
Level selection choose different levels within the game.
Each gem represents a different level, every time a level is completed a new gem is unlocked.
Mission Completion
![](https://framerusercontent.com/images/j079300cKvVbOm6pM7KHkVYeLac.png)
![](https://framerusercontent.com/images/j079300cKvVbOm6pM7KHkVYeLac.png)
Mission completion pop up once a user has successfully completed a level.
Has the ability to repeat the level or move onto another level.
![](https://framerusercontent.com/images/xdxwIY3ouXoJGDZMWhDX4sm1e7k.png)
![](https://framerusercontent.com/images/xdxwIY3ouXoJGDZMWhDX4sm1e7k.png)
User Testing
Feedback
After completing the prototype, I then pitched my idea and got users to test the prototype to assess its effectiveness in meeting the brief.
![](https://framerusercontent.com/images/RtVKhCWwXivimHAV1gyuZGrAomY.jpg)
![](https://framerusercontent.com/images/RtVKhCWwXivimHAV1gyuZGrAomY.jpg)
Reflection
Takeaways
The aim of the project was to create a future user interface, based on the user testing and reactions that I received this was successfully achieved. With the support of research and user testing as the back bone it help support and structure the project well.
If I had more time I could of gotten a more insightful and larger sample size which could of altered the direction of the project.
PureGym Redesign
![](https://framerusercontent.com/images/5Q0Yh6uuNE1TUpi9zQLpcdEk.png)
![](https://framerusercontent.com/images/5Q0Yh6uuNE1TUpi9zQLpcdEk.png)
Next Project
![](https://framerusercontent.com/images/K2zzd9VFGEz0oPtpAPj1tcLLf7A.png)
User Testing
Feedback
After completing the prototype, I then pitched my idea and got users to test the prototype to assess its effectiveness in meeting the brief.
Reflection
Takeaways
The aim of the project was to create a future user interface, based on the user testing and reactions that I received this was successfully achieved. With the support of research and user testing as the back bone it help support and structure the project well.
If I had more time I could of gotten a more insightful and larger sample size which could of altered the direction of the project.