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