Designing for BB10 – 3 Great Interface Elements
I’m an iPhone user at heart, but as an interaction designer at CollegeMobile, my job requires me to design for all the major mobile platforms: iOS, Android, BlackBerry, and Windows Phone. There is no better way to learn a platform than to use it as your actual phone, so I’ve been using different devices (notably iPhone 4S and Galaxy S3) as my primary device to understand the different platforms.
Last weekend, I got a BB10 phone (the Z10), and I must say that BB10 is a great platform. The more I used it, the more I liked the way the interface is set up. Here are my three favourite interface concepts from BB10.
Back button
On iOS, the “back” button is always in the top left corner. I am right-handed, and other than while typing, I almost exclusively use my phone one-handed. This makes the back button placement on the iPhone the farthest possible from my comfortable resting position. On Android, I had a different problem. I usually rest my thumbs on the bezel on the bottom of the device, and would often tap the S3’s soft back button accidentally.
Reaching for the iPhone back button/Resting my thumb on S3 back button
On BB10, the back button behaves similar to the iPhone. The back button appears when you navigate to a screen in a hierarchy that makes sense to go “back”; however, it appears at the bottom left (and is quite large), making it far easier to tap when needed, but not easy to tap accidentally.
BB10 Settings app
Pull down menu
I’ve always liked having a dedicated “menu”. When designing for iOS, I never know where to put the global settings (for example, default choices for units of measurement or locations), and screen-specific options (for example, clear all). These usually end up as buttons in the navigation bar along the top of the screen; however, on iPhone, you only have room for one or two buttons (remember the back button is at the top left). Android has solved this problem with the action bar, which puts main actions at the top right and has an “overflow” of buttons along the bottom of the screen. The action bar isn’t actually supposed to be used for settings, though, as the name suggests (“action” bar).
In BB10, when you pull down from the top of the screen, there’s a menu hidden up there. This is a great place to stick both global and per-screen settings. It also doesn’t take up any screen real estate until you need it.
BlackBerry World app
Expanding screen drop down
On the web, drop down lists are very common. They are great because they show which option is currently selected, allows you to change the option in-place (without going to another screen), and uses minimal screen real estate because it hides unselected options.
In the mobile worlds, Android has drop down lists that work pretty similarly to the web; however, because of limited screen space, sometimes these work strangely when you open one near the bottom of the screen. They also cover up the text below them, which may make it hard to get context of where you are on a page. On iOS, the problem is much worse, because there is no concept of a drop down list. The equivalent is a modal dialog, which comes up from the bottom and covers the whole screen, or a new screen that comes in from the right with a back button at the top left. These animations take a long time, and it really feels like overkill when you are just switching between 3-4 options.
I love how BB10 has solved this. There is a drop down list of sorts, but it they don’t cover up items below, because it moves everything down. Not only does this bring this very useful interface concept into mobile, they are fast and lightweight, and they look great!
Cineplex app
Conclusion
Overall, I loved using BB10, even for the short while I had with it. What I like the most about BB10 is that it feels unique: it feels like it is something novel, not a copy of another platform. It has its own interface concepts that work well and look great. I’m excited to start designing and building awesome apps for BB10!
NuuNest – Bringing Technology to New Parents
It won’t change your baby’s diaper, but it will help to answer some of those Big Questions that new parents will have with their new bundles of joy! NuuNest, created by registered nurses Cindy Leclerc and Jana Stockham, is an innovative iphone app that easily tracks baby’s data. It includes health tips based on baby’s age and what to expect for feedings, diapers and weight. NuuNest also lets parents know if data is entered for feeds, diapers or weight are areas of concern.
In summer of 2012 Saskatoon nurses, Cindy and Jana, contacted us with an app idea. They had been referred to us by the Women Entrepreneurs of Saskatchewan, and had come up with a business idea that involved creating an app that would track newborn’s feedings, diaper changes, weight, etc. Once we met Cindy and Jana and heard their ideas and their passion for providing a quality product to new parents across the world we were hooked and knew we wanted to work on the project with them.
Cindy Leclerc and Jana Stockham – Registered Nurses/Accredited Lactation Consultants
As with many of our clients, Cindy and Jana were very passionate and knew their area of expertise inside and out. What CollegeMobile brought to the table was the ability to design a world-class app around their vision. Once or twice a week we would hold design meetings that would bring Cindy and Jana’s vision to life. In these meetings our Interaction Designer would go through the wireframe designs screen by screen to ensure the flow made sense and would work seamlessly for the end users. Having Interaction Designers on our CollegeMobile team gives a special advantage to our clients as they get to work closely with the designer to ensure their vision is carried out exactly how they wished. Our Interaction Designers are also very educated in how apps should function and what will provide the end user with the best experience.
Once the wireframe designs were approved by Cindy and Jana, they were sent to our developers to make the app come to life. Cindy and Jana were given builds to test as we made progress on the development. They also gathered dozen of parents and healthcare professionals to test the app and provide feedback before it was pushed to the Apple App Store. While we were working on the development, our app wireframe designs had been sent to a Hustle and Bustle, a Toronto design company, to put the extra sparkle on the app and make it look great. As I mentioned in our Lemonade Day and the App blog post, we often work with many teams who each bring a special skill to the table to complete the project.
Once the app was officially launched, stories and press releases began popping up all over the Canadian and American media, thanks to a marketing team they hired. Once the app went live it received widespread exposure and quickly moved to the “#1 Paid Medical App on the Apple App Store” position! We were all very happy and proud that NuuNest was being so well received!
Working with Cindy and Jana and developing the NuuNest app is a great example of how this collaborative process can work for other clients. Cindy and Jana had a very “hands on” approach that made the end product strong and filled with personal and professional touches that translate to a great experience for the user.
To download NuuNest, visit The Apple App Store.
If you have an amazing idea you would like to turn into an app, contact me at jess.bonish@collegemobile.com or at 1-800-298-7081.
Lemonade Day and the App
When life hands you lemons….. start your own business!
As many of you know CollegeMobile is an entrepreneurial venture founded by Chad Jones in 2009. Chad saw an amazing business opportunity in the world of mobile app development and started CollegeMobile and the rest is history. Around the same time I was working at a University entrepreneurial centre. Through the centre I took on a side project as the City Director of Lemonade Day Saskatchewan. Lemonade Day teaches children, in kindergarten to grade 8, the values and lessons of entrepreneurship. This program strives to plant the seeds of entrepreneurship in the youth of North America to teach them lessons that will last throughout their lifetime.
Lemonade Day was founded by Michael Holthouse of Houston Texas, a very successful entrepreneur who wanted to share these lessons with the youth of North America. Every year Lemonade Day hosts a City Director’s Conference where all of us City Directors meet up to talk about best practices and share the success stories from that year. Last year I said “Chad this is a great opportunity for us to develop a mobile app that will digitize Lemonade Day’s materials.” Off I went with my carry-on suitcase filled with yellow clothes and an iPad filled with designs that I would pitch to Michael in Texas. Our whole team was excited for the possibility of working with such a great organization that did so much to empower the youth of North America. Michael and his team loved the mobile app idea right from the start and we soon began work on one of the largest apps we have ever developed.
Not only were we working with an amazing organization and well-know and respected Houston Entrepreneur but we also had another cherry on top of our cake: Google for Entrepreneurs was going to fund the development of the Lemonade Day App! Lemonade Day had secured a national sponsorship from Google that would allow them to reach their goal of “1 Million Entrepreneurs”, developing a mobile app was part of this plan to spread the Lemonade Day message!
With larger projects, such as Lemonade Day, there are often many stakeholders involved. In Lemonade Day’s case there were 6 different teams working on the project!
• CollegeMobile – Saskatchewan-based mobile app development company that developed the iOS and Android mobile app
• Yastech – a Saskatchewan-based company that developed the app backend and Interactive Website that complimented the mobile app
• Landtroop Strategies – a Texas-based Strategy company that took the Lemonade Day workbooks and redesigned the content for the app.
• The Old State – A Texas-based website design and development company that helped to sync data between the Interactive Website being developed and the current Lemonadeday.org site
• Limb Design – a Texas-based design company that created the images that are in the app
• Prepared 4 Life – The Texas-based non-profit organization that operates Lemonade Day. They were the central hub that edited all of the content, tested the app with focus groups, gave final approvals and many, many more tasks that brought the app to where it is today
It takes a lot of organization and coordination to make sure that all of these teams know what their tasks are and what the other teams are doing at any given point. Even though we were separated by 3,000+ kilometers we still managed to have very good communication by using daily email updates, daily phone calls and daily Google Hangouts that allowed us to chat face to face and share documents.
Lemonade Day transformed this year from a personal project of mine to a project that I got to share with my whole CollegeMobile team. We were able to create an amazing app that will hopefully touch the lives of youth across North America.
Download the Lemonade Day App for Android HERE and the Lemonade Day App for iOS HERE.
If you would like more information on Lemonade Day and how you can get your city, group, organization or family involved please visit http://lemonadeday.org
Seeking Inspiration for Design
One of the most exciting things about our business, (aside from the cool apps we build!), is when we get to meet new clients and learn about their business. From this first discussion we hear develop mobile app ideas that can enhance their business and give some sort of value-add to their clients. Once we have gathered these ideas our Interaction Designers turn these ideas into actual mobile app designs. Here is a little insight from one of our Interaction Designers, Yue Gao:
When I studied in HCI, we were taught that the user is very important. When I work with clients I try to solve a problem that will improve their user’s experience. When I design apps, I find that in order to improve the user’s overall experience, both the interface and the interaction flow are essential. For example, when we see a poorly designed app most of us automatically judge it unfavorably before we even start to use. On the other hand, if the graphics of an app are pretty but not functional, people will just say, “cool” but won’t continue to use the app.
Coming up with good designs for app is a very involved process. I remembered the first time I designed an app, I absolutely hated the color combination I chose. It just didn’t look right no matter what I did. I decide to get some guidance from my supervisor on how I could become a better designer. She reviewed my work and shared her personal tips with a very important main lesson: “learn and get inspired from everyday things.” She told me whenever she saw good color combination she took a picture and saved it for later use. When she went to conferences and saw appealing slides, she took pictures for later inspiration. She gathered not only graphic design but also interaction design. For example, when she saw a vending machine or elevator buttons that were confusing to users, she would take a picture and spend a little bit time to think and redesigned them.
I took her tips and found it is extremely useful. I created an inspiration folder on my phone and take pictures when I see things that inspire me. When I design apps I always turn to my inspiration folder to find ideas that can enlighten me. For example, recently, when I designed an app for a local gym, I needed to integrate the words “scan barcode ” on the home screen with a bunch of other information. The first idea that came to my mind was making a rectangle button on the top of the screen, but I thought it might look so dull. When I turned to my inspiration folder and a good idea stood out to me. I found a poster picture that I took from my office and I liked how the title was designed. I followed a similar way to design the “Scan barcode” button. I put the button across the title bar and it ends up not only ended up taking less space (more screen real estate for other additions!) but also add style to the overall design of the app.
Is Mobile Web finally truly dead?
This question has been discussed several times before. It is clear that apps have won out over mobile web in terms of users preferences as 85% of users prefer an app over a mobile website. It is also clear that Smartphones are the future and as a result mobile web is on the way out as apps will triumph over mobile web in the long run due to user’s preferences. But the question is, is Mobile Web truly dead…now?
In this case the answer to this question isn’t absolute. Instead it will be based on the target audience you are targeting. What is the demographics of your customers and the users you are targeting? More importantly is this something you can measure from your market analysis or website analytics?
If you are targeting a tech loving crowd that can’t wait to get their hands on the next hot SmartPhone or the younger crowd or a host of other groups. Then yes mobile web is dead and you shouldn’t spend any of your efforts on mobile web but instead put it towards a better app. In that case you may want to use smart banners to simply direct users to your app if they happen to come across your website on a mobile device. This directs users on smartphones to an app where they will have a better experience then they would on a mobile website. In those cases Apps are clearly better since they offer a better quality experience. However, if your users have a large number of dumb phones then it may be valuable to invest in mobile web as well or instead. So the answer depends on the demographics of your users and how you think those demographics will change in the future. Analytics and market analysis as well as your future strategic plans all drive these decisions but remember who you are targeting. We don’t even believe an App is right for every business right now but nearly every forward looking business should be thinking mobile which will usually mean they should be looking at apps. But again it depends on your customers and their tastes and preferences.
If your management team doesn’t think mobile or an App is important remind them that BlockBuster Video ignored the web because they had a business model that worked very well. However, that allowed small companies like Netflix eventually to not only take over their business but put them right out of business by taking their entire market. Don’t allow your business to become a BlockBuster Video by ignoring apps.
ROI Series – Part Three: Apps for Marketing and Customer Service
Every company that enquires about a mobile application wants to know the ROI. A few weeks ago, we covered “ROI – There’s an App for That, Part Two: Apps That Reduce Costs,” which revealed the ways a mobile app improves employee efficiency and reduces costs. Well, there’s still more to mobile apps than generating revenues from the app itself and reducing costs. Mobile apps can also be used to enhance marketing and customer service. These types of apps are designed for the customer and provide a sort of value-added service.
Apps for marketing and customer service do not generate revenue from the app itself. In many cases, depending on your type of company, you wouldn’t charge customers a fee to access features in your app, much like you wouldn’t charge customers to access features on your website. Similarly, you wouldn’t display other company’s ads in your app, much like you wouldn’t display ads on your company website. Again, this all depends on the type of company you operate.
Like any marketing campaign, you advertise with the intent to improve awareness, interest, evaluation, trial, or adoption of your product. There is obviously no revenue being returned from these advertisements. Mobile applications for marketing are very similar in that they include the brand’s logo, colours, and more to improve consumer interest, evaluation, trial or adoption.
Consumers won’t just download a marketing app though. They will download a customer service app (which uses marketing). CollegeMobile has created many of these apps for credit unions and retail organizations. These mobile apps might provide customers with access to a company’s services, or information on a company’s products.
There are hundreds of different uses for a mobile app, so you will need to use your imagination. What kinds of mobile apps do you think your customers would use?
