3 Tips to Start Using Motion in Design

3 Tips to Start Using Motion in Design

Motion connects the designers and developers who are working on a mobile application with its users. Scrolling, navigating through screens, and adding or editing content may all be inherent features of an app in 2017, but the app still needs to feel right. UX designers live for the challenge of making an app feel right to the user, and motion is one tool in their arsenal. As Shockoe tackles mastering this tool, here are three tips for how to start thinking about integrating motion into your designs.

Tip 1: Show the Relation

You’ve put in the work, made the sitemap, and even mapped out the flow. You know exactly how to get from Screen A to Screen Z. Do your users? It’s important to make sure your users will be able to navigate the app with the same fluidity you do. Probably the best option for ensuring this is one of the simplest: show your user where the screens are coming from.

Navigating from the leftmost tab to the one on the right? Show that by pushing your current content off-screen to the left, making room for the new content coming in from the right. Google Play Music is a fantastic example of how an entirely new page can originate from a single, much smaller element. It shows the growth of that element into a full page.

Tip 2: Don’t Lose the Users

This touches a bit on the last point, but it is key that you don’t confuse your users or lose them in a complicated motion. If you have too many elements moving in too many directions, or even one element moving too far, you may run into some problems.

An example of what to do and what not to do both come from different implementations of the same feature in different versions of the Android operating system. On devices that ran Android M, there was a hovering search bar at the top of the home screen. This was a great addition, bringing a Google search right to the forefront of the user’s most-frequented screen. As you might expect, the search automatically offered suggestions as the user typed.

On the newest Pixel 2, that search bar has been moved to the bottom of the home screen, just under the app drawer and just above the software buttons. A UX/hardware issue is solved here by allowing users to reach their search bar more easily, but a visual transition issue is created. When the user taps the new bottom-anchored search bar, it acts like before and is now on the top of the screen, populating your autofill search results. This is probably nit-picking and just requires some getting used to, but it makes the search bar feel like more of an “activation” and not a true, transforming element on the device’s screen. That takes away a bit of what made that simplicity in movement so special.

Tip 3: Have Some Fun. Find It, If You Have To

This point applies to everyone in design, but it holds special weight in designing motion as there is so much that can be done. This is more for your own sanity, but it’s very important in every project to have even a little fun, and not nearly enough people value taking a moment to do so. A solid check for this is looking inward and thinking about what you would want to see an app do.

Take 15 minutes, grab your notebook and a pencil, create some sketches, and just … go with it. Look at what’s been done in other apps, what hasn’t, and find what works for you. Don’t limit yourself to the mobile realm for inspiration; consider television shows, video games, etc., as well. The kind of work we’re most proud of is typically the work we enjoy making, so be sure to explore every corner of your creativity when designing motion.

So what are your thoughts?

Hopefully, these tips have helped you start thinking about the ways you can use motion in your designs. In this post, we touched on the basics of motion; we look forward to expanding on these ideas in a future post that dives deeper into the nitty-gritty details on how to make motion work in your apps. As you start integrating motion into your projects, reach out and let us know what you think, if you have any thoughts to add, or if these tips have helped you out in any way.

Editor’s Note: 

Want more tips on Design? Check out our most recent blogs:

10 Commandments of Designing for Accessibility Every Designer Needs to Know

How to Apply Minimalism to Complex Apps

Want to stay connected on all things mobile?

Sign up for the Shockoe newsletter and we'll keep you updated with the latest blogs, podcasts, and events focused on emerging mobile trends.

How to Create Moodboards that Help You Better Understand Your Client

How to Create Moodboards that Help You Better Understand Your Client

For new design projects, blank artboards can strike fear in many designers. Approaching a new task with a blank slate is never easy, especially under a deadline or without a clear objective. That blank rectangle can be the biggest block to any momentum in getting a project moving. But don’t despair! Using mood boards can help kick off any design project and remove the fear of directionless design.

What is a mood board?

A mood board is a collection of style—like color, texture, UI framework, or theme—that visually unifies a set of images. Part of what makes the tool so valuable is how malleable mood boards are to each project. Each board simply needs a cohesive connector that all the elements on the board stem from.

For example, this board shows off monochromatic color schemes:

And this one shows different examples of Google’s material design applied to different screens:

 

Having a theme to draw them together allows design teams and clients to react to different conceptual directions, allowing for different ideas to be explored early and with little time.

When should you use mood boards?

Mood boards should be implemented early. They are a fairly low-investment tool that you can use to get in step with your client/stakeholder/design lead early on. With clients at Shockoe, we use them early in our design process to get a sense of the client’s needs and tastes while also exploring some potential directions without burning too much time.

