Design Processes for Brainstormr Mobile, Our New iPhone Application
Reading time: ~ 2 minutes
When I first came on staff as a User Experience Designer at Planet Argon, one of my very first projects was to take our responsive site, Brainstormr and bring it into the mobile world by building an iPhone application for it. My experience designing Brainstormr was the first time I had gotten an opportunity to do a Mobile Application design and I jumped at the opportunity. There was a lot of research and learning involved, but it was totally worth it, and now i am proud to say my first application design came out a success. Here are a few things I learned along the way.
1. Moodboards are the best way to figure out the design before actually designing.
In my past experience as a designer, I would always dive right into designing the homepage, or mock up the visual design from wireframes. Well, times have changed, and now there is a multitude of devices and sizes your app will be running on. So when planning for a new design a good method is to create a document or visual style guide that represents broad ideas of the branding and design. Such as ideas, typography, colors and mood you want to set for the aesthetic of the application. You can include specific elements that would be shown on a page such as buttons or headers, but really try to keep it in broad context rather than to specified pages of the app.
2. The new rules and processes in mobile web app design
Once I got the moodboard approved and started working in the actual building and designing phase, I had to establish new organizational goals and rules within my mobile design process.
We were designing the initial version for IOS devices, and there are different screen resolutions for different phones. There is the iPhone3 at one size, double that size is the iPhone 4 and 4s retina screen, and then the iPhone 5 is 176 pixels taller than the 4. Within each of these versions, there were about 30 screens to design.
There were a number of questions I asked myself when planning this process out:
What was the best way to streamline this process of designing individually for each phone? How can I keep everything organized and sorted in case there are any updates within any of the specific pages and sizes? And how can I make it easier if we decide to create and release an Android version of the app?
One of my main decisions was to make sure to design everything in a scalable format by using vector elements and patterns for the textures. This way, I could start with the iPhone 3, get that design finalized and approved, then scale up the existing artwork to the other sizes. Having everything in vector format keeps my graphics scalable without losing image quality and saved a large amount of time since I didn’t have to rebuild every graphic.
Another thing I had to consider in my process was already established elements and behaviours for IOS devices. It seemed that each element using UIKit framework already had at least some set rules, best practices and common design patterns. I found it very valuable to research what these were, then think about my design and functionality based on what was already established by Apple and other leaders in the industry.
3. Combining a professional level of function, content and aesthetic is a must. Look at these 3 aspects and see how they fit together for a stronger application.
Every project I work on reinforces the concept of these rules and how they combine together to form the best possible product for our customers. It’s not just about making something pretty, it has to function well, be easy to understand and use, and provide value to the customer.
When we make sure that the combination of these elements are in each project, it establishes and maintains design professionalism and a high standard to quality services and products in our industry.