9 Design Features to Consider for an Event App

9 Design Features to Consider for an Event App

This year I had the privilege of designing two event apps for Richmond’s own rvatech. rvatech is a Richmond, Virginia based, member-driven technology association of businesses and organizations that serve to promote the region as a technology center and provide a vehicle for addressing the needs of Central Virginia’s dynamic technology community.

 

rvatech/Gala

 

Earlier this year in May, the Richmond Technology Council (rvatech) hosted their annual Gala event, where they celebrated the many breakthroughs, advancements, and technologists which are driving our technology-based economy. With significant growth each year, rvatech recognized that they needed to provide their members with an easy way to access and manage the event details, a way to network with other members, and promote rvatech as a brand. rvatech reached out to Shockoe and challenged us to come up with an intuitive app to meet these needs. We also had to keep in mind that the app would need the ability to grow with each event.

Rvatech requested the following for their Gala event app:

  •  Eventbrite Sign-in
  •  Event Details
  •  Links to Social Media
  •  List of Sponsors and Finalists
  •  Searchable Attendee List
  •  Connect on LinkedIn
  •  Searchable Map to Find Their Table
  •  User Profile

 

1. Environment 

 

As I dove into the designs, I received a lot of feedback that the app should have a white background, as it provided a clean look and is easier on the eyes for reading and scanning information, and all of that was true. My biggest concern was that this event would predominantly be dark, as it was an award ceremony with most of the lighting focused on the stage. In my mind, I was picturing 80 tables full of bright glowing white screens causing distractions during the event. I had some concerns with where the designs were going. I decided to meet with another designer who encouraged me to stand up for my ideas and voice my concerns. It worked. Using rvatech’s brand colors for the event, we went dark, using white only for navigation and text and I believe it worked better in the long run.

 

dark and white comparison richtech event app

 

2. Map

 

One of our biggest challenges was creating a searchable map of the event so members were able to find their table out of over 80 tables. Designing the actual map was the easy part, but designing the interactive portion of it was something that demanded a great deal of collaboration with the developers recreating it. This was also a wonderful learning experience as a designer to know what my limitations were considering the small window of time we had to complete the designs and development before we launched the product for the event.

Some things to consider for designing an event map, making sure users are able to identify where they are in relation to labeled landmarks, like a stage or the main entrance. Letting users know where restrooms are located is also something to consider.

 

rva-tech-map-brand

 

3. Networking

 

To bring networking in, rvatech requested that we have users sync their LinkedIn accounts with the app. This actually worked in our favor. When users synced their LinkedIn accounts it provided our searchable networking tab with their name, company they worked for, and career title from their account. It also populated the profile page we created with their profile image and career data from LinkedIn. We also provided an on/off switch for any users who did not want to share this information or if they didn’t have a LinkedIn account, for those instances we allotted users to manually enter their personal and career information. In addition, when users synced their LinkedIn accounts, when they selected the networking tab, they had the option to connect on LinkedIn.

rvatech-networking-connect-event-app

 

4. Event Schedule

 

The event details, sponsors, and finalists were designed as scrollable lists so users could keep track of the event and educate themselves about supportive technology-driven companies and technology leaders in the Central Virginia community.

Rvatech’s Gala event went off without a hitch. Users were delighted with being able to manage the schedule of events, network with their peers, and easily find their table by entering their company’s name. Shockoe was also honored with an award for a non-related app we created for ARROW electronics, one of the largest distributors in the world, where the lead developer of that project, Jay Soumphont, gave a moving speech about his work developing the app and working closely with the client.

 

Updating For a New Event


After designing the rvatech/Gala app I was asked to work on the rvatech/women’s app. This presented the opportunity to maintain consistency while redesigning a new look geared towards an entirely different event.

 

rvatech/Women

 

Rvatech/Women is Virginia’s premier conference on women in technology, hosted by the Richmond Technology Council’s WIT forum, bringing together professionals on a wide range of technology topics to learn, network, and collaborate.

Rvatech requested the following for their Women’s event:

  •  LinkedIn sign-in
  • Event Details
  • Biographies of Keynote Speakers
  • Workshop Descriptions
  • Links to Social Media
  • Searchable Map
  • Searchable Attendees
  • Connect on LinkedIn
  • Augmented Reality (AR) Featuring Designs From t-shirt Contest Winner
  • User Profile

For their October event, the rvatech/women’s conference, Shockoe had a firm foundation in place from our work on the Gala app, but little did I know how a simple color change would change everything. For this event, everything about the user interface (UI) had to be in the reverse from the Gala app. The app needed to be bright and visible, and easy to read and scan information. The women’s conference colors are light blue and purple, which are wonderful colors, but we didn’t want it to look like the Gala app at first glance, we wanted it to look like the rvatech/women’s conference app.

 