Potential times to bring mood boards into projects: Early design discussions, design concept pitching, stakeholder exercises.

How to make mood boards:

There are many ways to develop useful mood boards. When planning boards, a great way to start is to define your audience. Is the purpose of the mood board for you to discover tones and feels? Is it to guide a client or stakeholder in a certain direction? Defining your audience and purpose will help shape the direction of boards to create productive discussion.

Want to explore different color options? Group different items of the same color to get a feel for the application.

Want to look into different design systems? Show them together, or back to back.

It really helps to have a log of potential approaches and looks to help influence the direction of the project and discuss options before running with a certain design.

I tend to approach my mood boards in three steps: Think, Collect, and Organize.

1: Think

Starting out, I write down as much information as I can. I try to roll up all my knowledge on the project so far and start thinking of things I want to use for inspiration, like colors, products to be inspired by, people or places that should influence or impact the design, or just cool anecdotes I can recall from earlier meetings with a client.

2: Collect

After the brainstorming step, I create a project folder to store assets. I keep anything and everything I find interesting in that folder that could be used in the project. Pinterest and Dribbble are obvious choices when searching for inspiration, but I also find lots of really interesting ideas by looking at different mediums. Furniture, architecture, and game design blogs have all provided great ideas to consider for potential inspiration.

3: Organize

From here, I use my favorite tool for mood boards to collect and organize the different images designers and I have curated: Google Slides.

 

 

 

 

 

Google Slides acts as a fantastic repo to collect and organize thoughts. The ability to collaborate with other designers makes the tool even more awesome when working on larger design teams.

When laying out designs, I find it useful to pick a lead image and then build out elements around it. That way when discussing the project with a design director or client, you can orient the discussion around that image and define your intent with a style in that direction.

Presenting boards

The last step of using mood boards in design is getting a sense of which way to run when it comes time to start the actual design process. I’ve always enjoyed the candid and open discussion around mood boards. Planning out how you want the discussion to go will really help create a structured conversation that will benefit both you and the client. By knowing the discussion you want to have around the boards, you are able to ensure that the feedback you receive provides clear direction so you are not left with that dreaded blank artboard rectangle.

If you’re ever in a stalemate about which way a client thinks a project should go, or if you want to feel out some new or riskier design directions, mood boards are a fantastic tool to quickly define a style and explore different routes for the project. Don’t stare at blank art boards—go make mood boards!

Notes from Editor:

You can find more design blogs from our team on our blog page.

[INFOGRAPHIC] 10 Commandments of Designing for Accessibility Every Designer Needs to Know

How to Apply Minimalism to Complex Apps

Virtual, Augmented and Mixed Reality… Confused Yet?

Want to stay connected on all things mobile?

Sign up for the Shockoe newsletter and we'll keep you updated with the latest blogs, podcasts, and events focused on emerging mobile trends.

6 Lessons in Building Mobile Experiences for Non Profits

6 Lessons in Building Mobile Experiences for Non Profits

During the course of publishing a pro-bono mobile experience for the non-profit Roatan Marine Park out of the Bay Islands, Honduras, something struck a chord with the Bill Nye bobblehead that sits on my left shoulder. Where’s the category for Changing the World? it whispered.

There isn’t one. For the Roatan app, RMP iPatrol, which allows citizens to report illegal activity harmful to the surrounding Mesoamerican reef – the world’s second largest – our best options were Education or Travel.

In the process of writing this post, I went to the Play store to see what showed up. Following the games and ‘entertain yourself’ recommendations, this is an example of the apps displayed:

Granted, this was on my work account. As a designer at Shockoe, I work on a lot of enterprise apps that often aren’t accessible via the app store, but I also download, assess, test, and work on all types of consumer mobile applications, including those for rewards programs, tasty drinks (still can’t get over that callout), financial and social. It makes sense that I’d have a very commercial constellation of recommended apps.

There are roughly 2.5 – 3 million apps available on the respective app stores and, based on sheer volume, gaming still smashes all other categories. It’s not a leap to say that in terms of engagement the winners are those that could be referred to as “bored now” – games and social apps that are designed to fill your time and attention when you’re in the waiting room, lunch break, or refusing to fall asleep.

The popularity of gaming, social, and entertainment apps isn’t likely to change, but what can is our commitment to bringing effective mobile solutions to the Davids out there battling on our behalf.

