![](https://static.wixstatic.com/media/3021bd_8ec219a613f44ebfae7af7b14fcc2512~mv2.png/v1/fill/w_1920,h_1045,al_c,q_95,usm_0.66_1.00_0.01,enc_auto/3021bd_8ec219a613f44ebfae7af7b14fcc2512~mv2.png)
SAFEDOME
A CASE STUDY
Safedome is an ultra thin smart card that keeps an eye on your wallet - or anything else you don’t want to lose - using your iOS or Android smartphone. Safedome connects to the Safedome app via Bluetooth and sends quick alerts if you and your wallet separate.
​
I am going to use Safedome as a case study to demonstrate some of my UX processes and practices.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of Maxwell Forest.
Understand the problem
One of the first things I try to do is understand the problem we are trying to solve. There are a few techniques to do this but all involve good old fashioned research and asking questions.
You need to research who your users are. Observe them either trying to solve the problem or interacting with the product. These observations should happen in lab conditions and also in the users day-to-day life if possible. What devices are people to use to access your product (people behave very differently on their phone compared to their laptop)? What time are they going to access your product (on the train, at home, at work etc)?
Safedome
​
What type of product are we designing?
An app for mobile devices and a hardware Bluetooth connected tracker.
Who are the main users?
People who are concerned about losing their personal items.
Where is the product being used?
It should be a passive, always on experience that only notifies the user when neccesary.
Why do they need it to exist?
So they can feel safe and secure and go about about their lives worry-free.
How will it be used?
Once set-up, users will only only be notified when they need to take action. This action will vary depending on situation.
Conduct interviews and surveys, whatever is necessary to build a robust picture of your potential users.
![](https://static.wixstatic.com/media/3021bd_d2edc9bb092c4e7ea34c604ae0f4bcfe~mv2.jpeg/v1/fill/w_980,h_551,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_d2edc9bb092c4e7ea34c604ae0f4bcfe~mv2.jpeg)
I conducted several UT sessions in our in-house lab focussing on early builds and concepts of Safedome. All of our test participants were from America as that was the region we were targeting. Certain interactions with the Safedome card had to be approximated because certain elements were not built.
This research will reveal a lot of data that feeds into every product decision and will help define product requirements.
I always aim to make sure that anything I do falls into the sweet spot of desirable, viable and feasible. For example, we could tie a bungy cord to everyones wallet so they would never lose it. Obviously that's not too feasible!
![](https://static.wixstatic.com/media/3021bd_c5e1ebac312c457d899e17b4aa9c6079~mv2.png/v1/fill/w_397,h_356,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_c5e1ebac312c457d899e17b4aa9c6079~mv2.png)
User journey
I began to outline the user steps of why, when, where and why the user will interact with Safedome.
-
Craig checks his Safedome app to make sure he is connected to to his wallet.
-
He gets to the office, dumps his stuff down and rushes to his first meeting.
-
Craig receives an alert on his iPhone notifying him that he has become disconnected with his wallet.
-
Knowing he regularly leaves his wallet on his desk at work he decides to quickly create an Alert Free Zone around his office.
-
Craig heads out to lunch and unknowingly drops his wallet after paying for his meal.
-
Walking away from the cafe he receives an alert on his iPhone.
-
Craig rushes back into the cafe and sees his wallet on the floor next to the counter.
-
Utterly relieved he picks it up and puts it in his pocket.
From this I started to explore User Stories which are part of an agile approach that helps shift the focus from writing about requirements to talking about them. All agile User Stories include a written sentence or two and, more importantly, a series of conversations about the desired functionality. They can be written at varying levels of detail (epic = big) and can be split into numerous smaller stories that can be worked on in sprints.
As a user, I want to receive an alert so that I do not lose my wallet.
Once the user journey is mapped we can start looking at what the potential flow through our product could look like.
![](https://static.wixstatic.com/media/3021bd_284f3f0051614edfaec54d429762b956~mv2.jpeg/v1/crop/x_0,y_0,w_1920,h_978/fill/w_980,h_499,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_284f3f0051614edfaec54d429762b956~mv2.jpeg)
![](https://static.wixstatic.com/media/3021bd_7560e8731fa546e1984a640fee0cee65~mv2.jpeg/v1/crop/x_0,y_0,w_1920,h_884/fill/w_980,h_451,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_7560e8731fa546e1984a640fee0cee65~mv2.jpeg)
![](https://static.wixstatic.com/media/3021bd_f6aa3ae80dbc495788a9ee92df034744~mv2.jpeg/v1/fill/w_907,h_510,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_f6aa3ae80dbc495788a9ee92df034744~mv2.jpeg)
![](https://static.wixstatic.com/media/3021bd_03ec0b0ab3ac48ccab5e1ef9b1f16c59~mv2_d_3057_2215_s_2.png/v1/fill/w_980,h_710,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/3021bd_03ec0b0ab3ac48ccab5e1ef9b1f16c59~mv2_d_3057_2215_s_2.png)
Sketching
Sketching is such a powerful way to quickly communicate ideas that in my opinion it is still unmatched in its ability to create disposable low fidelity designs. I sketch a lot. Whether it is in my notepad getting my ideas recorded or on a whiteboard to communicate a new type of interface you will generally find me with a pen or pencil in my hand. It allows for less preciousness around any design, everything is so much more disposable in this format and that is exactly what you want at this stage. It also encourages broad feedback ("How do I get there?") as oppose to narrow feedback ("I don't like that font") which again is exactly what is required at this time.
![](https://static.wixstatic.com/media/3021bd_9e64516e8100487487d4afb2124aa31e~mv2_d_7003_1579_s_2.png/v1/fill/w_1331,h_300,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/3021bd_9e64516e8100487487d4afb2124aa31e~mv2_d_7003_1579_s_2.png)
![](https://static.wixstatic.com/media/3021bd_9742a57b2df642509e8c75a9dbaa72ad~mv2_d_7000_1579_s_2.png/v1/fill/w_1330,h_300,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/3021bd_9742a57b2df642509e8c75a9dbaa72ad~mv2_d_7000_1579_s_2.png)
![](https://static.wixstatic.com/media/3021bd_246af7c5c7ca402c99365f68c2748e7c~mv2_d_7000_1579_s_2.png/v1/fill/w_1330,h_300,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/3021bd_246af7c5c7ca402c99365f68c2748e7c~mv2_d_7000_1579_s_2.png)
Wireframes
I tend to combine my early wireframes with my projected flow of the product. They inform a rough guide for the layout. They should be clear and simple, no visual design or aesthetics here. They can serve as a good conduit with the stakeholders, signing off on placement/flow (broad feedback) etc rather than getting bogged down in font choice (narrow feedback) etc. Include lots of comments and annotations on them.
![](https://static.wixstatic.com/media/3021bd_8038d710f25e45059d73245a6035e5eb~mv2.jpeg/v1/fill/w_981,h_552,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_8038d710f25e45059d73245a6035e5eb~mv2.jpeg)
![](https://static.wixstatic.com/media/3021bd_4fc57efc14a847d1ba6427a96d566bca~mv2.jpeg/v1/fill/w_980,h_551,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_4fc57efc14a847d1ba6427a96d566bca~mv2.jpeg)
Mood boards
With Safedome I conducted mood board and colour exploration to run alongside flow and wireframe development. The reason for this was to lock in brand identity so pre-sales exercises could take place while Safedome was being built.
![](https://static.wixstatic.com/media/3021bd_e7dc0b627f054c1b990242cfc132e0d9~mv2_d_1200_3453_s_2.png/v1/fill/w_600,h_1726,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/3021bd_e7dc0b627f054c1b990242cfc132e0d9~mv2_d_1200_3453_s_2.png)
Prototypes
Once wireframes have been created (and continued to work on) I began to explore flows and interactions. The best way to do this is by creating prototypes. How do you get from one area to another? I will use Invision for this part which is perfect for providing a holistic clickthrough experience. Where Invision falls short is in exploring micro-interactions - how screen elements act and react with each other. This is where you can really surprise and delight your users. I generally use Principal to do this exploration but it’s a fast moving area and there are lots of alternatives!
![](https://static.wixstatic.com/media/3021bd_f6334058f3e44912b3b1d72c8674ae4d~mv2.png/v1/fill/w_598,h_144,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_f6334058f3e44912b3b1d72c8674ae4d~mv2.png)
![](https://static.wixstatic.com/media/3021bd_440b6176e64043648ea5502d66c5243e~mv2_d_3947_2160_s_2.png/v1/crop/x_0,y_576,w_3947,h_1499/fill/w_980,h_372,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/3021bd_440b6176e64043648ea5502d66c5243e~mv2_d_3947_2160_s_2.png)
![](https://static.wixstatic.com/media/3021bd_d100c7f9c4c844f48b0416d7a6d3214f~mv2_d_3947_2160_s_2.png/v1/crop/x_0,y_600,w_3947,h_1249/fill/w_980,h_310,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_d100c7f9c4c844f48b0416d7a6d3214f~mv2_d_3947_2160_s_2.png)
Please note I have lots more prototypes but am bound by NDA's around what I can show here.
Testing
How many test participants you involve, how closely your test participants match your actual users, and how many iterations of testing you run are all decisions shaped by budget and time constraints.
Usability testing is straightforward enough that anyone can - and should - experience running one. Being in the same room while someone uses your product is a powerful trigger for creating empathy with users.
​
I wrote comprehensive reports detailing every interaction the subjects experienced. I created a scoring system and prioritised each finding and logged them back into Jira.
![](https://static.wixstatic.com/media/3021bd_6de433c080fe40758a8395c13da4a00a~mv2.png/v1/fill/w_407,h_528,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_6de433c080fe40758a8395c13da4a00a~mv2.png)
![](https://static.wixstatic.com/media/3021bd_48355a73f52e48bea960780477e69ad3~mv2_d_1876_1476_s_2.png/v1/fill/w_600,h_472,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_48355a73f52e48bea960780477e69ad3~mv2_d_1876_1476_s_2.png)
![](https://static.wixstatic.com/media/3021bd_a5bdf39e703248e29a22b0fd8bad2519~mv2_d_1647_1408_s_2.png/v1/fill/w_725,h_620,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/3021bd_a5bdf39e703248e29a22b0fd8bad2519~mv2_d_1647_1408_s_2.png)
I also conducted several click tests that generated heat maps. This allowed the team to see where on the screen people were naturally drawn to. You always get surprising results which is great and exactly what you're after!
![](https://static.wixstatic.com/media/3021bd_16da67f0efc54cd5b122de2e8151414f~mv2.png/v1/fill/w_532,h_98,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_16da67f0efc54cd5b122de2e8151414f~mv2.png)
High Fidelity
I tend to start introducing elements of high fidelity design at the prototyping stage. I also developed the app icons across iOS and Android as well as delivering high fidelity assets to the development team.
![](https://static.wixstatic.com/media/3021bd_37cf7b6a62814d99b3f48b1b76489211~mv2_d_2000_2000_s_2.png/v1/fill/w_378,h_378,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_37cf7b6a62814d99b3f48b1b76489211~mv2_d_2000_2000_s_2.png)
![](https://static.wixstatic.com/media/3021bd_304c5ddc33cb490f8fbca6eaff7e6b4e~mv2_d_2000_2000_s_2.png/v1/fill/w_377,h_377,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_304c5ddc33cb490f8fbca6eaff7e6b4e~mv2_d_2000_2000_s_2.png)
![](https://static.wixstatic.com/media/3021bd_9c75e8355e2f49ca81db11a54747e7ad~mv2_d_2000_2000_s_2.png/v1/fill/w_443,h_443,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_9c75e8355e2f49ca81db11a54747e7ad~mv2_d_2000_2000_s_2.png)
![](https://static.wixstatic.com/media/3021bd_d79d17587ca04fd0ae7dc2b52da57f77~mv2_d_2888_1332_s_2.png/v1/fill/w_661,h_305,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_d79d17587ca04fd0ae7dc2b52da57f77~mv2_d_2888_1332_s_2.png)
![](https://static.wixstatic.com/media/3021bd_13aee7393bf84cbe9320a9b2e9ef210a~mv2_d_2000_2000_s_2.png/v1/fill/w_275,h_275,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_13aee7393bf84cbe9320a9b2e9ef210a~mv2_d_2000_2000_s_2.png)
![](https://static.wixstatic.com/media/3021bd_d9fbb414c1334a51a37dcb41a79c19c2~mv2_d_2000_2000_s_2.png/v1/fill/w_276,h_276,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_d9fbb414c1334a51a37dcb41a79c19c2~mv2_d_2000_2000_s_2.png)
![](https://static.wixstatic.com/media/3021bd_8a5f517ea3984eab8e85a19c15fe928d~mv2_d_2000_2000_s_2.png/v1/fill/w_275,h_275,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_8a5f517ea3984eab8e85a19c15fe928d~mv2_d_2000_2000_s_2.png)
![](https://static.wixstatic.com/media/3021bd_12f7d5bedbaa48ec8c16951dfab789b0~mv2_d_2000_2000_s_2.png/v1/fill/w_276,h_276,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/3021bd_12f7d5bedbaa48ec8c16951dfab789b0~mv2_d_2000_2000_s_2.png)