UX PORTFOLIO

SELECTED SAMPLES
PORTFOLIO 2017
 GATHERING TASK FLOWS,
USER DATA, USER
INTERVIEWS JOURNEYS,
SCENARIOS
HAND CODING
HTML5, CSS3,
JAVASCRIPT
SITE MAPS,
CONTENT
INVENTORIES
SKILLS
I have a multidisciplinary skill set that integrates creative knowledge with
technical and business expertise. I master the best and most current design
HIGH-FIDELITY SCREEN FLOWS, tools in the industry alongside having a strong understanding of and ability to
VISUAL DESIGN NAVIGATION perceive human nature and human behavior. I’m a critical thinker with an open
MODELS mind, a communicator and a facilitator.

USABILITY WIREFRAMES
TESTING SKETCHES

RAPID
FUNCTIONAL PROTOTYPING,
SPECIFICATIONS INTERACTIVE
PROTOTYPES

02
ABOUT ME
SKILLS
PORTFOLIO 2017
 UX CONSULTANT UX
HSBC
2015-2016 CONSULTANT

UX DESIGNER
BURN
2014
EXPERIENCE
I’ve successfully delivered and managed more than 50+ digital projects
UX DESIGNER ranging from web & mobile apps, crm platforms, cms based corporate
UBER websites, and large ecommerce. All are at the highest standard of execution
2014 and represent some of the leading companies in the industry.
UX
UX DESIGNER DESIGN
MOI GLOBAL
2014

UX DESIGNER
IMG WORLD
2010-2014

DIGITAL DESIGNER
VERYNICE2.COM
2009-2010
DIGITAL
DIGITAL DESIGNER
DESIGN
NEURONSTUDIO
2007-2009

DESIGNER
BRIGHTNESS
2007-2005
DESIGN
DESIGNER
TRILOGY
2003-2005

03
ABOUT ME
CAREER
PORTFOLIO 2017
 01
LEARN
06 PROCESS
DELIVER
02
EXPLORE 01 Learn. Gain knowledge of users, context, technologies, gather user data,
research competitive products, conduct interviews and filed studies. 02 Explore.
Build user profiles on gathered data, produce materials that will aid the outlining
of the project, site maps, content inventories, screen flows, navigation models,
task flows, user journeys, scenarios.

05 03
03 Select. Evaluate, test, and select wireframe concepts for prototype
development. 04 Develop. Create design specifications and evolve concept/
wireframes into full design solution. 05 Refine. Evaluate design with stakeholders
to obtain feedback and conduct usability testing. 06 Deliver. Complete design and
REFINE SELECT produce deliverables.

04 DEVELOP

04
ABOUT ME
PROCESS
PORTFOLIO 2017
01
Corporate content website, online
banking portal and banking mobile
app for HSBC’s digital transition

02 CASE STUDIES
Corporate content website There is quite a vast list of projects that I have worked on since i started my
showcasing the business history as career. This is a selection of my best and most recent UX work that I have done.
a market leader in the sport with 50 The projects are relevant for their industry and devices.
years of experience.

03
IMG pitch for BT. Football interactive app
for smartphones tablets and smart TVs
 Date: March 2016
Platform: Desktop, mobile and tablet

CHALLENGE

Support HSBC in their digital

transformation process with the best and
most up-to-date UX practices, trends
and research for all their digitial assets

WHAT I DID

›› Setting goals and objectives

›› Stakeholder interviews
›› Establishing key audiences
›› Building personas
›› Creating scenarios
›› Creating user journeys and stories
›› Creating site maps
›› Content audit and inventory
›› Creating experience maps
›› Conducting UX research
›› Conducting competitive research
›› Low-fidelity prototypes
›› High fidelity prototypes
›› Creating wireframes
›› High-fidelity design

06
›› Usability testing
HSBC.COM
PROJECT OVERVIEW
PORTFOLIO 2017
01
SETTING GOALS AND OBJECTIVES
SITE URL: hsbc.com, hsbc.co.uk, hsbc.com.hk, hsbc.com.au, hsbc.ru, hsbc.de,
hsbc.ca, hsbc.com.ar, hsbc.co.nz, hsbc.com.qa, hsbc.fr
SITE OWNER: HSBC

WHAT’S ARE THE WEBSITES AND APPS ABOUT?

HSBC.com’s are corporate websites for europe’s largest bank and the world’s
seventh by total assets. HSBC digital portfolio is split between the public website
that provides their clients with relevant information and the online banking
platform, that offers banking solutions.

