Ruuvi Station Android UI/UX test documentation

Installation, app info
UI/UX checklist
Ruuvi Station app adds Ruuvi Station icon on Android home screen. Design features a round Ruuvi “eye”.
App icon shows number of alerts triggered with red counter badge
App configuration (permissions, notifications) accessible through Apps in Android OS.
App icon shows number of alerts triggered with red counter badge
App configuration (permissions, notifications) accessible through Apps in Android OS.
QA checklist
Ruuvi Station app takes about 34MB space after installation
Default notifications: allowed
Default permissions (requested during onboarding): location
Additional permissions: Bluetooth
Icon counter badge shows number of triggered alerts
Icon counter badge is hidden by default
Onboarding


Six introductions screens shown with ability to swipe left-right between screens.
UI/UX checklist
Screens:
1 WELCOME FRIEND . Swipe to see what Ruuvi Station can do for you
2 Measure environmental data: temperature, relative humidity and air pressure
Icon: thermometer
3 Access data for each linked sensor in real time and explore history charts
Icon: charts
4 Set alerts and get notified whenever your limits are hit
Icon: bell
5 Let the app act as a gateway
Icon: download cloud
6 LET’S GET STARTED . Press SCAN to find and add nearby sensors to your Ruuvi Station
Button: SCAN
App will ask for permissions after showing disclaimer popup:

Popup:
Enable Bluetooth Scanning
In order to scan nearby Bluetooth devices, Android requires location access to be enabled. Ruuvi Doesn’t track your movements. You’re safe.
Button: OK
Permissions requested:
allow Bluetooth
allow Location
QA Checklist
Matches design
Elements scale on various screen sizes
Portrait, landscape modes
Swipe to left/right works
Button SCAN progress to permissions popup
Shown only once after first launch, never show on app update
Tap on OK is only way to exit permissions popup
App requests following permissions: location, Bluetooth
Permissions requested on Nearby Ruuvi Sensors screen
Location permission granted
Location permission denied, will nag for permission again until granted
Bluetooth permission granted
Bluetooth permission denied, will nag for permission again until granted
Main menu
Main menu gives access to main top level features in app.


UI/UX checklist
Main menu is accessible through top left corner of the app indicated by drawer icon. 
Tap on drawer icon reveals menu from left side of screen.
Menu tree: 
Top
Ruuvi Logo
Menu
Add a New Sensor
App Settings
About / Help
Get More Sensors
QA checklist
Matches design
Elements scale on various screen sizes
Portrait, landscape modes
Menu is shown after onboarding is completed on cards scene (first launch).
Menu can be revealed by swipe from left side of screen
Menu can be hidden by swipe right on the menu
Menu is shown on dashboard view
When dashboard view enabled swipe from left side of screen only works on dashboard not on cards scene
Add a New Sensor brings to Nearby Ruuvi Sensors view
App Settings brings to App Settings view
About / Help brings to About / Help screen
About / Help screen shows version, seen sensors, added sensors, stored measurements and database size at the bottom of the screen
Get More Sensors opens default mobile browser with URL ruuvi.com​
Nearby Ruuvi Sensors
User is shown a real time list of nearby sensors.
UI/UX checklist
Tap on any listed tag will create a new Sensor Card and add it to the rightmost location in cards.
Sensors in/out of range are updated using foreground scan interval.
Menu item (main menu): Add a New Sensor
QA Checklist
Matches design
Elements scale on various screen sizes
Portrait, landscape modes
Sensor shows: MAC address, dBm value, signal strength using blue volume indicator
Sensors list sorted according to signal strength (nearest at the top)
List entries separated by line
If Bluetooth disabled app requests for permission
Arrow at top left: if no existing sensor cards will show NO SENSORS ADDED, PRESS HERE TO ADD SENSORS placeholder
Arrow at top left: if sensor cards exist will show previous viewed sensor card
Sensor Card

