What is the Best practices in mobile app design?

Designing the app has been a challenging and rewarding journey.

1. User Journey

First, think how your user will be experiencing from the beginning of the app, what they would normally expecting from the interaction. This process helped to decide how the app’s user experience might be designed to fit in with a feeding routine.

2. Jobs To Be Done

One of the most powerful tools we used is a JTBD form. Instead of focusing on what the problem is or what the users want, we ask ourself why they need it. By understanding why people might want this app it increased the chances of making a truly valuable product.

3. User Flowchart

Up until now we had a vague idea of how the app will function. Mapping the basic flow of the app forced us to figure each step on the path the users will take throughout the solution. We first sketched it on paper and then digitally rendered it.

4. Sketches

This was the first step to help us outline the app and visually imagine it.

5. Wireframes

This visual guide represents the skeletal framework of the app. It helped us arrange the interface elements while we focused on the functionality rather than what it looks like. Moreover, the simplicity of wireframes allows us to quickly test ideas without diving into the details.

6. Storyboard — Using The App

We created a storyboard describing my user’s experience with the app. This is a great tool to explore how the product will be used in a larger context, as if it was a part of a bigger narrative. It’s an effective and inexpensive way to capture, relate, and explore the app in a real world setting. This study helps understand the circumstances and the larger context in which the app will be used.

Visual Research

1. Inspiration Board

Before getting started with the visual design we create an inspiration board. The purpose was to learn about the visual world and gathering inspiration from other pet and nutrition apps.

2. Iteration

Next we explored different design possibilities: From each repetition of the design we learn something that we can use for the next iteration.

3. Color Palette

Next you need to decide which color palette that suit your app or your corporate identity. For example, green palette that symbolizes nature, life, health, youth, spring, hope, renewal, growth, rest and relaxation. Hence, a green color palette is fitting for an app that promotes healthy and natural food. Additionally, we used grey for the text and and included a great deal of white to give a calm and clean appearance.

4. Typography

5. Icons & Illustrations

The illustrations and icons are an important part of the design. They communicate ideas and concepts that should not and sometimes cannot be communicated with words. Furthermore, they allow consistency of the visual aesthetics that help build the users’ trust and produce moments of delight.

6. Naming & Logo

Hand sketches / Digital rendering

7. Micro-Interactions and Animation

One of the last things we did was to explore how motion will be implemented in the app, helping us to grasp the app’s flow and functionality on the deepest level.

  • Bruce Sutton says:

    Neque turpis vitae eros praesent varius. Egestas pellentesque urna blandit, sed ac leo ut mi, nam wisi, laborum donec erat amet.

    • Vincent Adams says:

      Nec ut tellus ornare, orci tortor suspendisse aliquet sollicitudin rhoncus, maecenas suscipit cras porttitor vestibulum vivamus.

  • Jena Lambert says:

    Eu et tellus vestibulum taciti et sit, nunc enim ipsum donec aliquam vitae, per mauris, amet ultrices. Pellentesque amet proin ut vestibulum eleifend nam, wisi vel tellus pulvinar mi risus consectetuer, sed faucibus facilisi, accumsan nam.

Leave a Reply

Your email address will not be published. Required fields are marked *