WHAT ARE THE GOALS OF THE WEBSITES AND APPS?

The goal of the websites and apps is to provide an integrated solution for the
HSBC’s digital transition applying latest trends, techonologies and the optimal
user experience.
WHO ARE THE USERS OF THE SITE:

Primary audience: Low, medium and hight value customers.

Secondary audience: Non-Customers and ex-customers

07
HSBC.COM The stakeholder has the best idea of what the project is all about, that’s who I
PROJECT OVERVIEW normally start asking the questions, It’s better to put everything down on paper based
PORTFOLIO 2017 on objective and goals, that will be the guiding line for the project’s development
02
CONDUCTING INTERVIEWS

08
HSBC.COM Conducting interviews is essential in gathering information, throughout the years I’ve
PROJECT OVERVIEW learned that the better you get at this the more useful the information will be. Knowing
PORTFOLIO 2017 how to structure your questions, how to listen and how to be grateful is the key
03
ESTABLISHING KEY AUDIENCES
NON CUSTMOER | LOW VALUE CUSTOMER | MEDIUM VALUE CUSTOMER | HIGH VALUE CUSTOMER | EX CUSTOMER

NON CUSTOMER LOW VALUE MEDIUM VALUE HIGH VALUE EX CUSTOMER

CUSTOMER CUSTOMER CUSTOMER

+ + x
CUSTOMER YOUNGER LIMITED BUSINESS BUSINESS BUSINESS INACTIVE CLOSED
OF OTHER CONSUMERS INCOME OVER SEVERAL WITH ONE OVER SEVERAL
BANKS BANKS BANK BANKS

09
HSBC.COM It’s vital in project’s development to have a well-defined audience, that will ensure that all
PROJECT OVERVIEW of the design, functionality and content decisions are targeting the right people, there are
PORTFOLIO 2017 many business examples that have failed because of not understanding their audience
04
01BUILDING PERSONAS
NON CUSTOMER - YOUNGER CONSUMER

WHO ARE THEY? PAIN POINTS

›› No bank account ›› Time consuming to open

›› Age: 18 - 24 up a bank account
›› Gender: Male and female ›› Can’t afford to pay
›› Family: Single additional banking costs
›› Education: Studying, Degree ›› Hard to integrate expenses
with other apps
HOW DO THEY FIND INFORMATION?

›› On desktop/laptops - smartphones, mobile phone and

email communication MOTIVATION
›› finance websites, search engines, finance blogs, direct
marketing ›› Be financially independent
›› Be up to date with latest
MAIN GOALS/WHAT DO THEY WANT? account transactions
›› Be able to recieve and
›› To easily set up a bank account make money transfers
›› Make money transfers with low fees easily
›› Be able to view their transactions and bank activity
online

10
HSBC.COM After figuring out who the projects audience is I normally build the personas, This is
PROJECT OVERVIEW similar to shaping a piece of clay. By doing this I’m creating a clear image of who the
PORTFOLIO 2017 user in our audience is.
05
02BUILDING PERSONAS
NON CUSTOMER - YOUNGER CONSUMER

AUDIENCE NEEDS: SOLUTION (CONTENT & FUNCTIONALITY)

›› How can i find all my transactions? ›› Interactive website design

›› How can i find transactions from last ›› Accessibility, UX, IA
month? ›› Banking story
›› Can I make a payment? ›› Subscribe option
›› How long will the transfer take? ›› News / media section – trends, new
›› Can i get updates on my account? (blog?) Video content?
›› Are there any news regarding personal ›› Contact details – network
banking? ›› Email newsletter
›› How can i find the newest content ? ›› Video – inside the banking business
›› Do you offer any additional services? (content analysis)
local office / contact details ›› News feature with most popular
banking solutions

11
HSBC.COM After figuring out who the projects audience is I normally build the personas, This is
PROJECT OVERVIEW similar to shaping a piece of clay. By doing this I’m creating a clear image of who the
PORTFOLIO 2017 user in our audience is.
06
CREATING SCENARIOS

12
HSBC.COM The easiest way to understand behavior is through scenarios, identifying a users goals and
PROJECT OVERVIEW needs and his following action steps will lead you to truly understanding why and how a
PORTFOLIO 2017 user is using your product. That represent the building-block for the project development
07
CREATING USER JOURNEYS AND STORIES

