Before we get to the how, let’s get to the what: What is UX design? It’s a system to improve customer satisfaction and loyalty through fit for purpose, ease of use and the pleasure derived when people interact with a product, which in this article will refer to a mobile app or website or even an application using emerging technologies such as virtual reality (VR), augmented reality (AR), artificial intelligence (AI), or Internet of Things (IoT). However, the same information here is true for any utilitarian object or device. At an overarching level, the UI / UX design process requires deeply understanding the user’s needs and objectives, observing how a user interacts with an app – and then translating those observations into ideas to improve the app, and repeat as needed until you’ve designed a solution that exceeds the needs of your customers. In detail, the UI / UX design process consists of five key phases:
Before getting into UX design the why of the mobile app or website must be addressed. What will it do, what problems will it solve? Often this phase includes:
Stakeholder interviews to gather insights about business goals
Value proposition mapping to understand key aspects and the value proposition the mobile app will offer: what it is, who will use it and why
Concept sketching to create a mockup or simply a sketch on paper of the future app.
Typically this phase includes a project kick-off meeting where the app product team sets expectations for itself and stakeholders. At a high level, the meeting states the mobile app’s purpose, assigns the team structure (including who designs and develops the app), chooses communication and tracking platforms and establishes stakeholder expectations in the form of KPIs to measure product success.
After the idea is defined, research begins. This includes user research and market research to inform design decisions. Investment at this stage often saves a significant amount of time and money over the course of developing an app. While the intricacy of the app, timing, resources and other factors can affect research, this phase frequently includes:
Individual in-depth interviews to truly understand the users and their needs, wants, fears, motivations and other behaviors
Competitive research to identify product opportunities and understand industry trends and standards
Personas help the user experience designers use data to form insights into why users are likely to want or need the app. The following items can advance understanding of the user.
User personas are fictional characters that represent different user types for your mobile app or website. When designing the app, it’s helpful to reference personas to get a better sense of how your target audiences will view the app in their lives.
User stories are tools that help designers understand how the mobile app is used from the user’s point of view. These simple stories typically follow this pattern: “As a (user) I want to (to achieve) given my (motivation).”
Storyboards are tools that help designers see each user persona in action according to its user story.
In websites and mobile applications, this phase includes creating information architecture (IA) and user interface (UI) design. Applications that contain VR, AR or AI are more complex, requiring greater IA and UI sophistication and expertise to ensure that the design will deliver a rich user experience that meets expectations. Applications for IoT must also take peripheral devices into account, creating another level of complexity. The design phase frequently involves:
Sketching to quickly and easily visualize ideas on paper, a whiteboard or a digital tool. Frequently used during brainstorming sessions, sketching can help the team envision multiple design options before selecting those that will move forward.
Wireframes tend to be used in web page or mobile app development to help designers visualize its basic structure, including key elements and how they link. They’re often a first step before going on to mockups or prototypes.
Prototypes differ from wireframes in that they help in the design of the actual interaction experience. A prototype provides a simulation of the mobile app that can be low-fidelity, such as clickable wireframes, to high-fidelity coded prototypes.
Design specifications contain all the visual design assets that developers need to turn prototypes into a working app.
Design systems provide designers with a complete inventory of components, patterns and styles as well as the rules they follow, ensuring that the total design feels consistent across every touchpoint.
Applications that incorporate emerging technologies such as AI, VR and AR require additional steps in their UI / UX design process to produce an experience that feels natural and intuitive. The challenge is that these technologies require a comprehensive understanding of the real world, which we take for granted, including the laws of physics. In the real world we navigate without thinking how to go from point A to B. In virtual reality, we have to guide users in navigation within the virtual environment and simulate real world interactions.
VR and AR applications are formed through different visual assets: environments (the 3D world a user enters when putting on a VR headset), characters (user avatars with apparel and accessories), 3d models of props, and interfaces (the elements a user interacts with to move within the environment and execute tasks).
For instance, a VR app with no interface but with a complex environment could be a roller coaster ride simulator. The user sits in a car and experiences the ride without any controls. A VR app with a highly developed interface and minimal to no environment could be the equivalent of a website home screen. By increasing the complexity on both axes, a more complicated UI / UX design framework is needed to produce 3D or even 4D spaces. The fourth D is the dimension of time. For UX frameworks, designers must take into consideration:
Surroundings / Environments form what the user experiences through changes in stimuli, location and scenery. For example, the horizon, walls, vegetation, ambient sound and music, background textures, time of day or night, plus wind and other weather.
Movement / Locomotion offers directional cues that point to targets, actionable items or areas of interest that help to tell a story. They can include a navigation dot, an open door or window, animated signage, a character speaking and the shaking of objects.
Interaction / Feedback helps the user to realize its presence and abilities and to comprehend the physical laws of a virtual world, such as jumping, teleporting to another location, touching and grasping objects.
In addition, UI / UX design in these new technologies can also call on knowledge and techniques related to:
Storytelling, imagineering and improvisation
Enhancing immersion to improve the user experience
Creating 3D personas to correct spatial navigation, layout and content
Incorporating the brain’s responses to 3D interfaces by taking visual, auditory and kinesthetic interactions into account
Avoiding known UX problems when designing for AR and VR such as excess battery consumption or allowing the application to load on unsupported devices
Validation helps teams understand whether the design works for the users as intended. This phase often begins after the high-fidelity design is set. The reason to test using high-fidelity designs is to offer feedback from end-users as well as stakeholders. The validation phase of the UX design process may include the below activities:
“Eating one’s own dog food” allows the team to test the mobile or other type of app in-house by using the prototype or app to complete routine operations to uncover usability issues to be addressed.
Testing sessions with people in your target audience provide the first opportunity to see the mobile app, website or a VR or AR app in the hands of an actual user. These tests can be moderated or unmoderated app tests, focus groups, beta testing and A/B testing in which a user can try two versions of the mobile app, or your app and a leading competitor, to discover which is preferred and why.
Surveys can capture quantitative and qualitative information from real-world users. Open-ended questions such as “What part of the app do you like/dislike, and why?” to get user opinions on specific features.
Analytics, be they in the form of quantitative data (clicks, navigation time or search queries) from an analytics tool can help uncover how users interact with your mobile app, website or other type of app.
Taken together these five phases help a product team successfully arrive at a well-designed mobile app or website that solves the target user’s challenges. To learn more, contact us today or continue reading our article here.