Prev

kyletakesphotos

Prev Case Study

Next

DOTUS

Next Case Study

WISHES

WISHES DISPLAY

WISHES is a mobile application that helps guide users through the unpleasant task of writing out their Advance Care Plan. It seeks to simplify the tough questions, and aids people in organizing their thoughts into one handy document right in their phone.

In an day where death is rarely thought about—let alone planned for—WISHES aims to simplify the process of creating a will and putting a plan in place in the event of an untimely passing.

PROJECT INFORMATION

Tags UI/UX Design, App Development
Duration 6 Weeks (Part Time)
Collaborators Hilary Romans
Role Designer + Developer
Tools Adobe XD, HTML/CSS/JS, PhoneGap

This was a small group project that spanned across two different courses. Hilary and I collaborated throughout the project, with one of us taking the lead at each stage. Hilary lead more of the early, visual and UX/UI stages of the project, whereas I lead the UI/development. Hilary delves into more detail on the UX side of things in her case study, which can be viewed here.


Process

Problem Exploration

Our UX methods followed a linear approach in furthering our understanding of the problem. The time we had for this project did not allow us to conduct the extensive research and user testing we would need in order to fully realize this product. With that in mind, we had to make some assumptions along the way.

Our starting point was a user journey map, depicting a scenario where WISHES would come in handy.

WISHES Journey Map

User Journey Map

From here, we generated two personas that represent our potential users: the older person looking to get their thoughts and wishes in order; and the young person, who probably doesn't think much about death.

WISHES Persona 1

Persona: Elderly Lady

WISHES Persona 2

Persona: Young Chap

Userflow

As WISHES is a single functionality app, we wanted to keep the number of steps minimal and focused. Users enter their information, record their answers, (digitally) sign it and finally have two witnesses sign it. As previously mentioned, we made an assumption here about the legality regarding digital signatures. As there was a legal grey area around this and we had no immediate plans to launch the app, we simply proceeded as if it were allowed and legal.

WISHES Userflow

Wireframes

WISHES Wireframes

Mockups and Interactions

Once the wireframes and visual design were finalized, we created mockups and a simple prototype to see what the app would look and feel like. The simple prototypes we created would later aid us during the development process.

WISHES Sign In

Sign Up

WISHES Sample Questions

Response Recording

WISHES Witness Signatures

Witness Signatures

App Development

Development for our app was done in basic HTML/CSS/JS, and deployed with PhoneGap. Since we had the mockups and interactions completed, development was a relatively simple task: layout the structure in HTML, make it look like our mockups with CSS, then make the darn thing work with Javascript. However, we realized quickly that we were a bit too ambitious with our initial userflow. Given the scope of our project and the time we had, we felt it was not worth the time to figure out how to implement an account system. So we dropped that feature to figure out another day. As well, by this point in the project, we did not have the time to properly implement saving the user's progress so they can edit it later. So our app became a one-and-done type of app.

Since our app was made in basic web development tools, we made it available to view online. Note: We designed it for the iPhone X, so the experience may differ if viewed on mobile or on a browser size that isn't 375 by 812.

VIEW APP ONLINE

Lessons Learned

Completing this project further refined my design process and developed (ha) my understanding of web development. Working with another designer helped highlight what areas of product design I like and am good at, something I'm still always questioning as my design career is in its early stages. As well, it provided an opportunity to practice explaining and backing my design decisions in a team setting. Lastly, Hilary and I learned early on how complex even a simple application can be, and the amount of work that goes into the handling of data. We both now have a greater appreciation for the work of IAs and developers, and we can design more thoughtfully with this basic understanding of how web applications function.


Thank you for reading!