Sensor card will be created when user taps on sensor in Nearby Ruuvi Sensors screen. Sensor card shows realtime information regarding a sensor.
UI/UX checklist
Sensor card elements: 
​
Top
Ruuvi logo
Alert indicator
Charts icon
Sensor Card settings icon
Main
Sensor Name
Temperature
Humidity
Air Pressure
Signal Strength
Last updated
Background image
Temperature, Humidity, AirPressure units can be set in App Settings.

QA Checklist
Matches design
Elements scale on various screen sizes
Portrait, landscape modes
Ruuvi logo
Alert indicator greyed when disabled
Alert indicator blinking when alert triggered
Alert indicator bell when alert enabled
Charts icon thermometer by default, charts icon when switched to charts view
Sensor Card Settings opens sensor settings screen in full screen mode
Sensor name shown as capitalized, in single line
Sensor name shows MAC address as default
Long tag name shortens with … to fit on screen
Can use emoticon as name
Name will not link URL or code
Value separator uses localization: ie comma for EU, dot for US
Temperature shown with xx,xx value (current fw)
Temperature uses units set in App Settings/Temperature unit
Humidity shown with xx.xx value (current fw)
Humidity uses units set in App Settings/Humidity unit
Pressure shown with xx.xx value (current fw)
Pressure uses units set in App Settings/Pressure unit
Signal strength shows dBm value -100 - 0
Updated ago shows values in h/m/s/ or date + h/m/s
Updated ago uses foreground interval when app in foreground
Adding/removing sensor reflects on Sensor Card list
Renaming sensor in Sensor Settings reflects on Sensor Card
Dashboard
When Dashboard enabled in App Settings, a list of sensors will be shown as new home screen.
Notice! This requires killing app and restarting it.


UI/UX checklist
Dashboard elements:


Top
Main Menu
Ruuvi Logo
Main
Sensor Avatar (round circle contains first letter of sensor name)
Sensor Name
Alert status
Temperature icon, temperature
Humidity icon, humidity
Air pressure icon, air pressure
Signal strength icon, signal strength
Updated, real time status
Tap on any row will open the respective Sensor Card view.
QA checklist
Matches design
Elements scale on various screen sizes
Portrait, landscape modes
Main menu in Sensor Card view has been replaced with Back button
Back button in Sensor Card view will bring back to Dashboard
Scrollable
Changing temperature units in App Settings reflects on dashboard
Changing humidity units in App Settings reflects on dashboard
Changing pressure units in App Settings reflects on dashboard
Adding/removing sensor reflects on dashboard
Renaming sensor in Sensor Settings reflects on dashboard
Sensor Settings

Sensor Settings contains settings and information regarding a single sensor.

UI/UX checklist
Sensor Settings is accessed via gears icon on Sensor Card. Sensor card settings shows sensor information, alerts and real time voltage/acceleration information.
Sensor Settings elements: 
Top
Back to Sensor Card view (arrow icon)
Export data to file (export icon)
Background image
Background image random button
Background image take photo/choose from gallery
Main
Sensor Name
Alerts
More info
Calibrate hygrometer button
Button: Remove this Ruuvitag
QA Checklist
Matches design
Elements scale on various screen sizes
Portrait, landscape modes
Back icon exists to Sensor Card
Export icon creates csv datafile and opens export options
CSV file contains: timestamp yyy-mm-dd hh-mm-ss-timezone, temperature xxx.xxx, humidity xxx.xxxx, pressure, rssi, acceleration x x.xxx, acceleration y x.xxx, acceleration z x.xxx, voltage x.xxx, movement counter, measurement sequence number
Random background image is set on sensor card creation
Background image reload icon cycles between default images
Background image camera icon opens camera/or gallery
Permissions to use camera/access gallery is requested when first time accessing camera icon
Camera can take photo using device camera
User can bring image from device internal/external location
Supported image file formats: jpg, png, when no support error displayed
Image automatically scaled to fit various screen sizes, portrait/landscape
Default sensor name is device MAC address
Sensor Name supports max 30 characters
Sensor Name supports emoticons
Sensor Name displayed on single row
Sensor Name plain text (blocks URL, code)
Sensor Name cannot be empty, if empty will show MAC address
Alerts include alert type, value range, enable/disable box
Setting alert enabled allows user to adjust range values
Setting alert disabled remembers previously set range values
Movement alert only enable/disabled
More info shows MAC address, voltage x.xxx, acceleration xyz x.xxx​
Calibrate hygrometer opens popup:
In order to measure relative humidity as accurately as possible, a sodium chloride (salt) calibration is recommended. See video tutorials (link) on how to easily do it at home. Note that calibration data will be stored locally on your mobile device. After Ruuvi Station uninstall & reinstall you may need to recalibrate.

