Our Design Principles
User Experience Centric App Design
We believe in user-centric and experience-centric web and app design, starting with a requirements discovery phase in order to develop a deep understand of the user group and their connection to the business’s brand. We utilize a range of UX tools and methods such as persona development, process flows and wireframe prototype testing to keep users’ experience as the central focus throughout each project. Only once the desired user experience has been properly designed and tested, do we move on to actual app or product development.
Mobile First
We are firm believers in the Mobile First design philosophy. By 2014, more people in the US are expected to access the internet on their mobile devices than on their PCs. By designing for mobile interactions first, both App design and Web products benefit tremendously from less complex, more focused and intuitive user interfaces and experiences.
What’s Important
We design for an emotional, human connection with our products; and our highest aspiration is the collective delight of all those involved in our projects, including our clients and end-users.
Our Design Philosophy
Our design philosophy promotes a co-creative experience with clients where iterative design and development cycles keep clients involved, provide clarity, room for changes and evolution in thinking. Overall, we have found that involving our clients through all project phases provides clarity and speeds up the overall delivery of projects.
Our Design Process
Our Design Process
Our design process is a co-creative and collaborative process with our clients. We have more than a decade’s worth of experience in the product, software, graphic and interaction design fields. We lead our clients through user experience design best practices, utilizing processes like persona development, wireframe-based interaction designs, rapid prototyping and HiFi interactive demos development, if needed.
Some key activities:
Persona Development
Persona Development is conducted to understand the various types of users and their motivations, their life styles, behaviors, likes, dislikes, their purchasing decisions and choices, as well as typical demographics such as age, gender, education.
Benefits & Usage
Benefits
Having a clear, shared understanding among clients, designers and developers of exactly who an app or software is being built for is a critical component in designing a product that meets users’ expectations, is intuitive to use and matches their mental models. Creating personas helps clients, designers and developers avoid the tendency to think of themselves as the users, and puts a face on the eventual customer of the app or product.
Usage
For existing products and services, persona development is done to understand users via variety of research methods. For new app and product development, creating personas serves to cover a range of intended users, anticipating their demographics, motivations, behaviors and so on.
More Information & Examples
If you are interested in understanding more about persona development, here are some great resources:
- Usability.gov
- Cooper on the origin of personas
- Persona ecosystems – David Armano
- ” Creating and using personas and scenarios to guide site design ” – Razorfish
- Customer Storytelling at the heart of business success – boxes and arrows
- Personas, goals and emotional design – UXmatters
- Three important benefits of personas – Jared Spool
- Practical persona creation – evolt.org
- Yahoo’s approach to keeping personas alive – Jared Spool
Wireframing
Wireframes are like architectural drawings that define app behavior, such as potential features, layout, navigation etc. Getting clarity of the app’s behavior is just as important as achieving a “cool” visual design, look and feel.
Benefits & Examples
Benefits
A good wireframe functions as the blueprint of the behavior of the app, and provides the app or product design requirement documents.
Wireframing saves a tremendous amount of time and money in the overall app development process.
For many projects, interactive wireframes are used to create the app requirements documentation in lieu of traditional written requirements documents.
| Wireframing | Traditional Spec |
|---|---|
| … | … |
| Interactive | Static |
| Visually clear with interactivity | Visually poor, one-dimensional |
| Easy to experiment and change | Slow to iterate and change |
| Fast client feedback | Cumbersome client feedback |
| Experiencing the app’s navigation | Reading about the app’s navigation |
An example of an interactive, 80% completed wireframe
Used in the design of the FilmOneFest app, we shared a series of wireframes with the client as interactive PDFs. You can download and try out by clicking the above image.
Visual Design A – Through Hi-Fi Demos & Prototypes
Where wireframes are used to quickly determine the app’s behavior and interaction models, fully interactive hi-fi demos and prototypes serve to illustrate both behavior and visual design, look and feel, and actual visual assets for the development process. These demos and prototypes can run on the client’s mobile device and serve as a fully interactive “minimum viable product”
Benefits & Usage
Benefits
The development of a prototype also creates the actual visual assets needed during the development build process, so the creation of these assets saves time and effort during the development cycle.
In addition, prototypes provide clients the opportunity for early feedback on the actual design, and look and feel of the app. If a prototype is skipped, this feedback can take place only a lot later in the development build cycle, when changes to the design are extremely time consuming and expensive.
Usage
Demos and prototypes can save time and money in many situations: They are very useful for clients wanting to secure sponsorship deals before fully committing to a project, as they allow creating a functioning version of the app or product without committing to the entire development phase and expenditure.
Visual Design B – Through Traditional Methods
We recommend creating interactive wireframe designs to specify the behavior and interaction models of an app. In some cases, the delivery of hi-fi prototypes can be substituted with more traditional design delieveries like moodboards and still images to illustrate a design.