UI/UX Design – iOS Case Study
Project Brief
This project aims to design a mobile app for a non-emergency service using Adobe XD and implement the Apple iOS design style and guidelines.
Project Idea
Racism can come in many different shapes and forms. It needs to be heard whether it is a hate crime or subtle racist behavior. The number of hate crimes in the U.S. has rapidly increased within the past few years. According to USAFacts.org, “Anti-race/ethnicity/ancestry offenses increased the most, accounting for 42% of the rise in hate crime between 2014 and 2019.” Since the pandemic’s start, hate crime against Asians has worsened. “Hate crimes against Asian people in New York City have increased by 335% this year when compared to the same period last year.” (CNN) Asian-American and Asian immigrants need a way to get proper counseling and report non-life threatening, racist behaviors to the correct local agency to know they are heard. Their concerns are screened and addressed appropriately.
Design Process
I watched many tutorials on Adobe XD since it was the first time I used it for a project. Since this is an iOS app, reading the Apple HIG is necessary and helpful. I gathered feedback for the initial app design and kept working on finishing my app. After spending designing the individual screen, I created a prototype to see how it would work and fix any errors on the way. It is a back-and-forth process that requires many minor adjustments to ensure the app works the way I want.
Goal
Creating a platform to anonymously and safely report racist behavior on the go without worrying about going to a police station or government institute.
Challenge
Being the time designing an app, many challenges occurred along the process. However, maintaining accessibility is the biggest challenge. Since I used many colors in my previous design, it was hard to approach this design knowing there were constraints about colors and typefaces. As you can see in the final designs, the color scheme is not very accessible, and I need to learn from this project and improve future plans.
Persona
This project was created during COVID, and the primary target audience is Asian immigrants and Asian Americans, but this app also serves other non-white American individuals.
Design Research
After finishing the proposal for this project, I conducted some Competitive Audits on similar apps available on the market. I created a User Flowchart that would help better clarify all the functionality and pathways within my product. I keep referring to these steps throughout my design to ensure my app works as intended.
Usability research findings
We do unmoderated remote usability tests using discussion posts on the Canvas platform. We each include a post explaining the functions of our app and provide a prompt so the users can follow and test out the app. The users must record their reaction while using the app for about 10 minutes, upload that video on an online video-sharing platform, and embed it into the initial post as a reply. I then watch the videos and fix my app based on their feedback.
The most frequent feedback I got for my app is that users were confused on the last screen with the option to give Feedback or Close the app. I assumed they would know that was the end of the app, so I didn’t make any more screens after that. I fixed it by adding more screens to indicate that the app ends here. The same happened with the 911 screen, so I also set that.
Most users didn’t recognize that my app had no Register/Login option. I intended that users would be able to report the incident anonymously and would also speed up the process. However, one user suggested adding that step in case someone wanted access to their report in the future. I think that also makes sense and would be a helpful tool. I could use that to build an online community that shares similar experiences in the future, so I created that option in my app.
When I initially submitted my prototype for discussion, I couldn’t work on the Menu options, so I spent more time working on finishing them. One user suggested they should be able to select and deselect, which I think makes much sense in real apps, so I also fixed that issue. Some other feedback included fixing some typos and the spacing throughout the app.
I focus on which step most users struggle with, such as the Feedback screen. I will work on fixing that first. Then I started to work on other feedback that pointed out some flaws I didn’t recognize while designing the app. Then I work on minor changes to perfect my app in general. There is also some feedback that I don’t think applies to my app, so I didn’t change my design based on those.
Individual screen designs
Prototype walkthrough
Sources and citations
Apple. (n.d.). Human Interface Guidelines. Apple Developer. https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/Links to an external site.
Babich, N. (2018, February 12). A Comprehensive Guide To Mobile App Design. Smashing Magazine. https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/
CNN. (2021, June 4). Hate crimes, shooting incidents in New York City have surged since last year, NYPD data show. Retrieved from https://www.cnn.com/2021/06/04/us/new-york-city-hate-crimes/index.html
USAFacts. (2021, June 8). Hate crime data: The value in expanding our sources. Retrieved from https://usafacts.org/articles/hate-crime-data-value-expanding-our-sources/?utm_source=google&utm_medium=cpc&utm_campaign=ND-Race&gclid=Cj0KCQjwm9yJBhDTARIsABKIcGarYRfPvc9C8Pk8kfWH4SwOFQ1cq8kds060g6jiGKBm3I7tqNT5-A8aAsKuEALw_wcB
Mimi Nguyen's Design 