Unshackled.

Group Client Project.

Project Overview

During my first semester of my second year, I undertook my first group client project. My client was a 3rd year student at my university, looking for fellow students to create an app called Unshackled. This app aims to be a safe space for survivors of sexual assault, and will include a variety of features such as an emotion log, track goals, speak to helplines and more. The group consisted of four designers and one developer. We kept in contact with our client via email and received feedback after both of our presentations. As we had four designers, we decided to all design our own UI design first, so our client could pick and choose elements she liked from all of our designs, and then we designed a new user interface which included aspects of all of our ideas.

UX/UI Research

Before I started my wireframes, I decided to look for inspiration online for different features that will be used in Unshackled, such as mood trackers, calendars and chat rooms.

unshackledinspo

(Moqadasi, 2020)I first found this design from Dribbble.com. I liked the simplicity of the design which makes it easy to navigate for users. It clearly gives the options to select a mood and the activities that the user has done on a specific day. While researching, it was discovered that mood trackers faciliated self awareness and helped individuals to look back on previous moods to understand what was happening.(Schueller et al., 2021) This helped me to create a design that would cater to our users needs and further help them with their mood tracking habits.

unwind2

(Saputro, 2022) When looking for calendar user interface design inspiration, I found this design which I thought I could take creativity from for my own design. It is very minimal and is not too complicated and busy when using. The user can easily choose which day that they are on and add specific things for that day to help keep organised.

goodreadsapp

(Freepik, 2020) I then started looking for goal page designs. This one caught my eye because of the use of the progress bar. I thought this would be important to use in Unshackled so that our users can see their progress and not lose track of their growth. I thought that the widgets were easy to use and seperate out the users goals so that they can see them clearly and they can see how much left of that goal they need to complete.

unshackledinspo

(Sutariya, 2021) I took inspiration from this design as I liked the simple navigation and how you can go back to previous messages with other users. I think this is important to have in Unshackled in case a user finds a personal connection with another user, and wants to stay in contact. The search feature is important so that users can easily find a specific user that they want to talk to.

unwind2

(Szekany, 2021) With this sign up page, the use of personal grammar caught my attention. I thought that this would be beneficial for Unshackled because it adds a more personal and friendly atmosphere to the app, fitting the overall theme of Unshackled. This will make the user feel more at ease and as if the app is catered specifically to them.

goodreadsapp

(Madeira, 2020) For journal inspiration, I thought features from this design would work well. For example, you are able to write a few words each day in your journal so that there is a space for the user to write down any thoughts or feelings. This will be an important feature for Unshackled because it will allow users to be able to look back on previous days to see any personal growth or to look back on memories. This design also allows the user to keep progress of their journalling as well as their moods.

App Research

RAINN:

When looking at what other sexual assault survivor applications were available on the market, I came across RAINN. It is an app that gives survivors of sexual violence and their loved ones access to support, self-care tools and information to help manage the short- and long-term effects of sexual violence.



unshackledinspo

(Berkowitz, 2020)

unwind2

(Berkowitz, 2020)

goodreadsapp

(Berkowitz, 2020)



The app has multiple features such as finding support. The app’s ‘hotline’ feature can connect the user with one-on-one support from a trained support specialist on RAINN’s national sexual assault hotline through phone or online chat. The support is free, confidential, and available 24/7 and the user is also able to chat with other survivors with the Help Room feature. The app offers a self-care section with contains exercises to help you take a moment for yourself. It includes a mood tracker to help the user reflect on how they’re feeling and see relaxing visuals from The Monday Campaign to help destress. This section also includes audio exercises from Headspace for calming meditation. Within this app, there is also a ‘learn more’ section which includes helpful information on sexual violence topics, finding and giving support and healing. Users can also hear from survivors offering their own real-life stories of hope or healing.

BrightSky:

unshackledinspo

(Hestia, 2020)

unwind2

(Hestia, 2020)

goodreadsapp

(Hestia, 2020)

Bright Sky is an app based on domestic violence. It is a safe, easy app and website to use that provides support and information on how to respond to domestic abuse. It is suitable for anyone that is experiencing domestic abuse, or who is worried about someone else. The app helps users to spot the signs of abuse, how to respond and help someone find support. The app's features include, a UK-wide directory of specialist domestic abuse support services with contact details, content to help users understand if they or someone else is at risk, links to further resources and information on domestic abuse and information to help users stay safe online.

My Chosen Branding

mindmap

Logo Designs

Wireframes

...
...
...
...


I then designed some basic wireframes so that I could start to visualise my prototype, and so I had a guide to follow when starting my work within Figma.



High Fidelity Wireframes

...
...
...
...
mindmap



After we received our individual feedback, we came up with an idea to create a document in which we all give each member of the group specific UI screens to design. We seperated out the screens so that we all designed aspects that our client particularly liked from our original designs. We then created a Figma file which allowed us all to work together within the same space. This gave us the option to see what other group members were doing, and this meant that we could communicate together while working. This aspect of Figma was very useful to us as a group because we were able to help each other when needed, and give each other suggestions and feedback. Figma also allowed us to make notes and label parts of our designs which is industry standard, as it helped our developer see how our designs will work within the app.

mindmap

Final Branding Guidelines

mindmap


My Figma Wireframes

mindmap
mindmap

Further Annotated Mockups

mindmap
mindmap
mindmap


After presenting our adapted wireframes in week 12, we recieved very positive feedback from our client. She loved the new colour scheme and said that we implemented her previous feedback amazingly. Our client loved the new layout we chose and our final logo choice as it reflects the broken chain. Regarding further feedback, our client mentioned wanting an SOS feature, which has now been implemented into the wireframes. Choosing a tagline was also mentioned, she liked 'unlock your freedom' as well as 'create your new normal'.



Final Prototype

Handover Document

We were also required to create a handover document to give to our client, so that they are able to carry on with the prototype themselves and to see our work within the Figma file. I created a Google folder which includes the link to our Figma file, as well as our branding guidelines so that they can carry on with the chosen guidelines.

Handover Document

Project Reflection

I enjoyed working on Unshackled, it was a new experience completing a project for a client. I was happy to be designing something that aims to help individuals and I really enjoyed designing our wireframes once we finalised our branding guiedlines. Figma was also a suitable tool to use for this project as we were able to all work together within the same file, which allowed us to help one another when needed. Luckily, there were no major setbacks. There may have been some slight unreliability within the group but this did not cause any major issues, I was still able to complete my design work on time. Regarding time management, I was able to keep on track with my work by creating lists each day so that I knew what to complete on a specific day. We also made sure to try and have as much work done by our final presentation, so that our client could see our final pieces of work.