13
HSBC.COM A person’s experience during one session of using a website or application, consisting of the
PROJECT OVERVIEW series of actions performed to achieve a particular goal is called a user journey. We use this
PORTFOLIO 2017 technique to identify and catalogue all interations that the user might have with the platform.
08
CREATING SITEMAPS

14
HSBC.COM A site map describes the different content pieces on the site and the relationship
PROJECT OVERVIEW between them. It is an important step of the user centred process as it ensure content is
PORTFOLIO 2017 in places users would expect to find it.
09
CONTENT AUDIT & INVENTORY

15
HSBC.COM A content inventory is the process and the result of cataloging the entire contents of a
PROJECT OVERVIEW website. An allied practice, a content audit is the process of evaluating that content.
PORTFOLIO 2017 A content inventory and a content audit are closely related concepts, and they are often
conducted in tandem.
10
CREATING EXPERIENCE MAPS
HSBC Digital messaging: Cross-platform alignment

Fraud detection campaign

HSBC Digital messaging: Cross-platform alignment

Credit card campaign

 THINKING ABOUT THE SUBJECT EXPLORES THE SUBJECT GETTING ASSURANCE COMMITING FOLLOW-UP ACTIVATION  THINKING ABOUT THE SUBJECT EXPLORES THE SUBJECT G

ACQUSITION REGISTERS OR FOLLOWS THROUGH FOLLOW-UP FOLLOW-UP ACQUSITION

PLATFORM EVENT METHOD CTA CHANNEL CTA CTA LANDING PAGE SIGN IN VIA WITH CTA COMPLETES ACTIVATION COMPLETION PLATFORM EVENT METHOD CTA CHANNEL CTA CTA

1B
 ALERT

HSBC phones up
user who does not
PHONE CALL respond PHONE CALL
Relieved Pleased

“
2A 2F 2G How do I find the info
“ W
PASS 2

User is sent push

notification and email
User gets text
messages and email
User gets notification
that a new account
related to the ad?
”
TEXT / EMAIL
PUSH / SMS
urging him / her to verify
suspect transactions.
This time the user clicks
“ Will I get my
money back?
”
announcing that his
card and account
has been created and
a new card has been
TEXT / EMAIL
PUSH / SMS
Confused Relieved C

the link in the email.

Distressed Worried have been cancelled sent  RESEARCH

 ALERT 3A 3B  NOTIFICATION 1C 1D
PASS 3

User sees Visits mobile PWS

User wants to Clicks CTA
notification in top page to look for
Alarmed check their button in hero
slot about approved offers on credit
PWS mortgage account PWS banner
mortgage cards

 RESEARCH  RESEARCH
TOUCH POINTS

TOUCH POINTS
“ I just want to “ Do I really need a CC
anymore? What was that
SAAS
Cautious Worried Worried Worried
SAAS
move money
Annoyed
” again?
”
Forgetful Impatient

1A 2B 2C 2D 2E 2A 2B 2C 2D
PASS 1

PASS 2
Bank suspects User has to answer a User recieves
User is prompted User is forced to click User wants to "Please complete
fraudulent series of questions to confirmation Sees notification on Clicks on the
with a pop-up alert "Review suspect move some your application"
transactions on confirm whether a message that their dashboard notification CTA
GSP upon logging on to transactions" CTA GSP money message in top slot
user's account fraud has occured. card and account
GSP
It has! have been cancelled

 ALERT  ALERT  BANK TASK  BANK TASK RECOMMENDATION

MOBILE MOBILE
APP Thankful
APP

2H
“ Is this for me? How
do I remember the name
of the product and

User recieves new

card in the mail
company?
Curious ”
BRANCH BRANCH
ATM ATM
RECOMMENDATION

 NOTIFICATION 1A 1B

PASS 1
Sees marketing
Business launches
campaign at the
new credit card
OTHER OTHER airport

TASK TYPE MESSAGE TYPE TASK TYPE MESSAGE TYPE

BANK TASK  ALERT

CREATED ON 28 09 15 BANK TASK  ALERT
 
 RESEARCH  NOTIFICATION  RESEARCH  NOTIFICATION

 COM FOLLOW-UP RECOMMENDATION +  COM FOLLOW-UP RECOMMENDATION

