Description

Create and design a concept for a smartphone app. In order to be as real as possible, several assets will be created including a user interface, content for all screens, branding, and—specific to this chapter—animated interactions. A layout that showcases an interface design is pretty common at this point, but adding animation to extend the UI can show a breadth and depth of understanding interaction design.

Specifications

At least twelve screens should be designed, though you might find the need to double that for it to feel complete. Overall dimensions should be sized to current smartphone specifications. The interface and layout should show a breadth of the overall experience. Final assets will include screens displayed in a PDF and printed book, an interactive prototype, and video files showing animated interactions.

Intent

Start with conceptualizing an idea for an app. Steer clear of generic and oversaturated categories (food, socialmedia, productivity). Find a niche, but make sure there are more than five people that would actually use it. This is an example from one of my former students: "Cartograph helps the user plan their ideal road trip through NationalParks. It asks questions such as the length of the trip, key points, interests, and skill level in order to give the user a personalized itinerary."

Research and Methodology

What would be useful to the world at large or a niche group? Consider the kinds of apps you use and what the purpose of that app is. You’ll start with sketching the user interface. This preliminary research will help inform and guide your concept. Do not simply reiterate an existing app. Write a100-word brief that outlines the following:

• What is the purpose?
• Who is your audience?
• What problem does it solve (or whatideas does it explore)?
• What kinds of actions might be associated with those?
• Pick a few that might be important and stick with them. Three concise functions visually expressed well are better than ten that are half-baked.
• What are the benefits of using it?

Content

This project extends the fidelity of the ones we completed in Chapters 1 and 2. Here, we want the screens to look as finished as possible because animation will be applied in the form of interactions and screen transitions.Take time to create text copy that’s real enough to look believable. Of course, this doesn’t need to be created from scratch. That doesn’t mean you should copy all the content wholesale, though. Looking back to the UX copy we discussed in Chapter 2, make sure that the tone fits the aesthetic. Dig into the details and avoid buttons that are labeled with overly generic text. The overall product needs to read like the branding you design for it.

Naming

A strong name will help this project feel complete. Something sharp and succinct is good, but avoid the cliché of app names that end in a “ify” “ly” for longevity’s sake. A witty approach is always smart, but avoid names that might challenge the merit of the concept.

Information Architecture

Creating a map to “bookend” the entire app is helpful to start. Otherwise, it’s difficult to tell exactly how many screens you might need to complete the experience. Start with logging in or signing up (if that’s needed)and work your way through completing tasks. As you work your way through what kinds of functions this app might entail, refer to your research. Don’t try to fold too much into it, or you’ll end up with clutter and confusion.

Sketches

Once you’ve figured out how many screens you might need, start with sketches. Design a first batch of six initial screens to see how various layouts might work together. Pick them from random places across the sitemap, so they’re not just the first six. Include things like opening branding, screens with form fields, long-form copy (if needed), and placeholders for visual elements such as photos or illustrations.

Wireframes

Using your sketches as a guide, create wireframes that are sized for a current smartphone. This step might yield a confirmation about the amount of content you have on each screen. It also might help you realize that you need to reduce a bit to increase hierarchy. Instead of a separate stage, you might choose to create wireframes by designing the first few mock-ups without color, texture, and imagery.

Branding and Imagery

A finished brand will separate portfolio quality work from visual experiments. Design a logo that’s flexible enough to have impact on an opening screen but is also legible at very small sizes. Think about how other branding elements like typography, texture, and color might work their way into the layout. Select typefaces that pair nicely together, have multiple weights, and are legible on digital devices. Choose a strong dominant brand color with one or two subordinate colors to add depth and contrast (in limited doses). If your app requires photos, select public domain or creative commons imagery from websites such as unsplash.com, gratisography.com, pexels.com, or archive.org.

Mock-Ups

