Design an digital Interface for fictional character using design methodologies and techniques.


Designed a digital interface for Wonder Woman’s Bracelet that is simple, straight-forward, supports fast interactions and is easily accessible at all times.Since the activities involve dealing with missiles, bullets, fire, explosions, it is crucial that these interfaces be designed to minimize errors.


This project contains the initial results of User data gathering, User data Visualizations, application of User Data to Select Screen Form Factor, Low-fidelity, Medium-Fidelity and High-fidelity Interface prototypes for Wonder Woman bracelets. While no formal user testing has been conducted, every design decision was a result of the evaluation process and feedback received from peers, friends and Family members. 



The source material for this project came from the movie “Wonder Woman” (2017) directed by Patty Jenkins and starred Gal Gadot as Diana Prince / Wonder Woman. Wonder Woman is a 2017 superhero movie inspired by DC Comics Character of the same name. I also referred Wonder Woman Movie Wikipedia. Based on the source materials, Diana, the Wonder Woman is an Amazonian warrior, who grew up in the Island of Themyscira. An American Pilot and spy Steve Trevor crash offshore of the Island. Diana rescues Steve and learns from him about the ongoing World War. Diana, firmly believes that the World War is caused by Ares, an old enemy of the Amazons. She leaves Amazon with Steve to end the conflict.


The User Analysis helps us identify the characteristics of the user,  design and develop a technology or software product that is more user-friendly.

Below are some of the Wonder Woman's interesting Characteristics: 

1.     Gender- Female

2.     Culture - Wonder Woman is Princess Diana of the Amazon island Themyscira.

3.     Language – Wonder Woman can speak any language

4.     Telepathy – She can communicate with others using her mind

5.     She has Incredible battle skills as a Warrior

6.     She has Superhuman speed, strength and power

7.     She is the embodiment of confidence

8.     Princess Diana commands respect both as Diana and Wonder Woman

9.     Truth is a big aspect of her character

10.   She is strong-willed. She does not back down from any fight or challenge.

11.   She believes that communication is more a powerful tool than direct violence

12.   She is a lover of peace

13.   She strongly believes in love.

14.   She has a strong conscience

15.   She is sincere even in the midst of a conflict

16.   She's a person with a lot of emotional intelligence

17.   She has great powers of persuasion

18.   She is naive and innocent person

19.   She has super stamina, rapid healing powers. She discovers the fact when her wounds from the battle automatically mend themselves.

20.   She is both the fiercest and most nurturing

21.   She is powerful than other Amazons. She discovers this fact when she is able to scale the wall to steal weapons for the battle.

22.   She specializes in the use of a magic lasso tool which she uses on people to confess the truth.



The task analysis helps us learn about the user by observing them perform the tasks in detail, to achieve their goals. Wonder Woman interacts with her bracelet in two different ways.


Hierarchical Task Analysis: Deflect the attacks


Screen Shot 2018-06-23 at 5.30.56 PM

Hierarchical Task Analysis: Attack the enemy


Screen Shot 2018-06-23 at 5.23.05 PM


Empathy map is a visualization tool that helps us to know about a particular type of user. It provides knowledge about the user for us to understand them and make better design decisions. Wonder Woman performs two main tasks using the bracelet.


Task 1: She fights against the German Soldiers to save local people using her bracelets by deflecting the attacks from them. She deflects the attacks by holding up her arm in the direction of the attacks.




Task 2: She attacks Ares with a massive force of energy to save the world from the destruction. She performs this task in the World War I battlefield


Screen Shot 2018-06-23 at 6.17.59 PM



The Extraordinaire card helps the designers to learn about the character and the environments. It makes the designers aware of the needs while designing with them in mind. The card gives us details and clues about the characters and their environment details.  Extraordinaire Card on Wonder Woman has stills from four scenes which I believe summarizes her personality. The “Main scene” on the left showcases her superpower of creating a concussive force of energy by smashing her bracelets. She is a courageous and a confident woman. The “Alternative scene” on the top right shows her anger and sadness due to war and hatred prevailing in the world. The “surprising scene” on the bottom right shows a different side of Wonder Woman. Diana looks peaceful, innocent and in love. The “detailed scene” shows her arm/bracelet’s position and the way it deflects the attack. 


Screen Shot 2018-06-23 at 6.20.40 PM



I used pen and paper to create paper prototype. Low-fi prototyping helped me create a rough sketch of how the interaction should be and what kind of design would help Wonder Woman complete her task successfully. I created drawings for every step in the task.





Medium Fidelity prototypes helped me set the layout, content, and navigation.


Medium fidelity


As designers, we need to ensure we tell a meaningful story that is interesting, clear and human.  When I am designing Interface for the Wonder Woman bracelet, I want to tell a story to my audience that conveys the purpose of the device in a clear manner. At this stage, I am more focused on the purpose of the device. The story has to be designed in a such a way to make sure the user knows how to interact naturally with the bracelet device.





I used Plot Diagram tool that helped me organize the content. It helped me map the events of the story. It helped us break the story into different parts such as Exposition, rising action, Climax, Falling Action, Resolution, and conflict. It helped me design the tale in a Logical sequence of events.

Screen Shot 2018-06-23 at 11.02.43 PM


Storyboard is an excellent technique to break the story into frames and explain a particular situation in single frame.  This way the story followed a structured path quickly understand the story the way the I intended to. Sketching not only helped me bring in just the information I have gathered so far about the characters, device and the environment but it brings about the emotions and reactions. 





Tools used: Pen, Pencil, Adobe XD, Illustrator, Photoshop, IMovie












It is quite exciting to challenge Wonder Woman’s superpower by developing a digital device with functionalities. I like to imagine Wonder Woman with a device which can help her achieve a lot more than just defending and attacking. That is one of the reasons, I added Flight, Scan and Track button to her device. This project helped me put my imagination on paper and slowly transform into digital experiences. One of the exciting activities of the project was to deep dive into her character width and depth, understand her needs, pain, happiness, strengths, and weaknesses. User Analysis, Task analysis, and Environment analysis are core activities for gathering the required information.

Working on Extraordinaire Cards, Empathy Maps and Hierarchical tasks were steps towards streamlining my design process. As a designer, I got more clarity on the project and for whom I am designing the Interface. HTA helped me figure out the step by step task performance. Brainstorming sessions have been fun and great learning experiences. They helped me work with various people with different mindsets and thought processes and come up with solutions I wouldn’t have imagined. Few examples are the flight and track options, virtual screen, Wonder Woman fight sequence on top of the buildings with an Arial view.

It feels good to see a simple hand-drawn sketches translate into high-fidelity prototypes with a lot of functionalities and details included. It is memorable experience learning various methodologies and techniques to design an interface for a particular user. Every feedback from peers, friends, neighbors, family members was worth considering and working towards improving it. This project gave me an opportunity to create prototypes using tools like Adobe XD, Photoshop, Illustrator IMovie. These tools helped me visualize my goal of creating a device for Wonder Woman to an extent. The bracelet device is easily wearable and intuitive. 


UMBC IES WebsiteUsability Evaluation

Website RedesignPrototyping

Wonder Woman BraceletsUser Interface Prototyping & Development

UMBC Choice ProgramGraphic Design

Design PrinciplesFundamentals of Human-Centered Computing

Design Challenge - IDEO & AcumenHuman-Centered design




                                Phone: +571 296 4470