Plan and Sketch Everything
I wasn’t excited to learn Hype as I didn’t have a good first experience with the first product I was asked to make. It was a lyrical music video meaning I had to match up a speech or song to words.
I chose to do an inspirational speech by Eric Thomas called “How Bad Do You Want It?” Long term I was to prototype an app with three separate projects built in all revolving around a theme of my choice. I enjoy motivational videos and goal setting apps so I wanted to start here with this video.
I started by sketching each and every frame for my video by hand. This was incredibly time consuming but made creating the video much easier as I had an exact vision of how I wanted it to turn out. At first it was difficult to illustrate what kind of motion I wanted, but I ended up with different sized arrows and parentheticals. Not a perfect system as using a different color would have been easier looking back on this experience, but the time between sketching and creating the video wasn’t long so I remembered my thought process when editing the video.
My external mouse had decided to stop working completely with Hype 3 during this time so timing out different sections of video was even more difficult as I only had a trackpad to work with to drag video sections around the 30 second clip. All in all the video wasn’t too bad and it came out relatively well.
The second project inside the app was an interactive infographic. Keeping with my motivational theme I decided to gather facts about successful individuals and their habits in what made them who they are. For example, Warren Buffet is continually learning, he finds time to stop, read, and think, he gives back to society, and stays out of debt and saves. I found at least four habits and a quote from the individual regarding their success. This process took a while especially the quotes because not all of the individuals are as prone to being quoted, Obama for instance was easy to find a quote for, but Satya Nadella (Microsoft’s new CEO) wasn’t as easy to quote.
This portion of the app was interesting because it reminded me of the importance of creating for your medium. When I made the infographic on it’s own I had a blue color scheme to it and eight individuals, but my app was primarily red and in a portrait orientation. Instead of forcing the user to be in landscape mode just to use this one part of the app I changed the format to a 3x2 square as 2x4 or 4x2 either made each person’s box much too small or much too large. Then of course I had to redesign it to match the red color scheme. Even though these changes were obnoxious at the time, I learned a lesson of planning for my platform and consistency between ideas.
Finally the last project and part of the app prototype was a full UI experience that tied the previous projects together. Since the work behind all of this inspiration can only be done in small increments I called my app Steps. For this experience I wanted a Loading Screen, Home Page, Goal and Edit Goal Pages, a Menu, Calendar and then a page for each of the previous projects.
As usual this took planning and LOTS of sketches. By this time though I already knew how I wanted all the pages to interact and how I could incorporate the video and infographic. There is a certain feeling of satisfaction from seeing a plan come together.
From my experience designing Steps, I have come to appreciate the value of a well thought out plan. Before this I would think about apps as different parts that were brought together into one experience, but apps are one experience throughout all steps of the development process. This creates a much more seamless app for the user, and is vital to a great UX.
Brian Talbert is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to projects in the DGM 2280 Course and representative of the skills learned.
