Beautify App

Original Concept and Design

Introduction

The Beautify App was created in a user interface design and development class. The project was multiple steps, starting with initial concept brainstorming and goals. From there, the user experience design process began. I created an empathy map, completed a golden thread exercise, and developed a quad chart with users in mind.

The next part of the app development came in the form of the interface design. The app icon was made through a series of sketches and iterations before coming to a final design. A research exercise came in the form of a competitive analysis of five different applications that have similar concepts or features. Once I analyzed other app competitors, I created a multistep journey map of a user’s potential experience when navigating a task in the Beautify app.

A crucial step in this process was getting potential user feedback. While this project was created during the pandemic, I was able to send out a survey that provided essential feedback from an outside source. Their experience with the beauty industry and related applications were considered in the survey, and participants also provided feedback on low fidelity UI elements to be used in the app. With this research in mind, I began designing a moodboard.

The moodboard was to be used for multiple purposes; concrete elements made in the intended style for the application helped to guide the rest of the design process. Icons, the color palette, and typography were considered at this stage.

User flows followed by another survey ended this step of the process. Using this initial feedback, I was able to make changes that already improved the user experience. From there, I began sketching, wireframing, and prototyping.

My sketches, after feedback, were converted into wireframes, which eventually were created in a high fidelity format. I prototyped the app so tapping and scrolling were functioning. Three other UX students in my class went through and gave me final pieces of feedback which I used to finalize the design of the Beautify application.

Development

During this project, I used Adobe Illustrator to make the vector elements, Adobe XD for prototyping and development, and Adobe InDesign to compile everything into a single document.

Results

While working on this project during the semester, I received very useful feedback and constructive criticism. Each step of the process presented unique challenges–it was my first time using Adobe XD, so I was very happy to complete my first project in a prototyping program. I ended up using those skills in a similar program, Figma, for a different project in another class. Overall, I learned many nuances in design that I know will help me in the future.

Example Wireframes and High Fidelity Screens