I have kept an approving eye on things like Civic Hacking, Citizen Science, and Tech for Good, but my appreciation for how powerful mobile could be in the non-profit, changing the world space – particularly for reporting, data collection, and community building – has me convinced that David’s slingshot is primed for an update.

Based on conversations with a non-profit client and my own experiences, here are a few considerations for those looking to do their part in making mobile apps for good.

1. Make sure you are willing (and able) to commit to the problem, not just an app

Firms should pursue issues that they care about and that the company will wholeheartedly get behind. Coming into a non-profit project with a one-and-done type mindset – swoop in, build a quick app, slaps on the backs, then it’s back to work as usual – at best will provide temporary fixes. At worst it will alienate users with sub-par experiences due to being outdated and unsupported. We need to be taking these projects on like we normally approach apps – as products that require constant improvements, maintenance, and validation that we are indeed solving the problem we set out to solve.

2. Think Enterprise and Platform

Regardless of what issue your app seeks to solve, other non-profits are probably working in the same space and on similar problems. Consider the benefits of building an adjustable/scalable framework that could be tailored for specific needs. Time spent on APIs and scalable architecture is almost always time well spent. If you want to track the health of monarch butterfly populations/migrations it wouldn’t make much sense to gather data in one county. You build a monarch tracking app, make it publicly available, and have a central database with easily surfaced data that researchers everywhere can access.

3. Consider the lessons from models in the community and contributor-driven apps

There is a subtle power in the give-and-take nature of community-driven apps. Waze has a huge and fanatic volunteer contributor community. The app works almost entirely on the goodwill of the driving community (and some algorithms, GPS, and other cool stuff). Benefitting from the contributions of others creates a compelling feeling to return the favor and an emotional reward for doing so. You see the same type of situation in plant identification apps, car repair forums, and countless others. It pays to study up on the mechanics of people helping people to do a collective task.

4. Be a good coach

Especially if you’re working with a smaller non-profit, it’s likely that there is no CTO, CIO, IT department, or perhaps anyone who has done a technical project. This is an opportunity to be a great coach (and evaluate your own process). Be clear about how the project will work and what you need from them. Explain acronyms and jargon. Your goal, as hopefully, it is with every project, is to share knowledge and impart confidence.

5. Resist the temptation to experiment or deviate from your standard process

Steer clear of using your non-profit project to experiment with your process or throw a junior team into a sink-or-swim, figure-it-out situation. I have heard it from more than one person working in the non-profit space that they rarely receive the same quality or level of professionalism from companies that are donating services. The standards you hold to yourself shouldn’t be variable. Don’t make an exception.

6. Respect each other’s timelines and responsibilities.

During research for this post, one NGO employee told me, “people seem to think that people who work in NGO’s are running around hugging trees all day, that they don’t have deadlines, that they don’t have the same if not more administration to do as any other business.”

In my experience, employees at non-profits often do have more responsibilities than their counterparts at standard businesses. Lack of resources forces everyone to wear more hats. Be cognizant going into a project that the folks leading the charge often have so much on their shoulders that even if they love the project it can turn into one more burden on a pile of others that leads to stress.

If that’s the case, our approach as consultants should be either to 1) assume as much ownership over the project as can be done without jeopardizing the expertise/institutional knowledge the NGO brings and/or 2) be hyper-aware of (and plan for) client-side deadlines/responsibilities.

I am convinced that mobile can play an important role in bringing about the types of changes that would benefit us all. Consider the following (in a non-judgemental, shame-free way): in 2017 we are projected to hit nearly 5 billion mobile users worldwide. [source]. As of last year, we were collectively spending over a billion hours a month on mobile games alone, second only to social media usage. [source]. Imagine the impact we could make if we all had at least one app on our phones that allowed us to contribute to solving a community issue, or if we spent just 1% of our gaming hours on cataloging invasives or mentoring young folks, or, as residents of Roatan now can, reporting damage to coral reef systems.

Better yet, find what you care about and let’s make it happen.

[Note: I acknowledge that things are rarely as simple or black and white as some of the references or points above. Mobile isn’t a silver bullet, but it also does a lot on its own already – apps bring healthcare to rural populations and information to the underserved, Waze cuts drive times which in turn cut down CO2 emissions, business apps cut paper waste and improve efficiencies. But still. We can do more.]

Editor: Learn more about the Roatan Marine Park project and how Shockoe is contributing to saving the world’s second largest reef.

Read what our partner, Axway, is saying about RMP iPatrol.

If you’re interested in getting started on your own idea, reach out here for more information.

Want to stay connected on all things mobile?

