This project was to create a dog app that "translates" your dog's barks into words. The process of designing this new app included, creating the app name, tagline and outlining the app's functions, roles, and competitors. After building out the personas, I created a mood board to tie the look and feel with the app's potential users. The final steps included creating a cohesive information structure, creating and testing wireframes, and finally creating a high fidelity prototype and mockup.
This project was to create a dog app that "translates" your dog's barks into words. The process of designing this new app included, creating the app name, tagline and outlining the app's functions, roles, and competitors. After building out the personas, I created a mood board to tie the look and feel with the app's potential users. The final steps included creating a cohesive information structure, creating and testing wireframes, and finally creating a high fidelity prototype and mockup.
When I was creating this dog translator app, I specifically designed each part of the UI/UX process to answer important questions. First—what does the app do, who is it for, and where is it going to live? From there, I outlined the functions of the app, the roles of the users, and the goals for the app. I also researched possible competitors.
Once all the research was complete, the next phase was to communicate the look and feel of the app. It is important to note that how the app communicates visually needs to align with the app's target audience and their goals.
UX: Next, I created a content site map (with no design elements), illustrating what content gets displayed and when. User testing would start at this phase to ensure the content aligns with the user's expectations. Several rounds of feedback is typically done so that the goals and functions of the app are thoughtfully considered. Once that phase is complete, it's time to work on a wireframe map.
UI: The purpose of creating a wireframe map is to think about the elements of the app and how they relate to the specific goal for each screen. Placement and scale are among the things considered that can greatly influence the app's usability.
The final phase is to add the design look and feel from the previous mood board to the final content and UI structure. The end product is to create and share a working mockup. This is the final phase of user testing before the app goes into production.
This process becomes a repeatable system that ensures the highest quality results in an efficient amount of time.
April 2020
by Joel Gabiola
UX/UI