5. Accessibility

 

One of our initial challenges was meeting accessibility standards. At first, I was trying to swap the Gala’s dark purple background with Women’s light blue, but it failed WCGA standards miserably. While collaborating with another designer, they suggested keeping the light blue background but placing all the event details on white cards using black text. Brilliant problem-solving right? Not exactly. While the designs were clean and made the app stand out on its own, it was no longer the same app. It was an app with expandable cards based on the data that was being entered. We had provided estimates based on the fact that it was the same app, but now I was giving the developers a new app with new design behaviors that were nothing like the previous app.

Luckily our developers were able to adapt and problem solve these new features and recreate the designs without flaw. I was amazed at the networking tab, where users were able to scroll attendees by alphabet, with each alphabet being on its own card. And when users searched for a specific attendee it narrowed the cards to a single card for the letter they typed. It was beautiful, clean, and intuitive. I can’t thank the developers enough for their hard work.

 

women-in-tech-accessibility-event-app

 

6. Navigation

 

For the map features, we tried something a little different for the navigation. Since the only thing to search for was speakers and workshops, we decided to move the map access to a call to actions (CTA) button in a card associated with the workshops and the speakers, rather than having its own tab. We replaced the map tab with the speaker’s tab, where users could search for the speakers or workshops of their choice. In the search results, users had the option to view the speaker or workshop on the map, where the location would be highlighted in purple and users pinch to zoom in and out and scroll the map as necessary.

 

rvatech-women-in-tech-navigation-event-app

 

7. Solving a Problem

 

An app should always solve a problem. Since this event was primarily a series of keynote speakers and workshops we wanted users to be able to make sure they could manage their time with the topics that interested them most. With the schedule in place, we were able to give a user access to the speaker’s portrait, biography, and workshop details. With these details downloaded ahead of the event users were able to decide which speaker or workshop interested them most.

 

8. Immersive Media

 

The beauty of this beast emerged as an augmented reality (AR) experience we created with the help of our Immersive Media Director, Dan Cotting. Originally rvatech wanted to incorporate AR in the initial Gala app, but time was not on our side. But for the Women’s app, since we had most of the framework in place, and the designs and development stayed ahead of schedule, we had more than enough time to design and iterate a themed AR experience based on rvatech’s own t-shirt design contest. Dan suggested we use Facebook’s new AR Studio to save both time and money and give users access to the seemingly endless volume of AR featured. We were hesitant at first to use a 3rd party for the experience because we were concerned about sending users to another app, but users seemed to embrace the exciting feature and shared their selfies all over social media.

 

women-in-tech-rvatech-event-app-AR

 

9. Branding

 

For the rvatech conference apps, one of the most important goals was communicating the brand. Images, colors, font style, content, and designs leave a lasting impression. It is our job as designers to make sure it’s a positive impression we’re leaving.

For the Gala app, I used a draped red curtain in the background of the header to give a prestigious look. The Gala event has two brand colors. Their main color, a dark purple #0F0F2D, was used as the background of the entire app. Their other color, teal #189579, was used an accent color and design element throughout the app to provide contrast.

For the Women in Tech conference app, I replaced the standard default profile image of a human head outline with an outline of a woman’s head. Since this was predominantly a networking event I created a networking design in the main header. As I discussed before, we used their light blue #6BCCDB for the background, and purple #46479D was used for all CTA’s. In addition, I switched from 90º corners from the first app to subtle rounded edges for content cards, and circles for the scheduled events to match the theme of the networking header. These two apps may have similar frameworks, but they’ve been branded completely different.

 

rvatech-event-apps

 

We look forward to designing a new experience for rvatech’s next big event. Now we’ll be able to not only provide them with a unique experience with cutting-edge immersive technology, but we’ll be helping rvatech strengthen their brand name, improving their member’s brand loyalty with a customizable experience true to each event.

What does it take to build true loyalty through design? Our dynamic mobile solutions will invigorate how people engage with your brand. If you’re interested in learning more about other personalized solutions we’ve designed with the customer in mind, take a look at our latest examples of work here.

 

Jason Day

Jason Day

UX/UI Designer

Jason graduated from the Savannah College of Art and Design and holds degrees in Illustration and Sequential Art. His diverse professional careers have ranged from comic book artist, picture framer, retail store management, photographer, building inspector, and designer, demonstrating his ability to understand multiple facets of thinking and implementing them in intuitive ways.

Four Retail Inventory Management App Best Practices