Extend the six sketches to twelve digital mock-ups. You should build using software that has the ability to easily prototype later. Keeping all the screens easily visible will let you compare them to each other as you design them. Don’t try to completely finish each screen before moving on to the next, because you’re likely going to make changes as design for different scenarios and functions. Get to about 75 percent and come back for the final touches afterwards. Consider how adding size and color to action items, such as buttons, helps the user advance to the next step. Remember, not all content might fit vertically. Design content for a scroll if necessary.

Prototype

Link the mock-ups together through the interactive features of the software you’ve used. Make sure that there are no dead ends in the functionality (i.e., a user can’t advance or go back). Test this out yourself, and have a volunteer do the same to confirm clarity in your UI design. As a last step in the prototype process, record yourself testing every screen at apace that a first-time viewer can follow. Sometimes, this is the best way to easily show someone the entire experience in one go. Export the recording as a video file for later use.

Interactive Animations

After the initial screens have been designed, choose six interactions to prototype and animate. They should vary in complexity: two can be simple feedback animations like loading screens or menu instances. Two more should show interactions that animate directly with content, perhaps revealing new content or screens through the interaction. The last two should be complex, leveraging multi-step functions across three or more screens. There are many digital tools that are capable of designing animations with simple to medium complexity. However, I find it easier to stick to After Effects because of its capability in designing complex animations. Make sure to apply easy-ease to your keyframes, and then tweak the velocity curves to make your interactions feel snappy and responsive.Export these six animations as video files and upload them to a video hosting platform such as Vimeo (their free option is sufficient). Then, assemble all six animations in a new timeline, and introduce each one with a text description of the interaction. Export the compiled animations as a video, and upload that as well.

PDF Document

Images of various screens from this project will serve as project thumbnails when showing it in your portfolio, but a PDF documenting the complexities of the app you’ve conceived will really show your ability to dig into the details. Set up a new document in InDesign with at least as many pages as you have screens. A document size that’s portable is recommended—we’ll discuss why in a bit. The document should start with a description of the app, followed by branding and sketches. Then introduce one screen per page, with annotations and labels accompanying each. You can use hairline rules to “point” to parts of the UI, but don’t let them dominate the layout. Interactive button states, loading screens, and interface animation can be shown and described as well. On a separate layer, create buttons in the layout that will link to the six interactive functions you’ve animated. You can use the hyperlink function in InDesign to link these to the Vimeo URL for each respective video.Finally, at the end of the document, include links to the interactive prototype, video of the app walkthrough, and video of all six compiled animations. Be sure to test the links from the final PDF.

Printed Booklet

This may sound counterproductive in context with a digital app, but printing aversion of the PDF you just designed can be valuable in face-to-face situations (i.e., an interview). It allows you to discuss design and functionality without crowding around a phone or screen. And if you’ve approached this project with creativity and craft, it just looks good in a printed booklet. This is the reason I mentioned designing it as a portable size as well. Remember the links we placed in a separate layer? Hide that layer before sending the file to print, so that they don’t display in the printed book. You can replace them with QR-codes that can be easily scanned with a smartphone.

Reflection and Revision

Compare the extensive list of deliverables in front of you to the questions you answered in your research brief. Does the app have a clear purpose? Can you easily describe the problem it helps solve, or the concept it explores? Is there a clear demographic that might use it, and does the visual approach appeal to that audience? Does the functionality make the app useful or interesting? Compare it to actual apps that you can download and use. How does it stack up visually? Spending a bit more time to reconcile any of these questions is a valuable investment in showcasing a large-scale project.

Goals and Outcomes

A successful finished product should really show the depth and breadth of the concept, and attention to detail at every level. The concept and content should feel realistic, and the visual design should be impactful. These both support the interaction design and provide a reason to go through the final step of animation. This has the potential to be a great portfolio project if done well, and it comprises skills from four disciplines: UI,UX, animation, and IxD. The final PDF should enhance the app screen designs with notes and annotations but not overwhelm it. The six animations should feel realistic and snappy. The prototype should allow a person to feel what it’s like to use the app. The printed booklet is the icing on the cake. The deliverables from this project can be shown on your website, shared as videos, tested on a real device, and shown in person. That’s a huge advantage in showcasing a portfolio piece.