Apps

We create apps to support a specific user scenario or need, taking into account the differences among target groups and where they find themselves in the customer journey.

If you have any questions about the VELUX Brand Identity Guide for apps, please speak to your VELUX contact.

Examples

  • MyDaylight App

    MyDaylight inspires end-users in the pre-project phase
      

  • VELUX Roof Pitch app

    VELUX Roof Pitch app helps installers and end-users measure the roof pitch in the house in consideration and specification stages

General usability rules

  • Efficient navigation

    Efficient navigation requires a menu structure and navigation that help users find information and reach their goals using consistent labelling, with the possibility to go back in the flow.

    Example: MyDaylight

    Change previous selections
    Go back in the flow
    Categories
    Menu labels
  • Organisational clarity

    This means that the information architecture is well-structured, using terms and language familiar to the target groups of the app.

    Example: MyDaylight

    Using language common for describing a room
     
     
  • Clear labeling

    This includes properly naming menu items, sections and buttons in a language familiar to users and without overlaps.

    Example:
    Labeling in VELUX Pro
    Example:
    Labeling in MyDaylight
     
     
  • Consistent design

    The look and feel of different pages in the app and linked external content on the web must be similar throughout the flow.

    Example 1:
    Consistent layouts in VELUX Pro

    Example 2:
    Selecting ‘Inspiration’ in MyDaylight takes to landing page with similar design

  • Matching user expectations

    Use user scenarios to support the needs of the target groups through design, content and a seamless navigation experience.

    Example:
    Focusing on the expectations of installers in the VELUX Pro app

  • Effective visual design

    Easily recognisable visual elements help users take next steps and get the most out of the app without any additional help or research.

    Example:
    MyDaylight uses two screens to indicate VR mode. Targets indicate the ability to move around the room using VR mode

  • Supporting readability and scannability 

    Crisp, easily-readable fonts and use of headlines plus text allow for text scanning and separating topics.

    Example:
    Use of different headlines and body text for easy scanning in MyDaylight

  • Facilitating user tasks

    This means understanding different user scenarios and creating flows that fit their needs.

    Example:
    Welcome screen in VELUX Pro offers two flows, based on whether the installer is working on a current project or creating a new one

  • Providing help
    We need to guide the user through the app and provide indications that help navigate, answer typical questions and teach the features.
    Example:
    VELUX Pro sub-heads indicate what needs to be done in this step. The arrows allow the user to go back in the flow
     
     
     
     
     
    Example:
    VELUX Pro information icon
     
     
     

Performance

When working on app performance, we follow the industry-wide guidelines for time limits:

  • Maximum 0.1 second
    for displaying a result in interactive features where the goal is to create a direct effect when a user interacts with it, e.g. clicking on a link, moving a scale or other actions.
  • Maximum 1 second
    for displaying a result of any interaction, e.g. clicking on a link, moving a scale, etc., that leads to a visible change in interface. 
  • Maximum 10 seconds
    for loading content and making visual changes. 

Resource: https://www.nngroup.com/articles/response-times-3-important-limits/

Design specifications

  • Layout

    We follow several key layout principles for VELUX apps:

    • Placing contextual menu and navigation through steps at the bottom
    • Adding supplementary navigation within steps of the flow at the top
    • Using the main ‘playground’ area for the flow’s content
    • Allowing for special information messages and other functionalities that skip top and bottom navigation
  • Main menu

    We use a menu that can be accessed throughout the app:

    • Slides out from the side
    • Supplements the navigation on the main screen
    Example:
    menu in MyDaylight app
    Example:
    menu in VELUX Pro app
  • Colours in apps 


    #ff0000


    #162435


    #737373


    #e9e9e9


    #f6f6f6

    Opacity Chart #162435


    100%


    80%


    60%


    40%


    30%

  • Fonts in apps
    H1 VeluxGothic Regular 26 100% #162435
    H2 VeluxGothic Regular 20 100% #162435
    Labels VeluxGothic Regular 20 100% #162435
    Body 1 VeluxGothic Regular 16/24 60% #162435
    Body 2 VeluxGothic Regular 16/24 100% #162435
    Small labels  VeluxGothic Regular 14 60% #162435
    Other VeluxGothic Regular 14 100% #162435
  • Components

    Splash and loading screen
    Using the app logo and VELUX logo for a loading screen

    App icons
    Example: App icons and sizes for iOS and Android

    Buttons and states
    Button annotations
    Input field states
    Header states
    Dialogue alert boxes

Design resources

Final checklist

To ensure optimal user experience in the app, check if the design follows these general guidelines:

  • Efficient navigation
  • Organisational clarity
  • Clear labeling
  • Consistent design
  • Matching user expectations
  • Effective visual design
  • Supporting readability & scannability
  • Facilitating user tasks
  • Providing help

Loading time

Make sure that the app design corresponds to VELUX User Experience guidelines for apps:

  • Maximum 0.1 second loading time for displaying results in interactive features
  • Maximum 1 second loading time for displaying a result of any interaction, e.g. clicking on a link, moving a scale, etc., that leads to a visible change in interface
  • Maximum 10 seconds for loading any content and visual changes in the app