An Exploration of UX / UI
I decided this week I’d begin learning Sketch and InVision to complete a more “designed” version of my current mobile application. I laid the groundwork for the design in my winter thesis presentation slides, creating a style guide of sorts (colors were chosen, kerning for text was set, duotones of images were created). I now feel fairly comfortable navigating Sketch and coordinating with InVision prototyping, and have created a rough design with interactivity. If I continue at this pace, next week I will have the design finished and ready for development.
Design choices
I had to make many decisions in terms of navigation, microinteractions, and the overall roadmap of this mobile application. I will create several more options for the “home” and “next” buttons for the purpose of user testing. My UX / UI class emphasizes empathy in design, so it is crucial that I complete testing with individuals other than myself to create an intuitive application. The current navigation is as follows: Splash screen, log in with go button, webcam view with displayed slide-out emotion list and “home” and “next” buttons, and playlist view with embedded YouTube videos. I will consider adding share capabilities and designing icons accordingly. It took me many iterations to decide on an effective way to display the emotion list (I considered push notification, top-slide down screen, separate instruction screen), and I settled on the slide-from-left menu as shown below. I will continue to research music applications and see if I can find a more fitting solve for the song “queue” functionality (PLAYLIST VIEW screen, below). I’ll play with gradients, transparency, backgrounds, and differing colors to create a visual hierarchy that indicates clickability. Users mainly view apps vertically, but a horizontal option for playlist video screening is crucial and will be reflected in my prototype. Seeing the app come alive was certainly rewarding and I look forward to developing it further next week.