Sign up for the Shockoe newsletter and we'll keep you updated with the latest blogs, podcasts, and events focused on emerging mobile trends.

How technology leveled the playing field among drivers

How technology leveled the playing field among drivers

Most people may agree that there are two types of drivers – the confident and the not so confident. With the help of technological advancement, the automotive industry is leveling these playing fields, making it difficult to categorize drivers. One of my favorite commercials in the past year is the State Farm Safe Driver which depicted a female receiving a “safe driver refund” check. State Farm not only showed off their refund policy for their Safe Driver program but highlighted that it was a female who got the refund instead of her husband who was helplessly confused possibly because of the oddly popular female driver stereotype.

Technology has always been able to make our lives easier. Safe driving is not excluded from the list of the daily tasks positively affected by technology. Today, the “not so confident” drivers can rely on an array of technologies to not only make us a tad more confident but ultimately safer drivers. So just how is the automobile industry leveling the playing field? We cannot answer that question without taking a high-level look at how automobiles have evolved in recent years specifically with a technology in mind.

First, there are the navigation systems. Ten years ago, having a navigation system in your car cost about 10% of the price of your vehicle. Instead, drivers relied on printable directions from sources like MapQuest to get from point A to point B. Reports show that printed maps were a huge distraction for drivers resulting in safety concerns. If you think texting while driving is a major distraction, try reading a map while driving. Today, the majority of new cars have a navigation system—usually a touch screen—that comes standard. Additionally, the navigation has been voice-enabled meaning drivers don’t even need to look at the screen for directions.

After a few more technological leaps came self-aware cars. It’s mind-blowing to know that your car has a sense of self-awareness. Augmented Reality allows cars to visually project directions, dashboard gauges, and more, in front of the driver’s view eradicating the need to look away. The windscreen of cars is now a massive digital screen with endless opportunities. The navigation, the voice commands, even the auto parallel parking really leveled the playing field for various drivers. AR is usually considered to be a live view of the real world, onto which extra data – usually pulled from the internet – is layered or superimposed. In recent years, we’ve seen more automobile brands incorporate AR to their offerings with a promise to make drivers less distracted, thus being able to focus more on what’s on the road ahead. I’ve driven recent models of a luxury automobile equipped with AR used to project the dashboard gauges, current speed, maps, directions and other basic dashboard-like information onto the windscreen. The informative data had the amount of opacity not to impair the driver’s view of the what is on the road while at the same time keeping head and eyes straight ahead, nullifying the need to glance away to a navigational or any other screen(s). Once this becomes mainstream, one may argue we will have no need for street signs, since of course pedestrians will be wearing Google glasses with similar AR technology available.

Distractions are said to be the number one cause of accidents in recent years and reducing driver distraction has been one of the major goals of the automobile industry. First, we were given Voice Recognition which meant I can tell my car to “take me home” and navigational guidance to my configured home address would be started automatically and now instead of glancing away to a screen, I can now see the directions, current speed and a whole lot more right on my dashboard. This is the kind of technology that invigorates us at Shockoe.

We started 2017 with a focus on Voice Recognition, Augmented and Virtual Reality and I must add that it feels great to be a part of a company that has always been on the cutting edge of technology but even better, a company that is always ahead of the curve on the next big idea in this ever-changing industry. So when you’re using your enhanced car windows that allow you to to zoom in on places and objects of interest that you are passing, when the back seat of your car appears transparent while reversing so you can see everything around you, just remember, Shockoe will be right there with you, working with those same technologies that are turning us all into confident drivers.

Want to stay connected on all things mobile?

Sign up for the Shockoe newsletter and we'll keep you updated with the latest blogs, podcasts, and events focused on emerging mobile trends.

From Hardhats to Enterprise Apps

From Hardhats to Enterprise Apps

If you would have asked me this time last year if I was going to be working for a growing application design and development firm serving fortune 500 companies – I would have said, ‘In my dreams!’

Now, I can proudly say that is a reality, and I’m still pinching myself.

A year ago today, I was inspecting residential properties, skyscrapers, factories, construction sites and pipe trenches for asbestos, lead, and mold. Believe it or not, there was a lot of downtime for this type of work in between the hustle and bustle. I’m sure you’ve seen 10 construction workers on the side of the road while two guys are doing all the hard labor. That’s called safety folks!

I was not one to sit idle in my downtime on the job site. I’m the type of person that likes to stay busy, learn and contribute to the world. Through family and friends, I learned about the ever-growing world of UX and UI design. It wasn’t long before I realized that my passion for design worked equally well in the digital world as it did in the real one – and with a couple of art degrees from my past college years, I was determined to find my next venture.

