1

Lively WearableUser-centered Design Process

2

Contents03 About04 My Role05 Design Process06 Empathize

07 Personas09 Storyboard

11 Define12 Product Reaction Words

13 Ideate14 Ideation Session15 Sketches

21 Refine22 Wireframes25 Mockups30 Styling

35 Prototype and Test38 Updated Flowcharts

43 Results and Learnings

3

AboutDetailsDate: June 2017Client: GreatCall, Inc. Platform: Web and Desktop Application

Situation• GreatCall realized that older adults were adopting smartphones that were not GreatCall

phones. Many of these older adults were on family plans and received hand-me-down phones from their sons or daughters. GreatCall wanted to tap into this senior smart-phone market by offering a wearable device.

Obstacles• The Lively Wearable is a simple fitness tracker for seniors with a discreet emergency

response button. Marketing struggled to decide which story to tell. • We predicted that setup would be difficult since the wearable needed to connect with

the app via Bluetooth.• We did not have enough design resources.

4

My RoleTasks• I created early proof of concepts, sketches, wireframes, mock-ups, flowcharts, and the

style guide. In addition, I delivered final art assets for three different platforms (iOS, An-droid, and web).

• I wrote copy, which later got blessed or improved upon by marketing personnel.• I ran brainstorm meetings to collaborate with the team and gather requirements.

Team• 1 UX Designer• 2 App Developers• 1 QA• 2 Product Owner• 1 Marketing Personnel

Why I’m Proud of This ProjectI worked on this project from the early sketch stages to final art asset delivery. Since the UI Designer was unavailable, I used this opportunity to get up to speed on visual design.

5

Design Process

6

Empathize

7

PersonasWho is the user?• The first step to any start of a project is to understand who the user is. I met with the

product owner, so we could create a proto-persona. Proto-personas portray who we thought the typical hypothetical user may be. It’s a great way to step into the user’s shoes to understand their situation, problems, and feelings.

• The product owner and I made our proto-personas separately. We captured ideas about what the user’s pains were and how could our product solve for them. Then, we shared our proto-personas and debated on the person’s profile.

• We also made personas for caregivers, but we decided not to focus on them since they were not the ones using the product. After we agreed on the proto-persona, I took our rough ideas and made it look more presentable.

8

Marge Collins, Age 71Retired Librarian

Marge is a retired librarian and a mother of two children. She is married and currently living in Miami, Florida. She likes to spend her free time reading and or taking walks with her Maltese. Marge’s children live in a different state and visit quarterly, call weekly.

Marge exclaims, “I want to be more healthy, but I don’t know how.”

PAIN• Lacks knowledge on how to stay fit and active• Lacks motivation• Fears she may overdo it on the exercise and get hurt• Fears she may be missing out

BEHAVIOR• Without our solution, Marge and others like her will not

change. She will continue to be inactive.• She may try to be active, but by not tracking her active, she is

not seeing results.• Not aware or taking advantage of resources

GOALS• Improve health outcomes and self-image• Knowledge on how and where to stay fit and healthy as well

as knowing their numbers• Feel safe working out

NEEDS• Need information and feedback• Need data• Need regimen/structure/program• Need structure• Need education• Blog• Daily tips• Need listing of local resources• mPERS button

9

StoryboardHow will they use the product?• Next, I made a storyboard of how the typical user would use the product. Storyboards

are helps visually predict and explore a user’s experience with a product. It also helps with foreseeing potential issues.

• Before I drew a single frame, I wrote a script of the story and a few sentences about what the image will show. Then, I asked the product owner to review it and suggest any changes.

• To create the storyboards, I used Adoble Illustrator to create the hand drawn images be-fore transferring it to Adobe Photoshop to add frames and text.

10

11

Define

12

Vision Alignment• The product owner believed that our cus-

tomers would benefit more from a gamified app experience rather one that showed a step count. With this in mind, I lead a Design Studio Workshop with the Prod-uct Owner to iterate through themes, con-cepts, and app designs.

• Since he was keen on gamifying the expe-rience, I encouraged him to pick a theme, which will help set the tone for the app.

• To get an understanding of the general vi-sion, I asked the product owner to choose 5 product reaction that described the ide-al and not ideal app experience. Then, I asked him to rank the words in order of desirability.

• These words aligned the design to the overall vision as well as facilitate design discussions.

13

Ideate

14

Ideation Session• Within three hours, the product owner and I produced multiple sketches that showed the

basic workings of a travel themed adventure app using the design studio method.

• The idea was that a user would traverse through a map of a foreign country while com-pleting activities that matched with that country’s theme. For example, if the user was in Italy, they could complete a walking activity called “Roam Through Rome”.

• During this session, we used red and green marker to indicate what ideas we thought had potential or not.

15

Sketches• Here are sketches of ideas the product owner and I produced. The sketches depict the

user selecting a place they want to visit. We explored showing a globe at first, where the user could zoom in, select a continent, and then a country. We thought it was too com-plicated. So, we thought it might be best to choose a country.

16

Sketches• After the user selects a country, we thought it would be engaging if the user could select

a challenge that was related to the country. When thehy complete a challenge, then the user earns a reward. The reward could be a souvenir.

17

Sketches• We also envisioned what it would be like for the user to complete all challenges. Here is

