01.03.2020 Views

XD5002 Design Document - Amazon Alexa App Redesign

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

App Redesign

XD5002 - Application Design

Tutors:

Joyce Yee & Marco Mason

Design Concept by:

Matthew Howell

Contents

2 - Evaluation of 3

Interfaces

YouTube

BBC Good Food

Amazon Alexa

5 - Design Brief

7 - User Research

10 - Ideation

Personas

Scenarios

13 - Interactive System

Design

Information Architecture

Wireframing

18 - Final Design

21 - User Testing &

Evaluation

22 - Critical Reflection


Evaluation of 3 Interfaces

YouTube (Android)

The first example is the YouTube mobile app. This app is a mobile

client for the YouTube video streaming service, which is available

for free to end users, as well as with a premium tier that provides

access to exclusive content, as well as download support alongside

Ad-Free videos. The app allows users to be able to connect with

content creators and access content from an easier to use and more

optimised platform, rather than attempting to run the desktop

site on a mobile device. The main competition are Vimeo and

Dailymotion that aim to attract a young adult demographic.

Certain aspects such as the search functionality and the immediate

influx of personalised content on the home screen, work well to

entice the user. They offer the ability to find desired content in as

few clicks as possible – aiding in offering a more simplistic mobile

experience. The optimisation of user interaction, through rating

and comment functionality, alongside video cards (linking to other

videos or including surveys), increases user participation and

engagement, and adds to the overall gratification received from the

content. Moreover, the ability to create playlists and share content

through other apps (such as Snapchat), provides added integration

and social interaction opportunities – increasing overall engagement

with the YouTube service. Furthermore, the implementation of

YouTube Video Mixes for Music Videos (which essentially act as

a radio of related songs), also enhance the end-user experience,

alongside increasing watch time and interaction with the service.

A key issue which was discovered is the lack of clarity regarding

certain menus as well as the homepage. For instance, a key

interaction factor was that there isn’t really any logical and

obvious order to the structuring of homepage content, due to

its algorithmically conducted nature. This means that not all the

content is entirely relevant to the target audience – this could in

turn hinder the overall user-friendliness of the solution for the target

demographic. Additionally, this is also the case in relation to the

Menu system, as the labelling is somewhat obstructive. For example:

the menu containing extra settings such as playlists is labelled

library, which could potentially be confusing to users who are

unfamiliar with the app.

2

2


BBC Good Food (Android)

BBC Good Food, is a recipe app provided by the BBC. Recipes

produced by them as well as community members can be viewed,

saved and added to each user’s own personal cookbook. The target

audience would most likely be young adults due to the integration

with sharing functionality, and the fact that it offers a variety of skill

level-based recipes – allowing for a wide spectrum of people to be

able to benefit and get the most from the app.

Some of the useful features include: The Cooking Mode, summarised

information, recipe saving and sharing functionality. The cooking

mode enables users to be able to set their phone to not turn off the

display automatically, which works well particularly for allowing

handsfree operation of the app/ The information summaries

regarding ingredients lists as well as cooking times can assist in

allowing users to get a snapshot of information – which can help

when buying ingredients for instance (to save on time and ensure

that the correct information is successfully conveyed to the enduser).

For the most part, this app is actually pretty useful and doesn’t really

have any clear or obvious issues. However, a possible flaw in terms

of the content side, is that there is user submitted recipes, which

aren’t directly checked by the app team. This could potentially

hinder interaction quality from the potential of inaccuracies

measurements or processes of making recipes from the app.

3


Amazon Alexa (Android)

The app I have chosen as my final area of study is the Amazon Alexa

app. This app is essentially a controller for the Amazon Alexa smart

home system and as such is targeted to a young adult demographic

primarily, with a key requisite being that they are users of the Amazon

Alexa ecosystem. A key competitor is Google Home, which is the app

for the rival Google Home smart home system.

The features that worked well for the app include the tutorial cards,

alarms and reminders, smart device control, music and audiobook

integration, alongside communication with the Alexa assistant directly

from the app. First of all, the tutorial cards are important as they allow

users to be able to understand the various functions of Alexa and get

the most out of their use of the system – improving interaction quality.

The ability to adjust alarms and reminders is useful as it allows the

end-user to see if there has been any miscommunicated actions or

