EXPERTISE in UX/UI DESIGN

HEALTH IOT DESIGN PROTOTYPE

Year
2020

project type
Human Centric UX/UI
Machine data Interaction
internet of things (Biometric sensor)

Software
Apple (C) IOS
Swift
anaconda / jupyter notebook

This is an experiment in Design, Research, and Prototyping. The focus is to use Agile and Cloud based UX/UI tools to build Health interfaces for Apple(c) Watch and iPhone. The tools and software IDE include:

Sketch Logo
Adobe XD Logo

Scenario

We gathered a hybrid DEVSECOPS team that consisted of personnel with expertise in graphics, UI/UX, business analysis, data analysis, project management, and software development.

Goals

Use established and mature platform. We chose Apple IOS. We chose XD, Marvel, FlintOS. Our phased approach was to get to a beta application, collect and curate a backlog of features in Jira, and then build on two-week sprints to a minimally viable product.

Designer

Designers deliver visually appealing and informative graphics, create application interfaces and elements of user experience, and define guidelines of practice.

Analyst

Analysts identify personas and business cases for heuristic evaluation, model data and select algorithms, and manage epics and user story communications during releases of interfaces.

Developer

Developers offer technical and architectural options to match UI/UX needs, build features and functionality securely, and manage CI/CD pipelines.

PERSONAS

We define a persona so the whole team understands the why and the what. The design and management team get to understand the intentions of the application and the necessary features and functions. But it all starts with a user and a persona helps the team understand the user's mission, mental state, environment, and expected experiences.

A Focused Professional
This user is mission focused and wants information to accelerate her decision making and do more in less time. She understands the data she interacts with, is visual, and synthesizes information to where it works for her. She keeps to her schedule.

Accelerate Decisions

By correlating physical, spatial, and schedule data.

Uncover Unknowns

Perturb digital assets with pointed queries

Leverage Social

Learning better processes by leveraging a social graph

Deliver Content

Delivering expertise and contextual understanding

PERSONA ONE

Focused Professional

Our Design Process

PACT: Design-DEVSECOPS

Our user base would be select groups of Apple Watch owners interested in knowing the effect of their schedule and activities on their heart rate.  Users would have to socialize with accounts detailing Health information.

The range of activities and behaviors include daily work, fitness, rest, and recovery activities.

The data would also map to schedules, times, and duration.  No location or social proximity is used.

The initial system considered self identified health data, collected heart data, selected target rate, and charts to view current, day, week, and month results.

Apple IOS kits and code. JIRA for sprint management.  Jupyter Notebook for data analysis.

Core UX/UI was selected based or our team’s experience and familiarity.  Teammates experimented with new open source tools as they saw fit.

MOSCOW: Design-User

Based on the Personas selected and in coordination with the user scenario and technical capabilities.
 
1. User must have a sense of past and present status
2. User must have ability to set target status

User should have a visualization of their time specific health information. 

This could be for a date range or a range as a percentile of acceptable status.

This is deferred to Phase II of the product life-cycle.

• User ability to socialize status. 
• User ability to visualize future self 
• User ability to manage and plan schedule User ability to select unique activities
The hardest part of the process is to set and curate a backlog.  Future product release plans include:
• Machine ability to determine approach to activities
• Machine ability to recommend activities

DESIGN HIGHLIGHTS

Vertical Scrolling
Highlighting the current page through means of color helps users explore and understand the state.

Cards
Cards with rounded corners make the content more tactile and approachable. Lowering the opacity of past/future workouts emphasizes the current exercise.

Navigation Menu
Highlighting the current page through means of color helps users explore and understand the state.

SOLUTION

We met weekly in person and online to brainstorm, explore, discover, and finally decide on the range of epics we wanted to build on. During these meetings, the team reviewed the stories, graphics, sample data from their Apple Watch use, and discussed their data and the visuals on their Apple iPhones. We built the sprint plan, sprint backlog, estimates and the commitment to complete the beta version of the prototype.  Task lists were determined and updated at each meeting to identify the sets of work effort that needs to be completed by a specific member of the project and for interdependencies.

Sprint durations were two weeks. During these two weeks, we limited changes to the duration and deliverables of the sprint.  During the sprint we have the following Agile artifacts:

  • User Stories that capture features, options, functionality, and requirements of other types from interviews with end-users and system owners. These stories also integrate into test cases and map to specific iterations;
  • Task Lists identify the sets of work effort by person and interdependencies.
  • Bug Lists that clearly define logical and system errors identified by error logs, compiler output, and testers;
  • Workbooks that assign bugs, issues, and tasks to specific personnel during specific iterations;
  • Task-boards, Storyboards, and Dashboards that track and display all the artifacts, progress, and status; and,
  • Reports that offer a static view of any particular moment in the project.

We used Jira and Github for our Continuous Integration/Continuous Deployment (CI/CD) pipeline to match our expertise in automated CI/CD in AWS. The backlog comprises user stories with features, options, functionality, and requirements and test cases.

  • Sprint Review:
    During our reviews we were able to demo their completed UI/UX and coding tasks for continuous improvement.
  • Sprint Retrospective:
    We discuss what went well, what could be improved and selected action items for further improvement of the process.

Locked Header and Navigation

Chart and Card Layout

Text and Data

Combined Elements

CONCLUSION

The Agile and Cloud based process works well for both Human Centric design prototyping, Machine Learning experimentation, and for rapid application development.  There is no lag between communications, planning, and release management.

Anaconda and Jupyter Notebook with Pandas, PyPlot, and SciKit are excellent sources of Data Lifecycle, Visualization, and Machine Learning experimentation.

Amazon Web Services is an ideal platform for Automated Continuous Integration / Continuous Deployment.

Downloadable Assets

Adobe XD UI Kit
Last Updated 03/09/20

60.4 MB

Sketch UI Kit
Last Updated 03/09/20

60.4 MB

Flinto Animated Transitions
Last Updated 03/09/20

60.4 MB

Presentations

Corporate Capabilities

Agile Development Security Operations

Open Source Research & Prototyping

Careers

LinkedIn

Indeed

Glassdoor

Contact Us

5000 College Avenue, Suite 2122
College Park, Maryland 20740