16
HSBC.COM Experience Map is an important design tool to understand a product/service interactions from
PROJECT OVERVIEW users’ point of view. One experience map is basically a visual representation that illustrate
PORTFOLIO 2017 users’ flow, their needs, wants, expectations and the overall experience for a particular goal.
11
COMPETITIVE PRODUCT RESEARCH

17
HSBC.COM Competitive analysis is used to evaluate how a given product’s competition stacks up
PROJECT OVERVIEW against usability standards and overall user experience, it also helps understand how
PORTFOLIO 2017 the major competition in your space is handling usability
12
CONDUCTING RESEARCH

18
HSBC.COM UX research serves many purposes throughout the design process. It helps us identify
PROJECT OVERVIEW and prove or disprove our assumptions, find commonalities across our target audience
PORTFOLIO 2017 members, and recognize their needs, goals, and mental models
13
LOW-FIDELITY PROTOTYPES

19
HSBC.COM A prototype that is sketchy and incomplete, that has some characteristics of the target
PROJECT OVERVIEW product but is otherwise simple, usually in order to quickly produce the prototype and
PORTFOLIO 2017 test broad concepts.
14
CREATING WIREFRAMES

20
HSBC.COM A wireframe specifically focuses on space allocation and prioritization of content,
PROJECT OVERVIEW functionalities available, and intended behaviors, it allows you to determine the information
PORTFOLIO 2017 hierarchy of the design while making it easier to plan out the content and user experience.
15
HIGH-FIDELITY DETAILED DESIGN

21
HSBC.COM Visual design maximizes the aesthetic, information-conveying capabilities of graphics
PROJECT OVERVIEW and text. It’s actually a subdiscipline within the UX process, contributing to UI Design,
PORTFOLIO 2017 information design, and graphic design.
16
CONDUCTING USABILITY TESTS

22
HSBC.COM In order to make good decision about both design and implementation you need
PROJECT OVERVIEW data about how people use designs, and the only way of gathering this data is
PORTFOLIO 2017 through usability testing.
17
PROJECT OUTCOME

Old online platform: March 2015 New online platform: December 2016

ACHIEVEMENTS

›› Improved overeall accessibility and usability ›› Responsive design success revealed in low mobile traffic bounce rate
›› Healthy & steady traffic growth since launch ›› Refferals, and social sharing validates content quality, trust and credibility.
›› Low overall bounce rate & healthy avarage time on site indicates ›› 12.8% conversion rate on newsletter subscribtions
good visitor retention ›› In page analytics and click tracking indicates successful navigation

23
HSBC.COM Metrics are the signals that show whether your UX strategy is working. Using metrics is
PROJECT OVERVIEW key to tracking changes over time, benchmarking against iterations of your own site or
PORTFOLIO 2017 application or those of competitors, and setting targets.
 Date: March 2014
Platform: Desktop and mobile

CHALLENGE

Build a website that curates current, credible,

trustworthy, reliable content, provide resources
for users and generate business leads.

WHAT I DID

›› Setting goals and objectives

›› Stakeholder interviews
›› Establishing key audiences
›› Building personas
›› Creating scenarios
›› Creating site maps
›› Conducting competitive research
›› Low-fidelity prototypes
›› Creating wireframes
›› High-fidelity design & guidelines
›› Usability testing

24
IMGGOLF.COM
PROJECT OVERVIEW
PORTFOLIO 2017
01
SETTING GOALS AND OBJECTIVES

SITE URL: imggolf.com

SITE OWNER: IMG World

WHAT IS THE WEBSITE ABOUT?

imggolf.com is a corporate content website showcasing the business history as a

market leader in the sport with 50 years of experience managing the top golf
professionals, golf courses, premier golf events and personalities

WHAT ARE THE GOALS OF THE WEBSITE?

The Goal of the website is to provide current, credible, trustworthy, reliable content,
provide resources for users and generate business leads.

WHO ARE THE USERS OF THE SITE

Primary audience: Broadcasters and Sponsors

Secondary audience: Event Managers and Sales Managers

25
IMGGOLF.COM Objectives are an important focusing lens for use throughout the project.
CASE STUDY They spring from the client company’s overall business strategy, so the project
PORTFOLIO 2017 objectives are in line with the strategic initiatives within the company
02
CONDUCTING INTERVIEWS

26
IMGGOLF.COM Interviews provide me with a qualitative method of gathering evidence, data and
CASE STUDY information about the project that I’m working on. At the heart of the qualitative
PORTFOLIO 2017 research is the desire to expose the human part of a story.
03
ESTABLISHING KEY AUDIENCES