alarms set (avoiding potential functionality issues), the smart device

control is useful for linking other non-Alexa devices such as smart

lights, thermostats and plugs, as well as allowing for grouping of

devices (allowing users to be able to set customised defaults, timers as

well as control all their devices from one app). Music and Audiobook

integration ties into their Amazon Music service nicely (successfully

horizontally integrating the service into the user experience cross

platform). Finally, access to the Alexa assistant is useful for when users

are out of range of a smart device but still wish to control their home –

allowing for greater interaction with the Alexa system.

4

In spite of the benefits, there were however some potential issues with

the interface. For example: the layout of certain menus isn’t the most

intuitive. This is evidenced with the settings area where all the items

are just placed in a list which isn’t easily navigable due to the extensive

number of options. This hinders the usability of the solution as

particularly for new or less technologically literate people, this can be

quite confusing (which limits the app from reaching another potential

demographic of elderly people – where for them a digital assistant

could prove quite useful in setting reminders for instance). Another key

issue is that information isn’t easily visible from when you launch the

app as the only information on the home screen is the weather and

then the tutorial cards of what you can ask Alexa, a more useful use

of this space could be to allow you to control smart devices directly

from this screen without having to go to a separate page (hence cutting

down on the time needed to access vital information). Finally, another

potential criticism from an aesthetical point is that while the dark UI of

the app is clear and logical, it doesn’t have a very homely feel to using

it – which again doesn’t really feel warm and inviting to the end user

(particularly those who are less tech savvy) and somewhat contradicts

the fact that the app and system are meant to integrate with your

home.


Design Brief

From my aforementioned apps that I have chosen to evaluate. I

intend to redesign the Amazon Alexa app. This is due to the app’s

widespread usage, thanks to the adoption of smart home systems, with

Amazon proving to be the market leader[1], and as such the rising and

expanding needs of the user base.

From a positive perspective, the existing layout makes use of cards on

the home screen, which prompt the user to try and experiment with

new interactions with their Alexa smart home system. This combines

with the functional layout to ensure added user engagement and

interaction with the app – allowing it to succeed in this aspect and

provide a benefit.

However, the app can equally be critiqued. For instance, from a

usability standpoint, the structure of some of the menus and user

processes required are rather longwinded and cumbersome for new or

less experienced users to engage with. This is demonstrated below with

my sitemap, which demonstrates the lengthy menus of the app, which

are clearly not user-friendly or intuitive. This affects the overall appeal

of the app and contributes to its lack of use aside from initially setting

up Alexa-capable devices.

Key

Features carried over to redesign.

Elements to restructure.

Elements removed.

Fig.1 The Existing Sitemap of the Amazon Alexa Android App

5


Furthermore, other potential critiques regard the actual usefulness and

appropriateness of the information being provided through the app, to the

needs of the end-user. For example, the home screen only encompasses

weather information and ‘Things to Try’. This could be further expanded on in

my view, to provide functionality which will actively draw users into making

