Today’s world of mobile app and Web-site development is seeing high adoption of UX design and research, from planning to product launch. UX design is a human-first approach to product design and sets the tone for app development, keeping the focus on satisfying your users. Whether you’re designing physical or digital products, your goal is to create useful, easy-to-use products that provide a great experience to the users who interact with them. Those everyday interactions should be enjoyable and accessible to all users. Throughout your design process, it’s important to closely integrate your UX and UI design efforts. UI design focuses on the look and feel, the aesthetic experience of a product, including its fonts, colors, visual affordances for interaction such as buttons, and page layouts.
In this article, we’ll focus on our UX design journey, creating a motion-design app for smartphones and tablets. A unique feature of this app is its platform: The use of smartphones and tablets for professional motion design is not common. Designers typically create motion designs using applications on desktop computers.
Champion Advertisement
Continue Reading…
Motion Design
Motion design applies graphic-design principles to film-making and video production through the use of lifelike animation and visual effects. Examples of motion design typically include films, animated text, and Web-based animations. Animation can be vital to enhancing the user experience and is a powerful tool for digital storytelling.
Motion-design applications are known for their animated user interfaces, which make navigation interactions seem natural. Most motion-design applications are Web or desktop applications, including Adobe Photoshop, Adobe Premiere, and Adobe After Effects. But content creators may sometimes want to create videos with professional-quality animations, visual effects, and motion graphics on their smartphone or tablet. To address this need, we created a mobile app for motion design, the Alight Motion app.
Using the Alight Motion app for smartphones and tablets, designers can create videos with professional-quality animation, visual effects, and motion graphics. The Alight Motion app supports multiple layers of graphics, video, and audio, and provides a library of vector shapes and custom vector and freehand illustrations. Users can export their video projects in H.264 and HEVC formats and as GIF animations or PNG sequences.
Our UX Design Process and Deliverables for Alight Motion
Figure 1 depicts our UX design process, which began with user research to identify the problems that the Alight Motion app needed to solve for our users. Based on our learnings, we developed user personas to build empathy with our users and defined requirements. During ideation, a flow of ideas led to sketches, then paper wireframes. When designing this mobile app, we created digital wireframes, then working prototypes, and ultimately, high-fidelity mockups of our final design solution. We conducted usability testing to identify users’ painpoints, then iterated on our final design, addressing the issues we had identified during testing.
Figure 1—UX design process
Kicking Off the Design Process
Through our user research, we identified the central design problem that the Alight Motion app needed to address: we needed to make the sophisticated features that are necessary for editing motion graphics and creating keyframe animations easily accessible on the small screens of smartphones and mobile apps.
Our goal statement for the Alight Motion app covered the audience the product would serve, what the product must do, and how the product would solve the users’ needs. To provide an ideal solution to our design challenge, our goal was to empower the next generation of content creators by providing portable, immediate access to the Web for editing motion graphics.
User research is crucial in creating a product that satisfies users’ needs. As we conducted user research, we gradually began to identify and address the users’ painpoints, enabling us to create more useful app features such as making our solution fully cross-platform, to work on iPhone, iPad, and Android devices.
Creating User Personas
A user persona describes a type of user whose goals, concerns, and characteristics are representative of those of a larger group of similar users. Creating user personas that were based on user research helped our product team build empathy with our users and enabled us to tell their stories. You can also leverage these user personas when recruiting usability-test participants. User stories can helped us to prioritize our design goals, unite our team, inspire empathetic design decisions, personalize our design pitch to stakeholders, and stress-test our designs. Figure 2 depicts a user persona for a typical user of the Alight motion app.
Figure 2—A user persona
Creating Our Early Design Deliverables
Throughout ideation and design, we discovered, defined, and designed solutions for the user problems we had identified.
Creating Wireframes
A wireframe is a basic outline of a digital experience for an app or Web site. It establishes the basic structure of the app’s pages, highlights the intended function of the product, and saves time and resources by supporting quick, iterative design. Wireframes showed the elements we needed to include in our design, enabled us to identify and address problems early, and helped stakeholders to focus on structure and functionality rather than visual-design details. UX designers typically create paper sketches outlining a product before converting them into digital wireframes. We sketched wireframes of the Alight Motion app.
Sketching Wireframes
Sketching wireframes on paper is a fast, inexpensive way of exploring lots of design ideas. Designers usually start with paper wireframes when planning the initial design direction. Paper wireframes enable rapid iteration, are a low-commitment approach, and encourage honest feedback and collaborative design. Figures 3–6 show some of our paper wireframes for the Alight Motion app.
Figure 3—A paper wireframe of the app’s layout Figure 4—A paper wireframe showing the app’s key interactions Figure 5—A paper wireframe showing the app’s workflow Figure 6—A paper wireframe showing a design detail
Creating Digital Wireframes
Wireframing applications enable you to create digital wireframes when you’re designing the look and feel of a Web or mobile app. Our digital wireframes let us explore how the product should function and how the user could move through a workflow, without our having to design every detail. Key features from our paper wireframes carried over into the digital versions. There are a lot of design tools that support digital wireframing, including Figma, Adobe XD, InVision, Sketch, Balsamiq Mockups, MockPlus, and Pencil Project. Figures 7–9 show some of the digital wireframes we created for the Alight Motion app.
Figure 7—A digital wireframe of the app’s layout Figure 8—A digital wireframe of a video display Figure 9—A digital wireframe of the Alight Motion Help Center
Developing a Prototype
A prototype is an interactive model of a product that demonstrates its key functionality. You can show your prototype to users so they can imagine the experience of using the finished product before your team develops it. Typically, in prototypes, links and nodes depict an app’s workflow and functionality, as in the prototypes of the Alight Motion app that are shown in Figures 10 and 11.
Figure 10—A detailed workflow for a part of the Alight Motion prototype Figure 11—Comprehensive workflow for the Alight Motion prototype
Evaluating and Improving Our Design
Because of the agile nature of UX design and the need to test and refine visual layouts, interactions, and workflows, UX design is generally an iterative process. Iterative design is key to designing successful user experiences.
Conducting a Usability Study
A usability study is a method of research that enables you to test and evaluate how easily participants can complete core tasks using a product. By conducting a usability study, we could determine whether our product design was on the right track or needed adjustments. A good usability study should assess how well a design works, considering the full user experience from the user’s first contact with the app through the completion of its key workflows. Benefits of usability studies include observing users’ actual interactions with an app, challenging the product team’s assumptions, and providing in-depth feedback from target users.
We gathered feedback on the usability of the Alight Motion app using Firebase, which let us browse user content and feedback as we worked to improve the app’s usability.
Identifying Users’ Painpoints
Users’ painpoints include any UX design issues that frustrate users and block them from successfully achieving their goals. A key goal of UX design is to create design solutions for the painpoints that users encounter along their journey using the product. By identifying the painpoints that users experience, the product team can focus its design effort on solving potential problems. During the initial phase of our user research for the Alight Motion app, we identified some painpoints that we’ve depicted in Figure 12.
Figure 12—Users’ painpoints
Setting Accessibility Goals
A UX designer’s goal is to design experiences that are accessible to users with a wide range of abilities. Accessibility is not just about designing solutions for groups of users with specific disabilities. It extends to designing effective solutions for anyone who is experiencing a permanent, temporary, or situational disability.
Figure 13—Our accessibility goals
As UX designers mock up their designs, they should think about how users with specific accessibility needs might react to the elements they’ve included. For example, do headings stand out from the information that follows them? Do all images have alt text? Ensuring that designs are accessible to everyone is a critical part of making your product a success.
Refining Our Design
Once we had conducted usability testing, it was time to refine our designs for the app’s visual layouts, interactions, and workflows. Because UX design makes satisfying the users’ needs the top priority, the focus should be on incrementally increasing user satisfaction. With every iteration, we endeavored to improve the user experience.
The refinement of our app’s UI design focused on the visual touchpoints that enable users to interact with the product through a combination of typography, color palettes, buttons, animations, and imagery. Based on our user research and testing, we were able to improve the product’s interactions. The final design phase should result in an aesthetic product that’s easy to use and delights users.
Creating High-Fidelity Mockups
High-fidelity mockups represent the final product design and are more refined and polished than earlier deliverables. Fidelity indicates how closely a design matches the look and feel of the final product. Screen layouts show how actual content and functionality would appear on screens or pages. During the final phase of design, we created the high-fidelity mockups shown in Figures 14 and 15. As you can see, we chose a portrait layout for the Alight Mobile app, which is ideal for scrolling. In creating these mockups, we considered the four Cs of design: consistency, continuity, context, and complementarity.
Throughout our UX design journey in creating the Alight Motion app for smartphones and tablets, we leveraged the principles of UX design and UI design for Web and mobile products. This journey definitely gave our team a sense of accomplishment because we knew that we’d focused on serving the users’ best interests when designing the product. Good UX research enabled us to achieve this goal. UX design is vital in building a usable, useful product for users.
References
Canziba, Elvis. Hands-on UX Design or Developers: Design, Prototype, and Implement Compelling User Experiences from Scratch. Birmingham, UK: Packt Publishing Ltd, 2018.
Unger, Russ, and Carolyn Chandler. A Project Guide to UX Design: For User Experience Designers in the Field or in the Making. Berkeley, CA: New Riders, 2009.
Research Scholar at Southern University and A&M College
Baton Rouge, Louisiana, USA
As a UX researcher, Temitope has conducted UX research projects to inform UX design projects for cloud computing, digital storytelling, telemedicine, and mobile networks. She has led UX strategy, design, and user research for Web and mobile applications, for startups, small businesses, and enterprises. She enjoys innovating high-quality user experiences, working on exciting mobile and Web projects, and is passionate about creating great user experiences that meet users’ needs. Temitope holds a Bachelor of Science, Computer Science, from Covenant University. Read More
Soyoung has been active in UX design for over ten years, working on mobile apps. Her goal is to provide stable design solutions within a rapidly changing environment. She has worked on Alight Motion, a video-editing and animation app from Alight Creative, and KineMaster, a mobile video-editing app, making video editing on mobile devices more comfortable for all users. Soyoung has a BA in Digital Content from Kyunghee University. Read More
