WNKF: Weekly Native Knowledge Fest
These classes cover the fundamentals of designing user experiences for iOS and Android at Capital One, with an emphasis on understanding the particular capabilities and constraints of native device hardware.
Student Outcomes
- Working knowledge of Android and Material Design Guidelines
- Working knowledge of iOS, Human Interface Guidelines for handheld and tablet devices
Approach
Innovating is easier when we deeply understand the external systems we build on. And let’s face it: Native is a nuanced, ever-changing space. We’ve designed this course to give you that deep understanding–as well as a practical sense of how you can leverage your insights to create and advocate for world-class experiences for Capital One customers.
Class Abstracts
Introduction
So much of what we know and learn becomes muscle memory and we forget the specifics of why and how we do what we do. The plan is to tap into that, bring them back up to the surface and dive back in again. As we evolve as a company and as a team more and more is being asked of designers. We come from various educational backgrounds. We have different levels of experience, different motivations, passions, and career goals. Think about building a car with hundreds of people. We need to be aligned on what we’re doing and HOW. How can we unlock the most out of our tools and out of each other? So when we talk about why we’re here, it all boils down to this. We’re here because really knowing native will transform your work and your work relationships. It will help us all have better conversations.
What is UX/UI design quality? Part 1, Organizational models
A quality UX experience should feel effortless. Like breathing, you just do it. There’s no worry, no anxiety or other negative emotions. If done really well, it may even surprise or delight you. It could even make your day a bit brighter. Designs that consider the organizational model of the platform on which they’re built are a key component of that effortless experience. Each platform has an organizational structure baked in. You can use this as a lens when you’re designing. And here’s why this REALLY matters to us– our own BRAINS have a default organizational model we prefer.
What is UX/UI design quality? Part 2, Grid systems
A grid helps place elements consistently and communicates visual hierarchy. The second way grids serve as blueprints for our experiences is that they unlock the power of pattern and ratio. This speaks directly to the survival mechanism in our brains — which we talked about last time. Remember, our brains love patterns. We find safety and security in patterns because they are familiar. This is baked into our DNA. Our brains love all this order. Not just because we’re hardwired to look for shortcuts and approach life through paths that offer the least resistance, but because we think the order is actually beautiful.
What is UX/UI design quality? Part 3, Design systems
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It provides guidelines to the aesthetics of the house, ensuring your Craftsman home has all the craftsman elements instead of a mix of victorian and traditional. If you wanted to expand your house, ideally you’d build an addition that integrated seamlessly into the existing portion of your home. You wouldn’t just attach a large box to one side of the house.
Accessibility
- Assistive technologies
- Screen readers
- Annotations
- Dynamic type
- Collaboration
Deceptive Patterns
A deceptive pattern is defined as a UX design with certain characteristics that intentionally or unintentionally exploit human behavioral tendencies. These designs mislead, coerce, deceive or obscure a user into making decisions or taking actions – such as purchasing a product, or sharing information – that they would not if they had been provided with more information or other options.
Nitty “Griddy”
When designing for web, we rely on column structures to guide us in component placement and alignment as screen sizes expand and collapse. But when you take those flows into native, allow the grid to surface and take that primary focus. As you move to iPad, the grid is still center stage, but now you have the columns in a supporting role to guide you in designing for that larger screen.
Store this in the back of your mind, remember that grids and columns co-exist. They are not mutually exclusive. They complement one another. Sometimes they work solo and sometimes in tandem. They both work together to form that structure of your house. Your focus on them needs to transition between the two.
iOS in 3D: Inside the box
The reason for diving in and looking at the environments from the inside is because there are some very significant and fascinating differences between iOS and Android as well as similarities. And it can be helpful to understand how they work. We’re all intimately familiar with Apple’s hardware and software design. It’s built to tap into our creativity. It has the framework of a story that we then apply ourselves ONto. Android on the other had gives you the story framework, but also provides an outline, plot devices and paths to choose from, kinda like those “choose you own adventure books.” The iOS and Android “universes” have a very distinct look and feel to them, just like an open floor plan differs from a traditional split level.
Android in 3D: Inside the box
Remember last week when I said that Apple provides the framework of a story that we then apply ourselves ONto? I said that Android on the other hand gives you the story framework, but also provides an outline, plot devices and paths to choose from, kinda like those “choose your own adventure books.” Material Design is the system that provides all of these story elements. As Apple has that open floor plan, with the freedom of organization, Android provides the organization and Material provides the freedom of how you build out your rooms, and the different ways of how you can interact with those spaces.
Landscape, tablet & foldable devices
Remember the screen size and consider how your content fits in that view.
How does it fit when a keyboard is displayed? Is the stretching too much? Should I consider changing the layout? If I had something sticky in portrait, should I remove that stickiness for landscape?
Hardware capabilities
Permission based capabilities, physical world, and the capabilities that make our devices uniquely ours.
Communications and messaging
Messaging is an integral part to an app experience and the customer relationship. In app-messaging is the process of communicating with your users inside the app using contextual and timely messages, and is meant to help and guide the user through different stages in the user journey. What does this look like?
Motion has meaning
Coming soon
Data, APIs and backend calls
Why api calls? Well thinking back to my transition from web designer to native designer my biggest a-ha moment came when I finally understood how back end calls work, what APIs and can do and the power that they have to create personalized experiences. Basically it’s a software intermediary that allows two applications to talk to each other. It’s like the string in your tin can telephone.
Client side and server side communication
Coming soon