5%
3%

SPONSORS EVENT MANAGERS

47%

BROADCASTERS SALES MANAGERS

45%

27
IMGGOLF.COM Interviewing the stakeholders has helped me identify the right audience for the product and
CASE STUDY characteristics of study participants. As with every product or service, the best offering comes
PORTFOLIO 2017 from carefully identifying the target audience, their needs and their wants.
04
01BUILDING PERSONAS
BROADCASER | INCLUDES CHANNEL MANAGER, EXECUTIVE BROADCASTING DIRECTOR

WHO ARE THEY?

PAIN POINTS
›› Decision makers
›› Age: 35+ ›› Finds it hard to find relevant content
›› Gender: Mixed for his industry
›› The content found is not always up to
›› Family: Married, children date
›› Education: Strong media background, business ›› Finds it hard to get the contacts for
orientated the right people
›› Hard to distinguish the level of quality
HOW DO THEY FIND INFORMATION? of the content presented

›› On desktop/laptops - smartphones, information and

data focused - email primary communication MOTIVATION

›› Forums for broadcasting trends -media magazines, ›› Find new suitable content
media groups on social networks such as Linkedin ›› Discover new trends in the industry
›› Access fresh & new content markets
MAIN GOALS/WHAT DO THEY WANT?

›› To find the right level of information quickly

›› Trending, impactful & cost efficient content
›› To be the first to know about media trends, news /
latest in broadcasting world

28
IMGGOLF.COM I synthesized my personas from observations, research and stakeholder interviews.
CASE STUDY To create a thorough persona I normally include social and demographic characteristics,
PORTFOLIO 2017 needs, desires, goals, habits, expertise, cultural background and motivations.
05
02BUILDING PERSONAS
BROADCASTER | INCLUDES CHANNEL MANAGER, EXECUTIVE BROADCASTING DIRECTOR

AUDIENCE NEEDS: SOLUTION (CONTENT & FUNCTIONALITY)

›› What is your best content about? ›› Interactive website design

›› What is the audience for that content? ›› Accessibility, UX, IA – improvements
›› What is your latest tv content? - ›› Product search/filter
upcoming updates, trends? ›› News / media section – trends,
›› What are the trends in your industry? exhibitions, new (blog?) Video – event
›› What can I buy – how much? show
›› Exhibitions – when, where, who? ›› Contact details – global network
›› New content / ›› Email newsletter
›› Who stars/presents your content? ›› Video – inside the business
›› What is your distribution platform? ›› (content analysis)
›› Is this data up to date? ›› Golf feature with most popular players
›› How do you produce your content? ›› (success) Facts/Stats
›› How engaging is your content?
›› Where can I find details about your
shows? Do you offer any additional
services? – local office / contact details

29
IMGGOLF.COM I synthesized my personas from observations, research and stakeholder interviews.
CASE STUDY To create a thorough persona I normally include social and demographic characteristics,
PORTFOLIO 2017 needs, desires, goals, habits, expertise, cultural background and motivations.
06
CREATING SCENARIOS
BROADCASTER IS DOING RESEARCH AND WANTS TO FIND AN EVENT THAT MIGHT SUIT HIS CHANNELS PROFILE

Broadcaster Broadcaster Broadcaster Broadcaster Broadcaster is

navigates to looks for events on business activity is in selects Alfred Dun- interested in the
imggolf.com the website Europe, he is looking hill Links Champi- event and wants to
for premium events. onship and looks for ask someone
the time of year it about it
happens

Broadcaster clicks Broadcaster filters Broadcaster clicks Broadcaster clicks

on “Our clients and the events by region on the read more on the ‘enquire’
properties button button

Broadcaster clicks Brodacaster filters

on drop down the events by
menu button called highest purse
“Events”

TASK SUBTASK

30
IMGGOLF.COM I use scenarios to describe the stories and context behind why a specific user or
CASE STUDY user group comes to the site. They note the goals and questions to be achieved and
PORTFOLIO 2017 sometimes define the possibilities of how the user(s) can achieve them on the site.
07
USER JOURNEYS FOR DATA COLLECTION

31
IMGGOLF.COM User journeys are useful in demonstrating the way users could interact with the
CASE STUDY website, in this particular case I illustrated, hierarchically, the series of steps necessary
PORTFOLIO 2017 for the user to take in order to collect different types of data.
08
CREATING SITEMAP
Header Navigation