Four Retail Inventory Management App Best Practices

Starting Your Inventory Management App Off Right

When designing a retail inventory management app, it’s crucial to do a lot of heavy lifting in the preliminary stages of design to ensure that the transition from the client’s old system to their new retail app is seamless, intuitive, and incorporates just what they need to get the job done right. From concept to delivery, the retail inventory app design process requires research, attention to detail, inspiration, testing, and refining. By keeping the following tips in mind during the design process, you can be sure to deliver a quality app that your client and their employees will love. Here are four best practices to develop an effective retail inventory management app:

  1. Do Your Homework on the Client’s Needs
  2. Find out What the App Users Need
  3. Create an Inspired, Intuitive Design
  4. Test Your Design, and Redesign as Necessary

Now, let’s look at each best practice in more depth.

Best Practice 1.) Do Your Homework on the Client’s Needs

Prior to diving into a design project, it’s important to ask the right questions in order to understand 1) why the business prioritized this project, 2) the process/tasks employees are being asked to do, and which parts are the most challenging, and 3) how the system (including APIs) works in order to design around limitations or suggest changes accordingly. These questions are crucial, along with other obvious questions, like what equipment/device does the client foresee using, how many stores do they have, how many employees will be using this solution, who has admin privileges, and how will admin use differs from that of general employees? This initial info-gathering stage is key in the design process because having the team and the stakeholders “in the know” is necessary when making a polished, efficient, and effective app that everyone is proud of.   design_agile_shockoe

Best Practice 2.) Find out What the App Users Need 

Once you’re confident with the client-provided requirements data, the interview process should transition from the stakeholders to their employees. Sitting behind a screen, it can be easy to gloss over seemingly minor details, but those minor details can impact the people on the other end and affect their job performance daily. By focusing on details such as how the user will input data to the app and how they will maneuver around in it, you will be able to design a new system that will be effective and intuitive for all users and will replace outdated systems that might require quirky shortcuts and workarounds. Vital to this step is gathering client data, studying the data, and researching and implementing said research, all the while incorporating your interview results with the employees/users. If you don’t understand their procedures, keep the dialogue going until you understand their daily routine, in order to provide them with the solutions they’re looking for. app-user-needs

Best Practice 3.) Create an Inspired, Intuitive Design

Once you have all the details worked out, start working out the app flow. Put the pen to the paper, the markers on the whiteboard, and let the heavy brainstorms pour inspired innovative ideas. This process will require multiple iterations and failures so you can reach the holy grail of design solutions for your client. In order to achieve this level of design fruition, you will need to research design trends (Pinterest, Dribbble, Behance), your client’s app (if they have one), and their competitors’ apps (if they have them). Expand your design horizon outside of your comfort zone. Don’t be satisfied with safe designs; mediocre designs don’t break any new ground or impress clients. That being said, try not to reinvent the wheel either. It’s great to have inspiration, but it’s up to you to be innovative while also staying intuitive. user stories - inventory management app

Best Practice 4.) Test Your Design, and Redesign as Necessary

Now that you have shiny, impressive, and modern designs, it’s time to test. Your design has to exceed expectations. So, even though you’ve interviewed a variety of people, researched every corner of Google, and spent countless hours in Sketch, Xd, or your design app of choice, you still need to test the app out. The testing results will likely incur some redesigns, as any good test would. It’s important to ensure that the user flow makes sense, which is why you’ll test your prototypes with the client’s employees. Remember, these employees are the experts in their job field. They know what they need to complete their job successfully and what will make their day-to-day work routine more efficient. Listen to their every complaint, concern, and compliment. Redesigns can be fun. They often make us rethink what we thought we knew or understood. This could be a eureka moment for a designer, their team, and possibly the client. At most, it should only require some simple, but effective, design tweaks in order for the user to know what’s what. So tweak away, tighten it up, and bust out of your design bubble. Find the sweet spot everyone’s looking for and apply your groundbreaking ideas to your designs. Finally, make sure any, and I mean any, users will know how your designs work—intuitively.

inventory-management-app

Key Points for Retail Inventory Apps 

Be sure to keep these points in mind when designing an app for retail inventory solutions:

  • Listen: The stakeholders typically have a good idea of what they’re looking for.
  • Answer these essential questions:
    • Why does the business (client) want this inventory app? Know their KPI (Very important!)
    • How does the system currently work? (APIs and integration)
    • What are the client’s current pain points? (This is where we can REALLY help, by improving on what doesn’t currently work.)
    • What works? (What do employees like about the current system?)
    • What type of equipment are you designing the inventory app for? (What type of device will employees use to access the app? Will they need a sling or a harness if they’re unloading a truck?)
    • What is the client’s budget? (A necessary evil.)
  • Follow up. Have constant communication and keep everyone in the loop. Interview the client’s employees to make sure you’re including everything they need to do their job well.
  • Prototype your designs, and see what works and what might need to be tweaked or rethought to make the app intuitive and easy to use.
  • There’s always room for improving the design until you get it right.

