BackBone

IXD Year 04
// App Design
// Web design

Backbone was an idea me and a few friends came up with in a business class, in which I later used in an upcoming design challenge. The challenge required contestants to come up with an "Lifestyle App" as well as a marketing site for final deliverables, though I wanted to think a bit outside the box and ended up coming up with a conceptual IOT type of product with the goal of solving a common problem; bad posture. 

BackBone

IXD Year 04
// App Design
// Web design

Backbone was an idea me and a few friends came up with in a business class, in which I later used in an upcoming design challenge. The challenge required contestants to come up with an "Lifestyle App" as well as a marketing site for final deliverables, though I wanted to think a bit outside the box and ended up coming up with a conceptual IOT type of product with the goal of solving a common problem; bad posture. 

BackBone

Year 04
// App Design
// Web design

Backbone was an idea me and a few friends came up with in a business class, in which I later used in an upcoming design challenge. The challenge required contestants to come up with an "Lifestyle App" as well as a marketing site for final deliverables, though I wanted to think a bit outside the box and ended up coming up with a conceptual IOT type of product with the goal of solving a common problem; bad posture. 

BackBone

Year 04
// App Design
// Web design

Backbone was an idea me and a few friends came up with in a business class, in which I later used in an upcoming design challenge. The challenge required contestants to come up with an "Lifestyle App" as well as a marketing site for final deliverables, though I wanted to think a bit outside the box and ended up coming up with a conceptual IOT type of product with the goal of solving a common problem; bad posture. 

backbone_cover

The Rise of Musculoskeletal Disorders

"With the average person working up to 2000 hours per year, as well as the growing demand in personal electronic devices, people have been more at risk in developing serious health issues such as musculoskeletal disorders. In fact according to the workplace safety and insurance board, MSD’s represent over 40% of all lost-time compensation claims in Ontario. The combined direct and indirect costs are conservatively estimated to be $19 billion from 1996 - 2006 (IHSA)."

“Musculoskeletal Disorders & Ergonomics.” Musculoskeletal Disorders & Ergonomics, IHSA, 2017, www.ihsa.ca/msd.

 

The Rise of Musculoskeletal Disorders

"With the average person working up to 2000 hours per year, as well as the growing demand in personal electronic devices, people have been more at risk in developing serious health issues such as musculoskeletal disorders. In fact according to the workplace safety and insurance board, MSD’s represent over 40% of all lost-time compensation claims in Ontario. The combined direct and indirect costs are conservatively estimated to be $19 billion from 1996 - 2006 (IHSA)."

“Musculoskeletal Disorders & Ergonomics.” Musculoskeletal Disorders & Ergonomics, IHSA, 2017, www.ihsa.ca/msd.

 

Deliverables

Market Research
Personas
Wireframes
Style Guide

Market Research
Personas
Wireframes
Style Guide

Market Research
Personas
Wireframes
Style Guide

Marketing Page
High Fidelity Mocks
InVision Prototype

Marketing Page
High Fidelity Mocks
InVision Prototype

Market Research
& Competitive Analysis 

As a starting point, I decided to do some market research on existing posture products and apps. Most of the products that I found were wearables or attachments to seats. I found that many of them presented their information in a sort of “Infomercial” style (with the exception of Poze) which made it feel like their products were targeted towards an older generation. 

I wanted my end-product to target a much younger audience, as I feel bad posture can be a bad habit that can start earlier in life, seeing how much time younger people spend at desks or in front of a computer.

As a starting point, I decided to do some market research on existing posture products and apps. Most of the products that I found were wearables or attachments to seats. I found that many of them presented their information in a sort of “Infomercial” style (with the exception of Poze) which made it feel like their products were targeted towards an older generation. 

I wanted my end-product to target a much younger audience, as I feel bad posture can be a bad habit that can start earlier in life, seeing how much time younger people spend at desks or in front of a computer.

As a starting point, I decided to do some market research on existing posture products and apps. Most of the products that I found were wearables or attachments to seats. I found that many of them presented their information in a sort of “Infomercial” style (with the exception of Poze) which made it feel like their products were targeted towards an older generation. 

I wanted my end-product to target a much younger audience, as I feel bad posture can be a bad habit that can start earlier in life, seeing how much time younger people spend at desks or in front of a computer.

marketing_sites

Personas

Created some personas after finishing off my market research. While I didn't have any pre-existing data or analytics to base the personas off, I thought that it would be a good tool to use just to help figure out what market I was designing for. Using user scenarios and daily tasks was particularly helpful when figuring out my app’s use cases.

Created some personas after finishing off my market research. While I didn't have any pre-existing data or analytics to base the personas off, I thought that it would be a good tool to use just to help figure out what market I was designing for. Using user scenarios and daily tasks was particularly helpful when figuring out my app’s use cases.

