Hello Friend

UX/UI Design
Project Details
Project Overview + Topic

Created by

Date

Context

Medium

Students are asked to explore a choose a peer's assignment and explore the topic while also modifying it to reshape and recreate the application through the creation of a screen-based interface. The topic of this project will be to reshape an application created by their peer in assignment 1.

Paniz Adiban

2020

reshaping previous designs

application prototype

Design Problem

For this assignment, I chose to recreate an app that provides support to victims of domestic violence. The design problem was to really take a project that a peer had just worked on and reshape it in the ways we would like to see it changed or improved. The app that I had chosen was to create a safe space for women to make them feel comforted and safe and my aim was to change the actions provided by the application but still continue to provide women with the same feeling although it would be done through different actions and experiences.

Initial Research and User Flows

Although there was previous research done on applications that were related to domestic violence, in order to get a clearer grasp of the existing applications and how they were displayed, I decided to complete some research as well. I found a few examples on various websites. Each of the examples I found supported victims in various ways. With my application, I would hope to combine these functions in a meaningful way as well as created an effective visual language. For my user flows, I created 5 different basic scenarios the user would experience frequently such as, login to their account, complete a quiz on the dashboard, create an entry in their diary, search for a resource, and quickly shut down the app.

Wireframes

In order to understand what to include in my application and how to orient this information, I created low fidelity wireframes and looked at what each page would include. The main pages I originally intended to create were dashboard, diary, resources, and get help. Later on resources and get help were combined to avoid repetition of the app content as well as not confusing the user in terms of what the function of each page is. As I began looking at how to display the pages within the app, I decided to combine two of the pages and look at how to show the screen to the user. Since many of the resources and the articles would be external, the app itself features limited text on the main pages. I used a range of subtle green shades to create the mid fidelity version of the prototype. I began with focusing on two aspects: the quizzes the user could take and the diary page of the application. The aim of the application is to create an efficient and calm space for the user and help them find resources quickly. The iconography was kept fairly simple at this point.

5f8f0da27201d670bf8e0423_user flows assi
5f8f0da2fd320e8c567b0de1_user flows assi
Preference and Usability Testing

The preference testing came during the middle of the high fidelity prototype process. It was a way for us to see what our peers as potential users, would prefer to see on an application based on the context of what the app was offering the user. Things such as layout, colour use, and even functionality were explored during this class discussion. The usability testing exercise was created to allow us to create scripts for potential tasks that would be completed in a user test. These scripts were aimed at testing the most important functions of our apps to ensure that the user can effectively and efficiently use these apps.

5f963ed66b7aaca8dc7dd71d_Screen Shot 202
5faaebc73d1d0b221224accf_Screen Shot 202
Proposed Solution and Results

The final edits of the app were mainly focused on formatting the pages and fixing alignment issues. The app colours were changed to two simple green shades that were used consistently for the app. The main animations for the app were used throughout the diary page and the resources page to create a seamless and efficient user experience. Below there is a short clip of the animation as well as the link to an interactive prototype. Click the link below to view the digital marketing website for the application.