WHY GOLF? JOIN CLUB

Homepage

ABOUT US OUR SERVICES OUR CLIENTS & PROPERTIES THE GOLF CLUB MULTIMEDIA NEWS CAREERS CONTACT US

HISTORY PLAYER MANAGEMENT GOLFERS JOIN CLUB

WHAT WE DO EVENT MANAGEMENT EVENTS BLOG
WHY GOLF MEDIA COURSES SWING ANALYSIS
THE IMG DIFFERENCE ADVISORY ADVISORY
OUR JOINT VENTURES GOLF DAYS AND APPEARANCES
LEADERSHIP TEAM CORPORATE HOSPITALITY
GOLF COURSE SERVICES
LICENSING
ADDITIONAL SERVIES

Footer

OFFICE LOCATIONS NEWS RSS PRIVACY POLICY SITEMAP TERMS OF USE

32
IMGGOLF.COM Once I’ve completed the personas and user journeys, I’ll create the sitemap. It visualises
CASE STUDY what I’ve have learnt about how users navigate the site, what sort of content they will
PORTFOLIO 2017 need to support them in their goals and what sort of language they use to identify things
09
COMPETITIVE PRODUCT RESEARCH

33
IMGGOLF.COM In order to be competitive, you need to know what’s out there and what has worked
CASE STUDY and has not worked. To connect the dots, you first need to collect the dots. Doing solid
PORTFOLIO 2017 investigative market research is essential for building a succesful product.
10
LOW-FIDELITY PROTOTYPES

34
IMGGOLF.COM I use low-fidelity prototypes in order to have an early validation of the product saving
CASE STUDY time and making sure I’m not producing wasteful design work. I can easily and
PORTFOLIO 2017 efficiently make changes while including users feedback based on their reactions.
11
CREATING WIREFRAMES

35
IMGGOLF.COM I build high fidelity wireframes and fully annotated diagrams, having a basis to begin
CASE STUDY creating screens; I also use them for user testing and as a reference point for functional
PORTFOLIO 2017 specifications and communicating the functionality I am going to build with stakeholders.
12
HIGH-FIDELITY DETAILED DESIGN & GUIDELINES

36
IMGGOLF.COM Having a background in design I love getting my hands dirty and producing the final high-
CASE STUDY quality visual designs as well as the guidelines and specification. I’m allways up-to-date
PORTFOLIO 2017 with the latest industry trends and I also have a passion for design innovation.
13
CONDUCTING USABILITY TESTS

37
IMGGOLF.COM I make use of user testing to explore potential solutions during the design process or test
CASE STUDY the waters during the product design cycle. Watching users try to accomplish tasks on
PORTFOLIO 2017 early prototypes is the most effective and efficient way to uncover usability problems.
14
PROJECT OUTCOME

ACHIEVEMENTS

›› Healthy & steady traffic growth since launch (over 1700 in the first 2 months)
›› Low overall bounce rate & healthy avarage time on site indicates good visitor
retention
›› Responsive design success revealed in low mobile traffic bounce rate
›› Refferals, and social sharing validates content quality, trust and credibility.
›› 17.6% conversion rate on business leads based on newsletter subscriptions.
›› In page analytics and click tracking indicates successful navigation

38
IMGGOLF.COM Without credible UX success measurements, we all risk not being able to quantify our
CASE STUDY success. Without credible UX success measurements, we are unable to align our efforts to
PORTFOLIO 2017 an organization’s business objectives and desired outcomes.
 Date: March 2014
Platform: Desktop, mobile and smart TVs

CHALLENGE

Pitch a multiplatform football app concept

to BT as a stragety for their existing content.

WHAT I DID

›› Setting goals and objectives

›› Stakeholder interviews
›› Establishing key audiences
›› Building personas
›› Creating scenarios
›› Conducting competitive research
›› Low-fidelity prototypes
›› Creating wireframes
›› High-fidelity design & guidelines

39
BT FOOTBAL APP
PROJECT OVERVIEW
PORTFOLIO 2017
01
SETTING GOALS AND OBJECTIVES

APP NAME: BT Football

APP OWNER: IMG /BT

WHAT IS THE APP ABOUT?

The app is all about premium live football content, about capturing and improving
the interaction generated by the sport and the football fans.
WHAT ARE THE GOALS OF THE APP

The Goal of the app is to provide a tool for all football fans, that allows them to get
closer and interact better with their favourite content on all digital platforms
available at the time