Look Towards the Future Once your super-powered retail inventory app is developed, there will be updates, which require continued communication between you and the client. It’s your job (and ours) to help clients succeed. When our clients are successful, so are we. Together, we can conquer the world—one app at a time. Editor’s Note:  If you’re interested in reading about our most recent work for a retailer, check out A.C. Moore Case Study and the Inventory Management App our team has created for this retailer’s team. Watch the full Case Study Video for A.C. Moore below. ac-moore-inventory-management-app-video

A Summer of Interning: What we Learned @ Shockoe

A Summer of Interning: What we Learned @ Shockoe

Our Shockoe family is comprised of people with different skills, talents, and backgrounds — we know it’s what allows us to grow and learn as a team. It’s for this reason that our internship program took on a different shape this year. Thanks to the prep work and persuasive initiatives of our very own Mason Brown, Shockoe put together a comprehensive program focused on leveraging our culture of mentorship and growth, not just for the interns, but for our team as well.

Jackie, Matt, and Cameron joined the Shockoe team in May and shared their invaluable contributions to design, strategy, and development. We were fortunate enough to call them part of the Shockoe team, albeit for the short period before they headed back to their studies. We asked that all three share their thoughts and experiences of being an intern — one thing is for certain: we will miss having them around!

Jackie

Finishing my first year as an Experience Design student, I was eager to find a summer internship where I could expand my UX/UI knowledge and gain real client experience; I was super stoked to join Shockoe’s Intern Program. As a Design Intern, my time was split between working with the design team on client projects and the remaining time with my fellow interns on what called “The Intern Project.”

There were many cool firsts for me while working on the Intern Project. It was my first time working with a developer to move a design past the prototype stage. I had to learn the best way to communicate and quickly problem-solve to align with a developer’s process. This was also my first experience with QA testing. I helped evaluate the app for both functionality bugs and inconsistency with the UI. Additionally, this project was the first time I designed using the agile methodology. It was awesome to see how in such a short amount of time we were able to implement a whole process including discovery, design, and development.

Being part of the design team was as fulfilling as it was educational. Everyone was willing to answer any question and quickly welcomed me as a member of the team. I loved the all-hands weekly design meetings where we shared projects and received feedback and advice discussing new tools or resources to better execute our job. I also had an amazing mentor, Sam Carbonell, who helped me define goals for the summer and met with me regularly to help steer my time here at Shockoe. I am so grateful for this mentorship and am happy to say I met all my goals!

Working at Shockoe for the summer has made me more confident in my design skills and I know I walk away with a new breath of knowledge. Thank you, Mason, Sam, Paulina, and Edwin.

Cameron

I came into my internship the same way many others do. I had no idea what to really expect out of the experience, and I was afraid of underperforming in front of my new found co-workers. Shockoe had a prearranged system set up in order to ease me into their environment, masterfully uncovering their processes to me as time went on so that I would not be overloaded with information. Shockoe allowed me to get a first-hand experience into their continuous integration system with technologies like Jira, Bitbucket, and their own accredited App Tracker, as well as work with some of the teams on real applications testing for faults. Before I got here my knowledge of app development came from Native Android, and instead of having me continue with this, they challenged me to branch out and learn the React Native framework.

By learning React Native, I also got experience working with redux, as well as using Firebase for cloud data storage. I utilized these newly established tools in my favorite part of the internship, the Summer Intern Project. This project granted me real experience working with Jackie and Matt, the designer and strategist interns respectively, to develop a high-functioning app by the end of the summer. I got to learn a lot about their processes and the obstacles of their role to both communicate and integrate their ideas into what I then had to develop. The app vision was handled by our amazing internship coordinator, Mason Brown, and our product managers Rebecca and Misty made sure the project timeline and direction stayed on track.

Getting up and bugging senior developers can be a daunting task at some firms, but here at Shockoe, the developers are very understanding and open to help. Whether you are asking to learn more information about a subject, or just have debugging advice they really want to see you grow. I believe that this stems from the amazing culture established at Shockoe.