Calibration value xx% -> xx%
Cancel, Calibrate
If hygrometer calibration exists, calibrated timestamp shown and clear calibration option enabled
Remove button opens confirmation: Remove sensor Are you sure you want to remove this sensor? Cancel, OK
Removing sensor deletes sensor card from it’s location in sensor cards
Charts
Charts visualizes temperature, humidity and air pressure in charts view.

UI/UX checklist
Charts view is accessed pressing charts icon on Sensor Card. View contains Temperature, Humidity, Pressure charts. Temperature, Humidity, Air Pressure units can be set in App Settings and they reflect on Charts X,Y values. Charts also uses Chart Settings in App Settings.


Charts elements:
Top
Sensor Name
Main
Chart temperature, values X,Y
Chart humidity, values X,Y
Chart pressure, values X,Y
QA checklist
Matches design
Elements scale on various screen sizes
Portrait, landscape modes
Tap on charts icon exists to Sensor Card
Values use localization (ie comma for EU, dot for US)
Chart settings (set in App Settings) reflect on Charts
Temperature units (set in App Settings) reflect on Charts
Pressure units (set in App Settings) reflect on Charts
Pinch to zoom in/out navigates on charts
Pinch to zoom adjusts zoom value on all charts regardless of which chart is zoomed
App Settings
App Settings contains global settings for Ruuvi Station, including background scanning, temperature and humidity units, gateway and chart settings as well as enable/disable dashboard.


UI/UX checklist
App Settings is accessed via main menu item App Settings.
Menu tree:
Background Scanning Settings
Temperature unit
Humidity unit
Pressure unit
Dashboard
Gateway Settings
Chart Settings
(text: Configure interval between points shown on chart)
QA checklist


Matches design
Elements scale on various screen sizes
Portrait, landscape modes
Chosen background scanning method shown
Chosen temperature unit shown
Chosen humidity unit shown
Chosen pressure unit shown
Dashboard toggle enabled/disabled
Gateway url shown

Background scanning settings


Settings for background scanning. 
UI/UX checklist
No background scanning
Explainer: This feature enables background scanning, meaning that your phone will periodically search for beacons, even when you are not using it.
Continuous background scanning
Explainer: The app will periodically search for beacons using a service (with notifications), allowing for a very frequent and reliable scanning, even when you are not using it.
Background scanning interval
Interval selector shown with two up/down scrolling wheels with titles
Minutes, Seconds (min 0:10 max 59:59)
Background scan important note
If you experience any issues with background scanning you should disable battery optimization for Ruuvi Station. This procedure may vary depending on your device vendor, model and Android version.
On Samsung devices go to Android Settings -> Device Maintenance (or Device Care) -> Battery. Disable Put unused apps to sleep. Disable Auto-disable unused apps. Remove Ruuvi Station from the list of sleeping apps. Disable background restrictions for Ruuvi Station.
QA checklist
Default no background scanning
Updating app remembers setting
If update from old version with lazy scanning, no background scanning will be selected
Switches between foreground and continuous scanning when switching to bg/fg
Scan interval is reflected on CSV export
When Continuous background scanning enabled Ruuvi icon appears at top left of device screen when app minimized to indicate scanning is on
Notification drawer will display sticky notification for scanning interval Scanning every m-s.
Temperature unit

