PORT FOLIO
September 2017
CONTENTS 5 ANALYTICS
competitive analysis and heuristic analysis
9 PERSONA
explore christina and andrew's point of view and how they could benefit from arch digest
15 USER SCENARIOS
understand the motivation of our users and how their goals translate into actions
19 WIREFRAMES
concept features and functionality expressed through the user interface
23 VISUAL DESIGN
color, imagery and typography used to enhance the user experience
25 USABILITY TESTING in-person interviews conducted to research user experience
THE
ARCH DIGEST ISSUE
CREDIT FOR COVER IMAGES ON PAGE ONE AND TWO OF THIS ISSUE BELONG TO JESUS GRANADA & ARCHDAILY
3
ARCHITECTURAL DIGEST
A re-design of the current Architectural Digest that speaks to a new generation of design enthusiasts while also retaining the current user base
4
applications 94% of a users's first impressions are design-related 87% of Fortune 500 companies have an easy to find search field on their homepage A 1-second response keeps users engaged with the content, thereby increasing the conversion rate and reducing aba
ndonments By 2020, customer experience will overtake price and product as the key brand differentiator 82% of consumers enjoy reading and learning relevant content from company blogs rather than adve
ANALYSIS AND APPROACH sizing up the competition
M
any architectural and design websites are focused on professionals in the field and those who are design aficionados who love to flip through pages of expensive products that can enhance their homes. But what about those who are still in school and not only need inspiration but also crave a thirst for something relatable? By expanding Architectural Digests horizon, they can cast a wider net and reach another demographic, millennial and those of generation z as well as those that will come after.
5
y on mobile devices, mobile app usage accounts for 2 hours and 19 minutes of that time 25% of mobile apps are abandoned after a single day 4% of time spend on mobile devices is spent using productivity
o
34
40 4,
TH
ion lect
ve r ll o ma
se sive rojects yout ehen la on p compr focus sign s e de graphic impl and s clean
ge da me le, ma
T I I O T E N P M O C E
find project s by materials used
rojects by architect/designer
cts by building type
fe 8% t i on 1 3 3 m ima il ale, l m i o n % monthly s ll an ubscribers 52 o fri n tion, s aviga easy n pic f to
design projects fro
find all p
fi n d p roje
ertisements and feel more positive about the
e th
off er s
wo
9, 81
6
to
ta l
ss po a ers off
en pr ga oje ge me c t ib i sb nts : pr y l int typ re ity &m ea edia a o of n d d s n c isc ize o on u tin ssion ffers p o uin g e on all dcasts and duc videos a articl
rld
tion
M
t
46
The average smartphone user has
illions of consumers are subscribed to architecture and design related news sources, but none of them are currently able to tailor the information presented to the consumer by location without having to perform a manual search
e and s enrol lmen
downloaded 26 applications 50% of mobile users browse the web on iOS, 38% on Android, 3% on Windows phones, 5% with Opera Mini and 4% on other platforms Users spend 2 hours and 42 minutes a d
iq d n u worl a 4 r er the ges 5-5 e 3 ge off all ov bpa re a a a s i r m e de ed fro w f rea lm o s a i t % 9 c c 3 je so on pro s to e s n l c o t i art n les e share artic o t m y t abili se i t r d ve a l a minim Me
information on their phone
e v i s n e t x e
e in siz
vary projects
ia platf orms
focus on imagery helps locate
med
offer
a var iety of
topics apar t from design
project
le ping e ro brity xperien college degree 20 m edia illion monthly page views across all m ss arti ce n so cles he desig b e w vigable cia simple and na lp re e er c a n c e h i a broader aud t l s fas
of rea der s ha ve a
ho p
66 %
ue s
2,1 45
11
WHERE WE F I T I N
$ ry a l a nS a i d
86% of time is spent using mobile applicati
c a re
ce
c a h
O
ffering a unique experience across different platforms can cast a wider demographic net and attract a diverse group of users. The opportunity to attract more users with a different mobile experience is the goal.
7
2% of users said that a bad mobile experience made them less likely to engage with a company 71% of publishers say well-formed mobile content boosts user engagement 94% of smartphone users look for
FAST FORWARD LET'S CONTINUE OUR SUCCESS
M
ore users are migrating away from print and desktop versions in preference for mobile convenience. While the current demographic range is subscribed to the print version of Architectural Digest, the mobile site accounts for 1.4 million total page visits a month. "Apps account for 89% of mobile media time, with 11% spent on websites". Creating a unique mobile experience will diversify the way Architectural Digest presents content to its user base. The current Architectural Digest app is a mobile version of the magazine. However, by creating a separate entity for the mobile version of the magazine, Architectural digest is free to explore other possibilities with its brand within the mobile app industry.
8
of all digital ad spent in 2017 Mobile offers are redeemed 10x more frequently than print offers Consumers are more likely to recommend and buy from businesses that have a better mobile experience By 2019, mobile advertising will represent 72% of all US digital ad
ions 91% of mobile users say that access to content is very important Average smartphone conversion rates are up 64% compared to the average desktop conversion rates Mobile will likely account for 50%
spending Over 50% of smartphone users grab their smartphone immediately after waking up 80% of internet users own a smartphone Over 36% of mobile subscribers use iPhones or iPads to access apps
E
xplore the world of design with college student Christina and licensed architect Andrew as they describe their struggles and needs for an app that fits into their daily lives.
9
A PERSONA(l) VIEW
11
A
n interior design college student who has a flare for style. She spends her time researching interior design projects in her area to get a sense of what clients in her home state require for their spaces. She would prefer to have information regarding interior design projects readily available to her instead of spending time searching for material on the web. Living in the digital age has taught her that many processes can now be automated and her search for quality design projects should be no different. She is an avid iPhone user, prefers to watch on demand shows and enjoys the convenience of shopping online. Her goals are to view content of local projects in an instant and to feel confident in knowing that her searches correspond with the area around her and her interests.
A
n architect who is constantly running around co-ordinating his architectural projects with other disciplines and rarely has time to search for other architectural works. When he isn't in the office, he is out on travel visiting other cities/countries where his next projects will be. Having access to on demand architectural projects would make life easier for him so that when he is on the move he can browse for architecture that is in the area or architecture from locations that he has pre-selected. Andrew relies heavily on his smartphone, uses apps that delivers quick highlights to world news and requires quick delivery in his online shopping experiences. His goals are to be immersed in knowledge regarding projects without having to spend time searching for information and to be able to pick up where he left off in case of unexpected events.
14
vanessaatravels In Chile for work, it's going to be a fun week #adventureisoutthere
vanessaatravels Beautiful city! What should I do today? #happyhour #clockedout
vanessaatravels Any suggestions on places to visit? #feelinglikealostpuppy #alsohungry
vanessaatravels Downloaded the arch digest app thanks for the suggestion @crzyarchtraveller!!
vanessaatravels Now I have like a million places to visit. Defintely wont be posting selfies on this visit! Well, no promises #selfiesandarchitecture
vanessaatravels I'm in love with the places I have found so far! Feeling lost in a new city? Definitely try the @archdigest app! #themoreyouknow
A DAY IN THE LIFE USER SCENARIOS
V
anessa is traveling to Santiago, Chile for her company for the first time since being hired on. She is meeting with a client to discuss project requirements for a new architectural building in the city. Her meetings begin at 8 am and end at 3pm leaving her the rest of the afternoon to explore Santiago. Exploring a new city is difficult, especially in a different country. Before venturing out of her hotel, Vanessa checks places to visit using a search engine but leaves frustrated due to its time consumption. Two days into her trip, she asks fellow Instagram users for advice and receives a message from a fellow architect to download the Architectural Digest app. She updates her preferences to include Santiago, Chile and instantly receives articles on architectural and design works in her area and surrounding vicinity.
16
2
3
1
4 1 Christina has the afternoon free from classes and is undecided on what to do with the rest of her day 2 Christina walks to the light rail determined to use her free time to explore the city 3 She catches the light rail and opens up the Architectural Digest app on her phone 4 She opens up her Phoenix, Arizona news feed and finds local design projects 5 From the numerous projects that she has found, she finds one of interest within walking distance of a light rail stop
6
6 Christina arrives at her destination and finds inspiration in the design project
5
8
7
9
10
7 Andrew has recently arrived from a site visit where he will be designing a new building 8 Andrew reads through the requirements needed and proceeds to seek inspiration 9 He goes home and opens up his Architectural Digest app on his phone 10 He locates similar type projects in the city where his new building will be located 11 Andrew uses the app to read about the other projects and materials used for those projects 12 Andrew returns to work the next day with several case studies in his pocket, ready to begin designing his building 11 12
THE ARCHITECTURALBLUEPRINT
wireframes
W
ireframes were developed to communicate the potential that every screen had to reach out and relate to the prospective users. Ideas were formed about icon interaction, information architecture and user flow.
"search" feature is included in case user has many pre-selected destinations "destination photos" can also act as short clips of projects within that location destination photos change frequently to showcase new projects within that location
swipe left/right to reveal past featured projects
when user "signs-in", next screen slides in from the right
featured design projects are shown at login screen
featured image is greyed out behind login screen
when "login" is pressed, login screen slides in from the right "login" buttons have a 75% opacity to keep the featured images from being obscured
21
"destinations" are city's or countries that the user has selected during the tutorial or by changing the preferences in the settings
in case user pressed "sign-in" by accident and doesn't have an account, "signup" option available at login screen
"new content" refers to content that has not been chosen by the user but instead is all new content that has been added
"new user signup" will include input fields for username, password, email and dob
user will have control whether or not to show "new content" under settings menu
if there is a video available for a project, a play button will be displayed indicating the associated video
mini map of a project's location will be shown to the left of the article user is able to view other options by selecting the "hamburger menu" using the search feature will first provide results for content within that destination and below will show results for other destinations
by swiping left, users can return to the previous screen or can press the menu button to travel to other pages users are also provided with a plus and minus button to increase or decrease the size of the text on screen the article screen contains a share feature in which users can share a project to their social media or email it
user is directed to a location's news feed page from the destination selection screen
user is directed to a design project's article page from the location news feed screen
the news feed page provides the user with information regarding that specific destination. If user has selected the "new content" area, then the news feed will contain articles/videos from around the world
the article page provides the user with information on location of the project, information about the project, project photos, project architectural plans if relevant. If design project is a private project, the location displayed will only display city and country.
when user selects an item from the second half of the screen, the first half of the screen will provide a preview. Selecting that item also brings up a "swipe right to view" option.
user is able to hide menu by swiping the menu to the left the menu item that the user is currently on will be displayed with a darker grey box
when user clicks on the menu from the upper left hand corner, the menu slides in from the left of the screen user is able to visit other areas within the app from this menu if user chooses to "search" for something instead, the menu will slide to the left on its own and reveal the search feature
article page provides user with photos on the top half of the screen in which they can swipe left and right to view photos
22
7
A pt R U A 36 T F U TUR 3 0 p t
s s es it tle n item nam text n-i area gn-in g i s i een ary s r c s d on c e e s am n t jec ems o r s p it it le u t n y xt me ndar e t o e sec riptiv nfo. c ti t des rtan ticle p 6 po n ar 3 m i hi LL t wit
t p 0
t p 0 5 FU TURA 24 L L F U TURA E W FU K C WE 30p O R CK ELL pt pt
ff o 4 2 e l L ogg -on EL 24pt t O R KW LL gle g C E o t RO KW e g n OC ra ore n o R o m c 1 id hi c viv 3634 r e lay a g p on e n s n c s e o #E i a ic or ht t i cl u t g r i a n n top r / s a e A i t n l f l m see con bri 3B5A e le n p u i f ei w n #3 o r s a a y r be ed sh gc 9 n m o A t u con i a n v str 8B4 e i t # alt har -ac #3 b s n o u d c ate sh 4A i v i y t ac gra A41 3 #
RO CKW
rey g 6 k dar E575 #5 6 y gre 7868 #8 y gre E1 t ligh EDE #D me A1 crè BB9 #E
s i cl e t r ble a a l i n e ava -se s n e l u rtic a es new articl s n i cl e t r see a ew n no
T
he goal for the user interface was to keep it as minimal as possible and to use color only when necessary. The use of color is reserved for important/inter-actable items. By limiting the color palette to four primary colors (orange, blue, white and gray), it helps keep the interface consistent and free of confusion
24
VERSION 1
ARCH DIGEST
USABILITY TESTING
F
our users were given a set of instructions in which they had to "sign-up" as new users and follow through the tutorial to set up their preferences. Users were able to navigate the tutorial and begin exploring the Architectural Digest App. Users were frequently asked to think aloud and explain their choices when selecting options on the screen.
25
USER ONE
USER TWO
User One suggested having the option to choose between countries, not just states or cities. This way, users can also select an entire region. By automatically hiding a side menu when transitioning to a new screen would help keep the interface clear of clutter. In order to keep up with current trends, having the option to change color schemes would also be beneficial. User One suggested to keep the "news feed" and "home" areas separate to make it easier for users to locate other regions.
User Two suggested having the on-boarding and tutorial screens be interactive which would allow users to interact with icons before encountering them within the app. Being able to return to the tutorial if needed would help the user in the event that they forget the full capabilities of the application. User Two also suggested being able to click outside of the side menu to make it disappear rather than it disappearing on its own.
Overall experience: Excited
Overall experience: Excited, Confused with on-boarding process and choices
USER THREE
USER FOUR
User Three thought the on-boarding process was clear and interactivity with icons would be beneficial since that is the current trend with mobile on-boarding process. The scrolling effect for the photos was very satisfactory and preferable to a photo slideshow effect. User Three suggested the addition of a content viewed area in which a user can see all content that has been previously viewed. User Three also enjoyed the minimalist theme as it lines up with current mobile trends.
User Four suggested incorporating the option to increase and decrease text size in articles stating that it would be beneficial for different visual circumstances. Considering that the application is leaning towards the educational side, having the shopping area also becoming educational with options to purchase items from exterior sources could help users understand the products being purchased for their homes or businesses. User Four also enjoyed the minimalist page transitions which helped keep the user interface clean.
The Student
The Teacher
Overall experience: Excited
The Developer
The Intern
Overall experience: Excited
26
SEPTEMBER 2017
ALEX QUIJADA @ALEXQUIJADA
@ALEXQUIJADA
@ALEXQUIJADA