Shockoe’s emphasis on culture meant they provided many activities outside of work to get co-workers involved. Lunch and Learns were always a great experience since they gave us the chance to sit down with peers for a free lunch and to listen in on a topic from another coworker. Whether that be hearing about the Mystery of the Stolen Bicycle or a lesson on how to self-defense, an amazing experience was always guaranteed to ensue. I was also a member of the Shockoe indoor soccer team (or Shockoe Futbol Club, SFC) which gave me something to do outside of the office and a better chance to get to know my colleagues while playing a game of soccer. Last but not least, by the summer’s end the office held a summer party solely for the team and family member to enjoy a BBQ, corn hole, Jenga, a live DJ, and so much more!

I cannot thank Shockoe enough for the invaluable experience they were able to provide for me. I can leave Shockoe feeling much more confident in my own skills in an industry where you always feel out of place. Thank you, Mason, Paulina, Edwin, Andrew, and the rest of the Shockoe team for hosting this amazing internship program!

Matt

As an Experience Design student, most of my class projects wrap up after concept presentation and prototype walkthroughs. So I was excited for the opportunity to learn how designs and wireframes turn into functioning products, and I don’t think there’s a better company in Richmond to learn that process than Shockoe.

I learned from a variety of opportunities throughout my 9 weeks here. For the Feed Racer intern project, my role was to be the project owner. I worked with Jackie and Cameron to design, develop, and bring our ideas to life. I learned to write user stories, which break down and translate user behaviors into individual features and functionality. One of our biggest challenges was time, specifically not enough of it! I wish we could’ve had 2 more weeks. So we focused on the MVP, and laid out the plans to iterate, and improve. Prioritizing features and fixes was the greatest learning for me because ultimately those are the moments and decisions that make or break success!

One of my other favorite projects and built skillset this summer was focusing on Usability Testing. It was my responsibility to field surveys, screen respondents, and schedule a day of participant interviews. I helped coordinate and participated in the interviews and synthesizing of notes and findings. It was a cool experience to see how people’s thought processes lead them to behave and interact with screens so differently.

Overall, Shockoe was a great place to intern, and the direction and support we received from the Shockoe team was amazing. A big thank you to Mason, Rebecca, Misty, Paulina, and Edwin!

Onwards and Upwards

On behalf of the entire team, thank you Cameron, Matt and Jackie for your hard work, your warm and engaging spirits, and for embracing the culture we proudly call Shockoe — we wish you all the best with your ongoing studies and thank you for helping our team grow and learn from your truly valuable contributions.

Keep an eye out for our next blog post where we will showcase their summer project app aimed at helping local food banks with collection drives and encouraging giving through a fun competitive interface.

The Key to an Effective Warehouse Management App: User-Centric Design

The Key to an Effective Warehouse Management App: User-Centric Design

Custom mobile apps are effective tools for improving the Warehouse and Inventory Management process. However, a robust application with the best-of features can be rendered ineffective if the product itself is not usable. The key to launching an effective warehouse app is to create a user-centric experience that genuinely aids employees in improving productivity and performance. Let’s dive into what this means in more detail.

What do we mean by user-centric?

We mean: understanding the user, tasks, and environment surrounding the application. Poor usability can lead to user frustration and in turn, reduce overall productivity. The need for user-centric design is crucial when speaking of warehouse and inventory management applications — after all, these are the tools equipped to workers to perform their job effectively on a daily basis.

Some off-the-cuff strategies I’ve seen personally help Shockoe in deploying a great warehouse application include:

  • Get to know your user
  • Understanding the work environment and its nuances
  • Be flexible and aim for continuous improvement.

This was the core of our strategy with Arrow Electronics, a warehouse management app that would go on to recognize our team with RichTech’s 2018 Technology Builder Award.

Know your user

Employees know the in’s and out’s of their daily tasks better than anyone else. They can often expose golden nuggets of information to help improve app flows as well as desired user-experiences. Whether you shadow workers or conduct interviews, the key is to expose needs and pain-points in the day-to-day. This information will give you the greatest insight as to how to design an effective warehouse solution that is easy and truly helps improve daily task performance. Below are pain-points we uncovered in our work with Arrow as well as how we applied that knowledge to the next generation of their warehouse application:

  • Pain-Point A: Product walkthroughs with workers revealed a need for clear, simple, and intuitive user flows. Solution: Minimal screen design, and clear CTAs on-screen to reduce distractions.
  • Pain-Point B: The small interface and visual elements on the previous scanners made it difficult to interact with the device. Solution B: Go large! We helped implement larger screens and from a design-standpoint included large text and bolder visual elements
  • Pain-Point C: Workers struggled to juggle boxes and packages while attempting to interact with small format scanners. Solution C: Large format CTA’s now make it easier to interact with the screen, even with busy hands

 