I began studying this new digital world through websites like Udemy and YouTube, which offer great lectures and tutorials. I was also turned onto Mediumspecifically the UX collection, which is full of insightful blog posts that provide a glimpse into the tech world, and some of the pros and cons of the mobile app development industry.

I spent almost a year learning from lectures, tutorials, blog posts, testing mobile apps, studying design and visiting tech fairs. By putting myself out there – I found Shockoe. I was able to get my foot in the door to prove to a fast-growing company that I had something to offer, something to contribute to be successful. 

What I’ve found most valuable working with an up and coming tech company is that they’re looking to give you a shot at succeeding. If you have the right attitude and perseverance to prove that you can contribute to the larger picture, are willing to learn and adapt and believe in high quality apps that are well thought out and intuitive, then you can find great opportunities. This is the core belief in creating enterprise apps at Shockoe. I can tell you one thing, sitting idle and watching time go by will likely keep you out of the tech world and farther from your fuller future. Instead, pull out your phone and enjoy critiquing what you love most about your favorite Android and iOS apps. 

Since I’ve been working at Shockoe, I’ve learned a lot about working as a team and how important transparency is among our peers so our ideas and our skills can be utilized appropriately or improved upon. We are creating positive user experiences by listening to our clients, thorough testing and well thought out designs with the user and their tasks in mind. If you’re ready to be apart of a team of hard workers looking to improve the world, look no further. Shockoe needs great minds like you to bring your vision to the world of mobile enterprise app development.

Start watching videos on YouTube and reading to learn what makes a great UI or exceptional UX (or even what those acronyms mean). Ask yourself, what works well and what might you do to improve them? You could be the one to join our team and create the next best idea.

Energetic designer seeking long-term teammates

Energetic designer seeking long-term teammates

Me: Designer at a fast growing, Richmond-based mobile startup seeking long term relationship with boundary pushing, continuously learning designers.

You: Talented, eager individual looking for an opportunity to design alongside a team that has your back, for a company that thrives on their employees creating innovative solutions to everyday problems without it feeling like the daily grind.

I know you’re out there. I’ve seen your work. Whether it was a pixel perfect website, an awe-inspiring app screen or a sweet icon animation, I recognized your talent and want to work with you. Let me break that down:

 

Daily designer life at Shockoe:

As you enjoy your stroll through Sketch and gaze upon the user interface you have created, relax by nudging an object a few pixels in order to align your content. Let the curves of lorem ipsum fill your thoughts and focus on the best way to apply your layout skills to perfect every aspect of a user’s experience. You may be tapped on the shoulder by a fellow designer and asked for your (sometimes brutally) honest opinion, or pulled into a white board / or sticky note session. All of these moments will culminate in a project that you can be proud of when it goes into development. You get to own every aspect of your projects, from icons to colors, interactions to transitions, from client kick-off meeting to app store launch. You will work with the team at Shockoe to deliver an innovative, amazing product that keeps the user experience at the forefront.

Sounds like a dream, right. While some days may be tougher than others, in all I’ve found Shockoe to be a rare breed of startup that not only has core values but actually encourages their employees to live by them.

While the title UI /UX designer may be intimidating, don’t let that keep you from applying. Our designers have all started as pencil-pushing, layout changing, CSS editing designers. As long as you are willing to expand your knowledge by diving deep into iOS and Android Guidelines, I believe your talents and our projects will be a match made in heaven.

Simple is the goal, clutter is the enemy

When was the last time you used a mobile app and said “man, I’m glad there’s all this junk on my screen! This app does 100 things and it’s clear to me what they all are and how to access them!”

I’m confident this has never happened.

However, I bet you have opened a mobile app or two that has been so simple and intuitive upon first use that you actually felt refreshed using it. Maybe it was the picture stream on Instagram or the Newsfeed on Path.

Whatever it was, you were happy using it and happy to come back to use it again. The touch-based interface on mobile phones is a joy to use, we love to touch, drag, pinch, and expand things with our fingers. But how many times does clutter get in the way of that joy?

This happens because companies or clients sit around and say “wouldn’t it be cool if it did this, this, and this” instead of saying “wouldn’t it be cool if it were the cleanest, simplest, and most beautiful application ever devised?” If you’re thinking of building or thinking of having someone build a mobile application, fight every second of every day to make simpler the goal and clutter your enemy. Clutter wants to steal the joy of using your amazing, futuristic touch-based computer that sits you can keep in your pocket and you must fight it with the golden rule:

Simpler is better.