Created some personas after finishing off my market research. While I didn't have any pre-existing data or analytics to base the personas off, I thought that it would be a good tool to use just to help figure out what market I was designing for. Using user scenarios and daily tasks was particularly helpful when figuring out my app’s use cases.

 

Transitioning from research to design

 

Transitioning from
research to design

 

Transitioning from research to design

After finishing of personas and some light market research, I decided to start the design phase and create some wireframes. As mentioned before, my research showed me that there was some room to aim my product towards a younger to middle aged audience. I also thought about the idea of having detachable bluetooth sensors that users could place on any chair without the need of wearing a device.  

After finishing of personas and some light market research, I decided to start the design phase and create some wireframes. As mentioned before, my research showed me that there was some room to aim my product towards a younger to middle aged audience. I also thought about the idea of having detachable bluetooth sensors that users could place on any chair without the need of wearing a device.  

After finishing of personas and some light market research, I decided to start the design phase and create some wireframes. As mentioned before, my research showed me that there was some room to aim my product towards a younger to middle aged audience. I also thought about the idea of having detachable bluetooth sensors that users could place on any chair without the need of wearing a device.  

Wireframes

Wireframes

Wireframes

Due to time constraints I decided to create higher fidelity mockups using a material design sticker board on sketch — that way I could transition onto the visual design and styling of the app a lot more fluidly.

Due to time constraints I decided to create higher fidelity mockups using a material design sticker board on sketch — that way I could transition onto the visual design and styling of the app a lot more fluidly.

Due to time constraints I decided to create higher fidelity mockups using a material design sticker board on sketch — that way I could transition onto the visual design and styling of the app a lot more fluidly.

Page 01 —
Posture Rating

Features

• Gives a posture rating out of 10
every few minutes.

• Gives user advice depending on
their progress.

• User can switch between seeing their posture activity hourly, daily or monthly to track progress.

Page 01 —
Posture Rating

Features

• Gives a posture rating out of 10
every few minutes.

• Gives user advice depending on
their progress.

• User can switch between seeing their posture activity hourly, daily or monthly to track progress.

Page 01 —
Posture Rating

Features

• Gives a posture rating out of 10
every few minutes.

• Gives user advice depending on
their progress.

• User can switch between seeing their posture activity hourly, daily or monthly to track progress.

part1v2

Page 02 —
Posture Overview

Features

• Gives a posture rating out of 10.Shows data being read from the user’s pressure sensors. Can tell users how to reposition their body if needed.

•The amount of time a user sits is divided into sessions to easier communicate how long the user has been sitting down for.

- If the User has been sitting down for too long (ie: 1 hour) a moda lwill show up asking if the user would like to take a break.

Page 02 —
Posture Overview

Features

• Gives a posture rating out of 10.Shows data being read from the user’s pressure sensors. Can tell users how to reposition their body if needed.

•The amount of time a user sits is divided into sessions to easier communicate how long the user has been sitting down for.

- If the User has been sitting down for too long (ie: 1 hour) a moda lwill show up asking if the user would like to take a break.

Page 02 —
Posture Overview

Features

• Gives a posture rating out of 10.Shows data being read from the user’s pressure sensors. Can tell users how to reposition their body if needed.

•The amount of time a user sits is divided into sessions to easier communicate how long the user has been sitting down for.

- If the User has been sitting down for too long (ie: 1 hour) a moda lwill show up asking if the user would like to take a break.

part2

Page 03 —
Chair Setup

Features

The user doesn’t have to be confined to one chair. The can simply take off the sensors and place them in another chair if needed — or even pair with another set of devices. This screen shows all the chairs that the user has set up and paired with in the past.

Page 03 —
Chair Setup

Features

The user doesn’t have to be confined to one chair. The can simply take off the sensors and place them in another chair if needed — or even pair with another set of devices. This screen shows all the chairs that the user has set up and paired with in the past.

part3v2

Styleguide

Since I Was designing for android, I ended up using material design as a framework to start stylizing. I used the provided material design color tool to help create a custom interface color scheme.

Since I Was designing for android, I ended up using material design as a framework to start stylizing. I used the provided material design color tool to help create a custom interface color scheme.

Since I Was designing for android, I ended up using material design as a framework to start stylizing. I used the provided material design color tool to help create a custom interface color scheme.

colorTool

Around this same time, I experimented with other colour schemes as well.

Around this same time, I experimented
with other colour schemes as well.

color1
color2
color3

Marketing Page

As part of the design challenge requirements, I also designed a simple marketing page using a basic 12 column grid to help explain the app and it’s use cases.
Invision Web Prototype

As part of the design challenge requirements, I also designed a simple marketing page using a basic 12 column grid to help explain the app and it’s use cases.
Invision Web Prototype

As part of the design challenge requirements, I also designed a simple marketing page using a basic 12 column grid to help explain the app and it’s use cases.

Invision Web Prototype

sketch_marketingsite
finalbackbonesite