Understand the warehouse environment

Where a warehouse app is used can greatly influence whether a design is effective or not. Some important environmental factors to note include: lighting, noise, common distractions, and present equipment. Warehouse environments produce unique challenges; fork-lifts, conveyor belts, endless rows of supply, and obstacles should all be documented and considered in the user-experience — here are a few things we saw at Arrow that impacted the next version of the application:

  • Pain-point A: Multiple environmental distractions (steady stream of noise, bustling workers) and placing the tablet down made it likely to miss important alerts. Solution A: We made notifications large, bold, and sticky (make sure they stay on screen until dismissed)
  • Pain-point B: Finding the right box with the right item could be tricky at times Solution B: We Incorporated a label identification system (Area, Aisle, Bay, Tier, Position) into the app so that workers can match it to the physical product. see example below:

 

Flexibility & continuous improvement

This is a part of a strategy that’s unfortunately often overlooked. Companies are constantly growing, changing, and improving; the tools in place should do the same. Even great apps should be tested with users and iteratively improved over time. They should also be designed with flexibility in mind — sometimes the best ideas don’t work as expected, and being able to pivot to an alternative solution is critical to the app’s overall success. Not doing so, could mean greater failure for the rest of the features that do in-fact work. Here are a few areas we saw the need to pivot with Arrow’s warehouse solution and ensure its ongoing success:

  • Pain-point A: App testing revealed manual-workarounds being performed by employees to relabel already picked inventory Solution: Workers were given a custom print option to create labels that would reflect proper quantities and date codes all from within the app
  • Pain-point B: Arrow employees required different features for different roles. Solution: We incorporated a responsive user experience that would shift the interface to match the job function of the current user.

 

Every company, every process, and every employee are different —  that’s why taking a user-centric approach to design is essential towards an app’s success. It is up to the designers and strategist to always have the end-user in mind. A blanketed approach to a user-experience could yield great results for one warehouse management system, but a disaster for another. The key to a successful inventory management app is to start from the ground floor and focus on understanding the end-user, the environment, and remain flexible with your team.

Angela Balzano

Angela Balzano

UX/UI Designer

Ange is a Rhode Island native with a passion for problem-solving and a flair for design. She specializes in strategy work and creating intuitive user experiences. Her long-standing career in technology design has led her to become mobile UX/UI expert with an emphasis on enterprise application usability… oh, and she loves crime podcasts.

5 Mobile Experience Design Trends to Try Now

5 Mobile Experience Design Trends to Try Now

With new technology being rolled out regularly, we designers have a fantastic opportunity to use new tools and methods to improve the products we create for mobile experiences. This is our time to marry content, personalization, voice interactions, microinteractions, and video to produce unique experiences that will attract and impress users for years to come.

With 2018 well underway, I’d like to review five important experience trends that are bound to make a deep impact this year and will likely continue to define the way in which apps are developed in the years ahead.

 

1. Being Content-Centered

 

Our clients often look to us for the most effective means of distributing their content in a way that services the users and provides the client with reliable and quality data.

“Time is of the essence” has never been a truer statement. Users have super-short attention spans (Hubspot reports only about 8 seconds or so) that shrink more every year. Seconds matter – so while design can be pretty, more importantly, it needs to be purposeful. If we aren’t designing to make the content the most important aspect of each screen, then we are failing our clients and most importantly, users.

While designing around content that has yet to be provided is far from ideal, there are a few workarounds. You can always default to the popular Lorem Ipsum placeholder text, or you could try using the content that’s being replaced from your client’s current site, create your own, or borrow from a competitor’s site.

By using text and color as interactive design elements, you can strategically create quick, vibrant, and delightful user experiences that expedite the user’s journey with a content-centered experience. Keep it simple. You don’t want to overwhelm your users with too much information.

This insurance app does a great job of displaying multiple options in a visually simple way, both in a tab and main menu format.

 

content-centered-insurance-app

Image Credit: Nimasha Perara

2. Personalization

 

Personalization is one of the most frequently requested features in user interviews. Weather content, design, or navigation, users like to feel connected with the user interface. If there’s a pattern of disconnect, they will likely not want to return, especially given a user’s ever-shrinking attention span.

Personalization can be achieved in a number of ways, including:

  • Enabling cookies on websites to remember what users prefer on your site
  • Implementing location tools on mobile to remind users of their interests
  • Incorporating the seasons or holidays to create a user experience that feels current and relative, and allowing users to create profiles to customize their experience.

More often than not, people are more inclined to share negative experiences than positive ones, so it is imperative that we are creating a more intuitive experience for our users. If users feel a connection with a website or app, they will want to return and hopefully share their positive experiences.