use of the app even more (such as providing relevant news for the end-user,

alongside access to control their smart devices right from the home screen –

providing the app with second screen functionality when paired with an echo,

and giving it a true, useful purpose for many users.

[1] https://techcrunch.com/2018/03/07/47-3-million-u-s-adults-have-access-toa-smart-speaker-report-says/

6


User Research

With regards to User Research, I have made use of a variety of methods to ensure

that my redesign appropriately caters to the needs and requisites of my target

audience. This was undertaken in the following means:

Secondary Research

As a starting point, I decided to make use of the existing Secondary Research in

order to be able to get a true understanding of the market and clientele that my

redesign was catering for. Whilst Amazon does not actively disclose this information

(in order to not reveal excess information to their competitors), my research led me

to a Forbes article [2] which cites that the largest demographic profile of the Amazon

Alexa system is 24% 18-29 year olds, with 20% of 30-44 year olds following after.

Additionally, the elderly as well as children are also considered important users of

the Alexa system – hence I intend to ensure that my redesign also meets their needs.

[2] https://www.forbes.com/sites/ilkerkoksal/2018/10/10/whos-the-amazon-alexatarget-market-anyway/#429f62442eb5

Google Play Reviews

A key means of understanding the issues presented by the app, was through

analysing the Google Play Store reviews [3] for the app. From this, I was able to

understand that many felt that the User Interface made it “too hard to find what

you’re looking for” leading to the app being “Hard to control” and leaving users with

“no idea how to use it”. This is causing users to cite that the app needs “a cleaner

and simpler UI”, or else some may feel compelled to switch over to competitors such

as the Google Home Smart Home System.

In response to this, I intend for my solution to be logical and coherent, allowing for

my end-users to be able to easily navigate and maximise their use and gratification

from the app. The UI should also be refreshed in order to better enable this, as well

as through improving technical functionality from the programming and technical

side of the app.

[3] https://play.google.com/store/apps/details?id=com.amazon.dee.

app&showAllReviews=true

7


Android Material Design

Android Material Design [4][5] , refers to the design language and thought processes

made by the Android team into ensuring that apps released on their platform meet

a certain level of standards and expectations. This ranges from how apps make

use of notifications and permissions to how they handle user security and data

encryption. As such I have ensured that my solution meets these specifications and

requisites to place it in a position to actually be released on the Google Play Store.

As such this improves and enhances the ability of my app to conform to the needs

and requisites of the Design Brief and client expectations for this task.

[4] https://material.io/design/introduction/

[5] https://developer.android.com/docs/quality-guidelines/core-app-quality

8


Card Sorting

As a means of primary feedback, I opted to setup a Card Sorting task [6] . This

is useful for the task as it allows for me to gain valuable user insight into the

logical ways and methodologies by which the app should be structured in order

to achieve its desired outcome and address the key needs as cited previously.

This offers a strategic advantage in the long term as it means that I am able

to get a greater insight into direct user needs (without having to develop a

complete solution and then overhaul it if the solution was later found out to be

insufficient and inappropriate).

[6] https://t3hamb54.optimalworkshop.com/optimalsort/j307jjoo

Informal Prototype Testing

Moreover, another key stage I utilised in the design process was Informal

Prototype Testing, which allowed me to test a cut-down version of my

submission to allow me to ascertain feedback and reflect on the overall success

of my prototype before submitting the final rendition. As such I have discussed

this stage and its relevant findings further in the User Testing section of this

document.

Competitor Analysis: Google Home

Finally, I investigated the key competitor to the Amazon Alexa system, as noted

from the previous article [2] , Google Home. The Google Home system is a Smart

Home System which focusses around the Google product range of devices,

such as their Google Home Smart Speakers, Chromecast Streaming Sticks, and

Google Wi-Fi Mesh Wi-Fi Systems.

The user interface has a fresh and clean design, using inviting and pleasing

fonts and colours to welcome the user. Additionally, the focus on providing

information and control directly to the user is strongly undertaken here through

the easy access to all of the options and settings from the home screen - which

represents a direction that I would really like to take the Amazon Alexa app

towards.

However, a key aspect to Amazon’s brand guidelines is ensuring that certain

aspects such as fonts and colour schemes carry over and correlate across

different platforms and services. In order to uphold the hertiage, creativity

and ethos of the Amazon Alexa brand, it will prove useful to prototype and

investigate the most effective ways of mergin the strong vibrant identity of

Amazon with the simplistic design language and helpful nature of ther Google

Home app to design a solution that meets both my user and my client’s needs.

9


Ideation

Through my user research, I discovered that my target demographics, were

comprised of the following key groups of people for the most part: 18-29 years

old at 24% and 30-44-year-olds at 20% of total users [2] . However, there are also

potential sub-demographics of Elderly people and young children for instance.

With this in mind, I established the following personas and scenarios, to best

reflect a broad spectra of my userbase.

Rebecca, 23

Rebecca is a motivated Young Professional in the digital design field, who has

been living in Newcastle for 2 years. As an employee of her field, she lives an

active, busy lifestyle and strives to find ways to be able to streamline tasks and

objectives that she desires to achieve. She invests heavily in the latest technology

trends, and recently invested in an Amazon Smart Home system, including

multiple Echo and Echo Dot devices, as well as some Smart Light Bulbs and Smart

Plugs. She would like to be able to manage her devices through a simple and

responsive interface, from wherever she is, allowing her to have greater control

over her home. Furthermore, she is planning to invest in a Smart Thermostat in

the near future, and would ideally like each system to integrate successfully with

one another – to reduce the clutter and hassle of having to deal with several

incompatible systems.

10


Jon, 37

Jon is a Team Manager for a Marketing firm based in the North East. He lives in

Jesmond, with his wife Melissa (35) and their two children Henry (8) and Ethan (6). As

a manager he is enticed strongly by being able to organise as many aspects of their

busy lives as possible. The family already have a Google Calendar setup to manage

the family’s work shifts as well as important family events and term dates. After

recently being gifted an Echo Smart System, Jon would like to be able to integrate

this system into his family’s life, however had been put off at first by the control app’s

excessive and complicated options and settings.

11


12

Henry, 73

Henry is a retired pensioner living in South Shields, with his wife Margaret (68). After

a recent visit from his granddaughter Elisabeth, Henry was introduced to the Echo

Smart Home system, and has been looking at getting a Smart Speaker for himself.

One of the features that really appealed to both him and his granddaughter was the

ability to drop in and call each other – an appealing feature given that his family live

across the country in Lancaster.


Interactive System Design

Sitemaps

In response to the existing sitemap, I opted to recreate the Sitemap (see the right

hand side), in order to better optimise and improve the structure for the enduser.

It is hoped that this redesign will provide a more logical structure alongside

addressing the needs of my end-users, user research and predicted user personas.

User Flows

Furthermore, in order to establish, the simplification of the app, I developed User

Flows to measure the efficiency of partaking in certain tasks. This has been an

essential part of the critical reflection and process of understanding the utility and

importance of my designs.

13


14


Amazon Alexa Paper Wireframes

In order to progress, my thinking in response to the brief. I started off by creating

some rough Paper Wireframes. This was imperative in allowing me to understand

the best means of structuring content in order to ensure an efficient and usable

interface. As such, I decided on a widget style home screen, wherein the user is able

to customise the screen to best fit their needs. Additionally, I also aim to integrate

a 6 Icon navigation row which is fixed to the bottom of each screen (in a means to

provide greater navigation and accessibility to all major sections of the app in as few

clicks as possible.

15


Amazon Alexa Digital Wireframes

After Paper Wireframing, I worked to expand my thinking in a lo-fi format through

creating digital Black and White wireframes. This allowed me to start considering

certain aspects in greater depth and fidelity, such as the Android title bar for instance

(alongside the amount of space required for this to fit the 18:9 test device being

used, without appearing out of place).

In addition, I was also able to finalise certain aspects like the use of a tabbed layout

(to allow for a greater influx of content to fit appropriately on the screen). As my

wireframes demonstrate, aspects like this as well as the logo, 6 icon navigation and

Hamburger Menu, have been able to be incorporated into a house style, which holds

consistency across my other prototype application.

16


17


Final Design

Amazon Alexa Interactive Prototype

Through the various iterative wireframes, I was led through the design process to this

final output [7] . Using Adobe XD, I was able to elaborate and expand upon my ideas,

which I aim to justify below. Furthermore, I have also included alternative UI layouts,

which allowed me to explore appropriate design practices, to ensure the smoothest

experience for my end-userbase as possible.

My homepage makes use of the

aforementioned widget style. This

allows for greater customisation

to the needs of each individual

user, as well as providing a more

personalised and engaging

experience.

The Contacts & Calendar screen

provides integration between the

user’s online calendar and the Echo

System. This interface provides a

greater level of event detail as well

as allowing for calling to other Echo

devices.

The Organisation screen makes use

of the tabbed house style in order to

provide a variety of alarm settings

that can be configured and changed

in order to control the user’s Smart

Devices.

[7] https://xd.adobe.com/spec/282cd86f-a042-4808-5f68-364fabbb8994-5e1d/

18


The My Updates screen is designed

to organise content relevant to

the suer, in terms of services and

programmes tailored to the users

needs. The user is then provided

with options to be able to play this

content back on certain Echo or

Alexa-Integrated Devices (such as

Smart TVs).

Furthermore, the Play Screen

also takes inspiration from this by

integrating with the Amazon Music

and Kindle Service to deliver Music

and eBook recommendations.

These can be searched for and

played back on Alexa-supported

devices, as well as controlled via the

home screen of the app.

The Devices screen allows users

to be able to manage and monitor

their smart devices to a greater

extent. This fulfils the needs

and requisites of providing an

appropriate solution to integrate

various smart solutions into one

place - increasing the usability and

practicality of my app.

19


Alternative UI Layouts

As a means of testing and evaluating my iterative design process, I created a certain

set of Alternative layouts, which could be more appropriate in certain situations.

First of all, I have created a version with a toggle on/off slider for the 6 Icon menu - in

order to allow the app to scale more appropriately to lower resolution/smaller sized

displays.

In addition, I have also removed backgrounds and utilised a lighter colour scheme.

The idea behind this is to test the clarity of my solution in terms of its legibility and

conformation to the Amazon Alexa Brand Identity. This testing allows me to ensure

the accessibility of my solution is appropriate in order to allow all users to be able

to access and have a worthwhile experience from my app, regardless of accessibility

needs.

20


User Testing & Evaluation

Informal Prototype Testing

As aforementioned, one of my key testing methodologies was informally testing my

digital prototype. The purpose behind this was to allow me to be able to make sure

that the progress and iterations that I made to my designs were appropriate and

effective in meeting the needs and requisites as set out by my user research. To do

this, I tested the app with three users from the largest user demographic (18-29 year

olds).

For each of the users, I showed them the app in a relaxed and informal setting (as

not to create any pressure or skew any findings or results) and just observed their

experiences when using the prototype. This assisted in allowing me to assess the

adaptability and universality of the app and its design language for new users (which

is a key requirement as cited in the Google Play Reviews for the existing app).

My users felt that the app, while obviously limited due to its prototype nature,

was “useful and logical” in its organisation and structure and that the design was

“pleasant and accessible”. There were some issues due to the UI scaling with some of

the smaller text elements in the app, which as a result will need to be optimised and

scaled up for a final rendition of the app.

A key pleasing feature which some of my participants cited was the “custom widgets”

on the home screen due to their relevancy and significant informational value over

the home screen that it was replacing from the existing app. This has worked well to

support my secondary research findings of information being a key need of the enduser

demographic. As such, this has influenced my inspiration when creating the rest

of the app design (in order to ensure that the UI meets the needs and expectations of

my userbase).

21


Critical Reflection

Overall, I feel that I have been able to successfully craft a design response which

meets the needs and requisites of both the brief and my target user demographic. I

feel that this has been supported, thanks to my research process, which proved vital

in allowing me to not only bring my own user experiences from being an Amazon

Alexa user, but it also enabled me to step outside of the box and critically examine

the needs of the mass user base as a whole - allowing me to gain a vital scope into

the app, which I feel has influenced my final design.

One of the tasks which I felt worked well, was the ability to create a useful UI. The

tight-knit integration of information and relevant user-generated content has in

not only my view, but also my user testers opinions have brought a true sense of

purpose to an app which generally didn’t have a substantial enough reason to keep

returning to use it (aside from troubleshooting Alexa devices). If I was to expand

upon this idea and develop the prototype into a fully fleshed-out app, I would strive

to continue focussing on this crucial aspect of the app in order to fully ensure that

any additional functionality is added to allow all users to benefit and be able to take

something away from their experience using this app.

However, I feel that a key area I would like to expand on to complement this would

be expanded user testing stages. Due to the time and practicality constraints, I

wasn’t able to test with users from different demographics (such as over 60s). If I

were to expand upon this project, I would like to spend some more time focussing

on studying and finding out what features might be available and beneficial to

their needs. This could include for instance: being able to use the Alexa Assistant in

cases of an emergency (in order to contact a family member, trusted contact or the

Emergency Services).

Additionally, if I was to develop this fully, I would also like to be able to understand

the practicality of some of the features from a developer perspective (in order for

me to be able to further understand and address the strengths and weaknesses of

the existing app with a realistic sense of what can be achieved). This would prove

beneficial in addressing some of the user concerns as cited in the Google Play

Reviews of glitches or improperly functioning elements of the app, as a means of

helping to mitigate and reduce the likelihood of these occurances happening in the

future.

In summary, I feel the solution that I have created succeeds at meeting the

recommendations of the brief alongside adhering to the goals and changes

sought after from examining the original Amazon Alexa app, to provide a more

visually pleasing, functional and usable solution that could offer a great benefit

and advantage to Amazon’s customers in comparison to their competitors such as

Google Home and Apple HomePod.

22

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!