shows the user collecting a passport stamp after finishing all the challenges and collect-ing all the souvenirs. We also thought about what would happen if the user was unable to complete the challenge.

18

Sketches• We also brainstormed engagement features. We wanted the user to show off their ac-

complishments to their friends and family. These sketches show the user taking a selfie, so his or her facial image could be placed on a painting of Mona Lisa. Then, it could be sent as a virtual postcard to a friend or family member.

19

Early Flowchart• This flowchart shows what the user’s interaction with the app will be like.

20

Writing Down Questions and Risks• While brainstorming, we had questions about the app and how it would work with our

challenging demographic.• On a whiteboard, we wrote down questions and risks that we wanted to follow-up on.

21

Refine

22

Early Wireframes• In preparation for a presentation to the executive team, I took the sketches from the

workshop and translated it into low-fidelity wireframes.• The wireframes depicts an engaging experence where the user travels to a destination,

completes challenges to collect souvenirs, and traverse through a map.• The GreatCall executive team saw the work we product and responded positively. As a

result, we got approval for the app concept.

23

24

Revised Wireframes• The original vision of the app was too ambitious. The product owner scaled down on the

feature set, so it could be developed in time. The MVP feature set included step count, daily challenges, and 5Star calls.

• Another challenge that I experienced on this project was that my team had trouble picturing what the app would look like visually based off the wireframes. As a result, I quickly switched to delivering mockups.

25

Early Mockups• Since the visual designer did not have bandwidth, I took on the responsibility of creating

the visual design.• The early designs were pink and blue because it was the colors an agency used as in-

spiration for the Lively Wearable product.

26

Revised Mockups• The product owner believed that GreatCall’s demographic would have a hard time using

the app because of the contrast and layout.• I took his feedback in mind and revised it further.

27

Final Mockups• The product owner was still not a fan of the visual design, so I revised it even further.

Finally, we settled on this layout and design.

28

29

30

Visual Design• Since I did not have a background in

graphic design, I struggled with colors and branding. The app colors switched from pink and blue to orange and blue.

• When the team first reviewed the app with the executive team, they instantly noticed that the colors were not brand colors.

• After I received this feedback, I started to explore what color combinations would

31

Color Exploration• Using colors found in the GreatCall logo, I laid out every combinations to see what

looked aesthetically pleasing to the eye.

32

Color SelectionAfter experimenting several color variations, I found that a purple background with a blue primary button and a light secondary button looked the best. I believe that they work welll together because these colors are close to each other on the color wheel.

33

34

Prototype & Test

35

Early Feedback Using a Rough Prototype• We went to the San Marcos Senior Center to do customer development. I went with the

product owner and our customer development analyst to speak with our demographic.

• We had a booth set up with cookies. When they came by, we asked for thoughts and secretly filmed them interacting with the prototype using an iPhone in a shirt pocket.

36

First Usability Testing Sessions• After the app was developed, we tested it with users over the age of 65.• The top two problems that we found include the user not knowing how to authenticate

with a 5-digit code and Bluetooth pairing. We also saw users wanting to open the back of the device because wanted to put the extra battery in.

• One interesting thing we learned from the study was that older adults do read Terms and Conditions from top to bottom. When we asked why, one participant said he looks for dollar signs to avoid hidden fees.

37

Solving Authentication Issues• After getting the results from usability testing, I met with the developers, so we could

brainstorm ways to make authentication easier.

• They advised us that on Android, the 5-digit code could be scraped and entered in for the user. This helps skip a step. However, for iOS, we could only provide a deep-def-fered link in the text message to redirect them back to the app.

• Using this new information, I revised the flowcharts, so that it showed the new authenti-cation process.

38

39

40

41

42

Solving Bluetooth Pairing Issues• In usability testing, we found out that users thought tapping on the pink circles in the

graphic would initiate pairing. Also, some thought they needed to pair using the phone’s settings screen.

• We tested different graphics. The graphic that worked the best was an animation that demonstrated to the the user that they needed to press on the face of the Lively Wear-able to see the LED states change.

43

Results & Learnings

44

Results• Months later after the app was released, I found out that Fitbit came up with the same

exact concept: http://www.androidauthority.com/fitbit-adventures-713279/

• As of November 2016, there are currently about a few hundred Lively Wearable custom-ers. We are learning that customers continue to use the device because it is affordable and they like that the form factor is small and discreet.

• At the start of 2017, GreatCall started working on version 2, which have hardware im-provements and better firmware. We learned from version 1 that customers have prob-lems activating and getting to the app, which we are trying to address in version 2.

45

LearningsThe Importance of Adhering to Brand GuidelinesThe Lively Wearable app went through several visual design revisions, which put a strain on design and development.

Learning How to Create Art Assets for 2 Different PlatformsOn this project, I learned how to create art assets for both iOS and Android. I also learned how to use development tools, such as SourceTree and GitHub, to check art assets into a repository, so developers could easily use. Before, developers had to search their inbox.

How Difficult It Is to Get Usability TestingAlthough everyone on the team understood and valued the importance of usability test-ing, the product owner had a tough time convincing directors and executives to buy in on it. They believed that usability testing would delay the schedule and not provide any valu-able insights. Rather than ask for permission, we worked with the user researcher to get it scheduled and the team received valuable feedback from the participants.