The animation below highlights one of Shockoe’s latest customizable interfaces for a banking application. We helped create a mobile experience that allowed members to customize which cards they land on first, allowing users to get their most important information faster.

 

shockoe-banking-app-personalization

3. Voice Interaction

 

There is no denying the impact that Siri, Alexa, and Google have made on our usability. My seven-year-old daughter chats up Alexa regularly — asking for songs, to make animal noises, and even a few weeks back, asked if she was married! I find this to be a testament to what next-generation interaction looks like and the importance of adopting it sooner rather than later.

Over 30 million households now have voice interaction tools, which is incredible! The rise of voice interaction will undoubtedly drive the increase of designing without an interface. Good UX seeks the path of least resistance, and voice interaction certainly bypasses any friction that may have existed in a physical UI.

[bctt tweet=”Over 30 million households now have voice interaction tools,” username=”shockoe”]

When designing for voice interactions, experienced designers will need to to take into account many new considerations. Providing users with suggestions may help alleviate confusion when the system doesn’t understand the command or cannot produce the desired result. For example, you could have a retail app say: “You can ask to order shoes or browse shoes.” You should also consider providing the user with an easy way out by offering “leave” as an option.

Is the mic even on? Users will need to know when the AI they’re chatting with is paying attention and when there might be a problem.

 

voice-interaction

Image Credit: Juan C. Angustia

4. Microinteractions

 

Engaging with microinteractions is one of my favorite things when using an app. Microinteractions are simply subtle design effects based around completing a task. These tiny interactions bring a level of delight to a user experience. If implemented correctly, these in-app gestures and animations can reduce design clutter, increase intuitiveness, and make interaction almost seamless. Fewer buttons on a screen mean more focused content, and we all know that having the right content, is king.

Medium has a controversial “clapping” interaction, as an alternative way to “like” an article you’ve read. Love them or hate them, these tiny claps with fireworks are both silly and cute enough to have caused a plethora of blog posts both praising and cursing the change from “likes” to “claps”. Humans inherently hate change, so it’s not surprising that bloggers took to the Internet to vent about this change, just as they did with Instagram’s iconic logo change a few years back. Change is sometimes a necessary evil — it’s where great ideas stem from. I for one applaud medium for taking the bold step to attempt to improve usability.

With microinteractions, there is an opportunity to bridge the gap between the user and the app through fun and satisfying actions that leave users emotionally content – they help engage users to interact with tasks intuitively, like express appreciation with likes or favorites, navigate sites with subtle animated transitions, or filling out form fields with hint text.

Predictive microinteractions can provide directive animations to assist users with onboarding, making it more delightful and ultimately, less confusing

 

microinteractions

Image Credit: Leo Zakour

5. Fullscreen & Vertical Video

 

In 2017, the use of videos surged as a marketing medium. Hubspot reports that 81% of businesses utilized videos as a marketing tool and nearly 100% of those businesses say they’ll continue to do so in 2018. 65% of the businesses that didn’t use videos in 2017 say they are planning to in 2018.

Words are important, but with videos, users are able to experience a more interactive form of content while also consuming more information in a shorter amount of time. This is another form of putting content front and center in a way that doesn’t force users to scroll. With AR and VR becoming more common, a full-screen video will inevitably become the norm, providing users with a more immersive: personally-impactful experience that will give them more of an emotional connection. When users are immersed in another person’s experience, be it skiing the slopes, walking in an impassioned protest, exploring caves, or learning a new DIY project, they are bound to have a richer and deeper connection with the content.

As video content infiltrates our favorite sites and apps, users tend to keep their mobile devices in portrait mode, rather than turning them horizontally for a full-width view. According to LukeW, 94% of users view their content in portrait mode, while only 6% view content in landscape mode, thus the obvious need to provide users with the option to view all content, including video, in portrait mode.

Apple’s new Clip app offers users fullscreen AR selfies similar to Snapchat’s World Lenses. Mashable reports that Clip will offer an animated 360° scene that you can experience by moving the camera around.

 

fullscreen-vertical-app-video

Image Credit: Apple

 

facebook-live-video-app

Facebook Live Video. Image Credit Buzzfeed

Other Experience Trend Shoutouts

 

Since I couldn’t list every single popular experience trend to look for in 2018 and beyond, I wanted to at least show some love to a couple more experiences worth mentioning.

AR and VR

Quickly evolving into affordable and viable options for both enterprises and consumers. Whether you’re looking for augmented/virtual entertainment or augmented/virtual training, this medium has yet to surface its full potential. As AR and VR continue to find great ubiquity and user acceptance, think about how this technology could advance the medical, construction, aeronautics, and engineering fields in the years ahead.