WHO ARE THE USERS OF THE SITE

Primary audience: Football fans

Secondary audience: Sport fans

40
BT FOOTBAL APP A UX strategy includes the why, what, how, who, and when of the project, the details that will
CASE STUDY provide its structure and demonstrate its progress and evolution. First, I identify business
PORTFOLIO 2017 goals; then I identify usability goals that allows me to develop the UX vision and strategy
02
ESTABLISHING KEY AUDIENCES
BASED ON SCOTT BYRNE-FRASER SPORT FAN RESEARCH AT BBC

GENERAL SPORT FAN SPORTS OBSESSIVE BANTER INTELLIGENT COMMENT MAIN EVENTER

41
BT FOOTBAL APP There are many different methods we can use to think about our audience segments,
CASE STUDY focusing on differences can help us prioritize and design the features that best meet the
PORTFOLIO 2017 needs of each.
03
BUILDING PERSONAS
FOOTBAL FAN

WHO ARE THEY?

MAIN GOALS/WHAT DO THEY WANT?

›› Avarage age: 43
›› To be able to “catch” the moment
›› Gender: 85% male, 15% Female
›› Industry renowned commentaries and feedback
›› Marital: 71% married 23% single 5% Divorced
›› To be the first to know about the latest results
›› Social Class: Upper Middle 42% Lower Middle 32% ››
Skilled working 16% Working Class 9% PAIN POINTS
›› Ethinicity: 94% White
›› Finds it hard to find quality content
HOW DO THEY FIND INFORMATION? ›› The content found is not always up to date
›› Finds it hard to get share it with friends
›› On desktop/laptops - smartphones ›› Hard to distinguish the level of quality of the content
›› Sport websites: BBC Sport, Sky Sport. Eurosport, ITV presented
Sport, Forums for broadcasting trends
›› Social networks such as Facebook MOTIVATION
›› Magazines & Newspapers - Guardian, Independent,
Telegraph, Times ›› Find new high quality content
›› Discover new secrets & insights into the sport

42
BT FOOTBAL APP I use a persona to represents a cluster of users who exhibit similar behavioral patterns
CASE STUDY in their purchasing decisions, use of technology or products, customer service
PORTFOLIO 2017 preferences, lifestyle choices, and the like.
04
CREATING SCENARIOS
Football fan Football fan Football fan reads the Football fan Football fan wants
opens BT football looks for the game summary and wants to see what to tell his friends
app latest football then votes for a foot- his friends have that he really liked
videos ball poll said about the event the Arsenal goal
and the match

Football fan clicks Football fan navi- Football fan clicks Football fan types
on “my video” gates through the on “My feed” tab. his message in the
short game comment text area
summary. and clicks send

Football fan filters Football fan clicks Football fan scrolls

videos by “Featured“ on Yes on the voting through the com-
filter poll ments in the
comment feed

Football fan selects Football fan likes

“Arsenal vs Chelsea one of his friends
amazing goal” post regarding the
video Arsenal game
TASK SUBTASK

43
BT FOOTBAL APP I use scenarios as a description of a persona using a product to achieve a goal, they
CASE STUDY describe an instance of use, in context. Scenarios are usually narratives that tell a story
PORTFOLIO 2017 describing one or more tasks in a specific environmental situation.
05
COMPETITIVE PRODUCT RESEARCH

44
BT FOOTBAL APP I conduct user experience competitive analysis to assess the strengths and weaknesses
CASE STUDY of the product. Effective product design involves an understanding of context, including
PORTFOLIO 2017 the services or features, techniques and standards of others in the market space
06
CREATING WIREFRAMES

45
BT FOOTBAL APP Wireframing is all about corralling ideas into a cohesive flow of pages with a clear,
CASE STUDY well-executed focus it creates clarity of purpose, a streamlined set of features, and a
PORTFOLIO 2017 focused, compelling way to communicate with users.
07
HIGH-FIDELITY DETAILED DESIGN

46
BT FOOTBAL APP As a UI designer I’m typically responsible for creating a cohesive style guide and ensuring
CASE STUDY that a consistent design language is applied across the product. Also maintaining consistency
PORTFOLIO 2017 in visual elements and producing high-quality visual designs from concept to execution
View more projects at antonmircea.com
+44 07867 409 151 THANK
[email protected]
www.linkedin.com/in/mirceaanton YOU!