Setting for global temperature units. This affects: sensor card, graphs, alerts, csv export.
UI/UX checklist
Radio button:
Celsius (°C)
Fahrenheit (°F)
Kelvin (K)
Explainer: Choose the temperature unit you want to be displayed.

QA checklist


Changing temperature unit reflects on:
Sensor card
Alerts
Charts
CSV export
Temperature unit shows on App Settings under Temperature unit title


Humidity unit
Setting for global humidity units. This affects: sensor card, graphs, alerts, csv export.
UI/UX checklist
Radio button:
Relative (%)
Dew Point (°)
Absolute (g/m3)
Explainer: Choose the humidity unit you want to be displayed.


QA checklist


Changing humidity unit reflects on:
Sensor card
Alerts
Charts
CSV export
Humidity unit shows on App Settings under Humidity unit title


Pressure unit
Setting for global pressure units. This affects: sensor card, graphs, alerts, csv export.
UI/UX checklist
Radio button:
Pascal (Pa)
Hectopascal (hPa)
Millimetre of mercury (mmHg)
Inch of mercury (inHg)
Explainer: Choose the pressure unit you want to be displayed.


QA checklist


Changing pressure unit reflects on:
Sensor card
Alerts
Charts
CSV export
Pressure unit shows on App Settings under Pressure unit title
Dashboard
Enabling dashboard will enable a dashboard homescreen with simplified top-down overview list of sensors.


UI/UX checklist
Simple enable/disable toggle. After enabling or disabling this setting user must kill app for app to show/hide dashboard.
Explainer: Use a dashboard view to see multiple sensors at a glance. Restart the app after enabled.
QA checklist
Enable and kill app, will show dashboard homescreen on next app launch
Disable and kill app, will show default view on next app launch
Gateway Settings
Gateway setting allows sending sensor data to an external gateway through HTTP POST.
UI/UX checklist


Toggle: Keep the device awake while scanning
Explainer: This will make the device stay awake while background scanning is enabled. It will improve background scanning reliability but will make the app use more battery.
Gateway URL field
Explainer: https://your.gateway/…
Device identifier field
A pre-generated id shown by default. 
Button: Test gateway
Indicator below button: RED Nope, did not work. Is the URL correct? GREEN Gateway works! Response code: 200
Explainer: When you add a URL here, the app will execute an HTTP POST with the linked sensors when it does background scanning. For more info, check the documentation (url https://docs.ruuvi.com/ruuvi-station-app/gateway)
QA checklist
Gateway URL allows max 200 characters
Gateway URL explainer replaced with user added url
Gateway URL shows on App Settings under Gateway Settings title
Device identifier allows max 64 characters
Device identifier reflected on external gateway data
Gateway test failed RED Nope, did not work. Is the URL correct? 
Gateway test failed RED Nope, did not work. Is the URL correct? 
Gateway test passed GREEN Gateway works! Response code: 200
Chart Settings
Chart settings control the way charts are shown.


UI/UX checklist
Toggle: Show all points
Explainer: Enabling it may cause charts to update slowly
Draw dots in chart

Explainer: Small dots will help to understand when measurements were collected
Chart interval
Explainer: set interval between points for chart from 1 to 60 minutes. Less value means more accurate chart, but higher requirements to performance of your device
Interval selector shown with one up/down scrolling wheel with title
Minutes (min 1 max 60)
Chart history view period
Explainer: Configure history diapason to be shown on chart from 1 to 72 hours
Interval selector shown with one up/down scrolling wheel with title
Hours (min 1 max 72)
QA checklist


Show all points will show all recorded datapoints in charts
Show all points enabled disables Chart interval setting (greyed out)
Chart interval reduces or increases datapoints shown in charts
Chart history view period reflects maximum window shown in Charts view
Communicate with Ruuvi devices - Previous
Naming conventions
Next - RUUVI STATION APP
App Feature Comparison list
Last modified 1yr ago
Copy link
On this page
Onboarding
Main menu
Nearby Ruuvi Sensors
Sensor Card
Dashboard
Sensor Settings
Charts
App Settings