Biometrics

It may seem new, and it sort of is, but since Apple released the iPhone X’s biometric face identification feature, it appears the bar has risen in security authentication. Fingerprint authorization is now common in comparison. Biometrics will continue to innovate and demand designers and developers to push the envelope when considering the user’s privacy and security concerns. Designers will need to keep in mind the willingness of their users to participate in the functionality and devs will need to remember that biometrics don’t protect against passcodes or tokens being shared. They’re simply new ways for users to gain access to their data without being too inconvenienced with passcode interruptions.

Design Tips to Increase Satisfaction in Banking Apps – Part 1 of 2

Design Tips to Increase Satisfaction in Banking Apps – Part 1 of 2

Retail banking consumers now prefer using their mobile devices more than any other bank interaction, which makes a mobile app a primary component of overall customer satisfaction. With greater ease switching banking providers at a moment of dissatisfaction, banks need to place extra emphasis on keeping their customers happy and loyal. This starts by giving customers the best tools available and a user experience that helps them access and navigate their banking needs without difficulty. Read more about our design tips for banking apps below. 

 

For the first section of this two-part series, we will cover examples of best practices that we have seen play a role in facilitating engagement and improving the user experience.

Any questions surfacing as you read? Give us a ring! You can always connect with us here.

 

Search & Navigation Part 1

Content Part 1

Guidance Part 2, coming soon

Privacy & Security Part 2, coming soon

Appearance Part 2, coming soon

 

 

Search & Navigation

search-navigation-components-of-app-satisfaction

According to J.D. Power, ‘Ease of Navigating’ is the key differentiator among top-performing mobile banking apps. If a consumer can find what they need in the app, this often yields a happy customer. This satisfaction can also impact bank operations by reducing calls to support centers with potentially aggravating wait times.

 

Let’s jump head first into some easily-executed ideas to help improve your app’s search & navigation as early as today.

 

Easy Login

 

Biometric logins such as fingerprint, face, or voice can facilitate a client’s access to their account.

easy-login-biometric-one-touch

Personalization Capabilities

 

Some banks give the user the ability to customize their application experience to their needs making each visit one that addresses their specific needs.

personalization-personalize

Using Navigation Icons with Label

 

An icon is meant to be universally recognized, but in many cases, they are not. It’s always a safe bet to provide a label next to the icon to provide clarity.

 

using-navigation-icons-with-labels

Use Plain & Simple English

 

Avoid using branded names that might be intuitive to your company, but not to a user. In short: use plain English when possible.

 

use-plain-simple-english-branded-names

 

Transaction History Search

 

Most banking apps default to filtering transaction history by date. Giving the user the ability to search their account is one more way to facilitate finding that specific transaction they have in mind.

 

transaction-history-search

Appwide Search

 

Few banks offer app-wide search to locate features & information. It might just be what your clients needed to discover new or undiscovered features.

 

appwide-search-my-bank

Clear ‘Back’ Access

 

Avoid using a home icon or cancel in place of a back.

 

clear-back-access-button

Autofill/Type-Ahead Searching

 

We continue to be surprised at the number of banks not make use of this simple yet effective interaction. Your customers will be thrilled to have it implemented.

autofill-type-ahead-searching

Content

 

The content that users access in-app should be concise, easy to find, easy understand, and help them reach their goals—simple right? Here are a few ideas:

 

Key Information Front and Center

 

Some applications give users the choice to view account their account balances before login.

 

key-information-front-center

 

Helpful Services

 

Provide customers with additional services that could help them reach their financial goals.

 

helpful-services

 

Real-Time Alerts

 

Use real-time alerts to keep customers informed on important account updates such as direct deposits, personal information changes, and bill due dates.

 

real-time-alerts

 

Avoid Hiding Information

 

Some banks hide interest rates behind an extra tap or elaborate application process. Be nice to customers and let them know what they need to know.

 

avoid-hiding-information

 

Avoid Jargon-Heavy Content

 

Avoid words such as Debit, Payee, APR — instead use Withdrawal, Recipient, Interest Rate.

 

avoid-jargon-heavy-content

Guidance Part 2, coming soon

Privacy & Security Part 2, coming soon

Appearance Part 2, coming soon

 

Editor’s note: 

We know you’re thirsty for more. Part 2 will be coming very soon! While you wait, check out our latest thoughts on UX Strategy for Banks. 

Have any additional questions or want to discuss what Shockoe can do for you? Click here to connect with us. 

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.