Embed Size (px)
Citation preview
2
1 WHAT IS It starts of with an examination of the old product online, an analysis of user data and feedback and mapping out the customer journey com-munications with all of its possible outcomes.
user feedback
customer journey
old product
2TOP DOWN VISIONAfter establishing the current UX, the company’s internal vision & goals as well as the projected market values are re-examined with manage-ment.
marketing plan
values hierarchy
UX brainstorm
3 MARKET ANALYSIS Finally we gather information on how the market is generally approached by the competition.
UX analysis
market examples
4CUSTOMER JOURNEYAfter examining the target audiences, suggestions are made for the different types of customer journeys
UX examples
UX mapping
5 ARCHITECTURE (I) As the customer journeys are developed, the first brainstorming session is initiated regarding the product architecture.
architecture layouts
6ARCHITECTURE (II)The architecture is more formally iterated through a series of wireframe models.
GROUNDFLOOR V3 - GUIDELINESONBOARDING DESIGNS V3 | 3/13/2015
Background image, either as hero (banner) or stand alone. Icons are not (yet) depicted.
(invest)
and text
Video
Undetermined content, but probably icon with text.
Title and text
GF avatar (humanizing & whimsical element) TBD
“Choose Your Own Adventure”
List of items
Badge / digital reward
element)
“Learn As You Go” progress meter (empowerment & smart
element)
Group of elements belonging to each other
CURRENT STEP:
designs for the website/mobile site pages involved int he lender onboarding process. The idea is to cut down on design
-
A) Outlining - Structure, content placement: Brian, Nick, Ben, Chris, MarcelB) Content Fill - C) Style Finetuning -
-
eye. In order to achieve we have developed two sets of values:
A) EmpoweredThe lender will feel stronger and bolder within the GF Community. Lending with GF makes the money
being:
B) Smart
D) Contrarian
By being empowered individuals we celebrate their -
lio of loans, choose their own GF experience and be rewarded for their choices. We show that with
2) “Learn As You Go” progress meter3) Badges
These are shown with the green elements intro-duced below.
OUTLINING
INDIVIDUAL VALUES
a brand is that eliminate the middleman, or at least the appearence of one. As such, the message is always:
“ALWAYS SHOW, NEVER TELL”
The community values that underscore this are:A) Connect
C) Be Whimsical
Our processes, content, message and design
COMMUNITY VALUES
GROUNDFLOOR VALUES
“Access to you, not just the elite”
“Control your portfolio: your money, your way”
“Returns on investment up to 26%”
GROUNDFLOOR
GROUNDFLOOR
EXPLANATION
LEGEND
V3 BACKGROUND
FORM FIELD
CTA BUTTON
TAB 1 TAB 2
HERO TITLE
STEP 1: HOMEPAGE ENTRY (1.0)ONBOARDING DESIGNS V3 | 3/13/2015
GROUNDFLOOR
GROUNDFLOOR
VALUE 1:SMART
VALUE 2:INVENTIVE
HEROIMAGE
VALUE 3:DIVERSE
FEATUREDTESTIMONIAL
TESTIMONIAL
SIGN UP (SIMPLE)EMAIL ADDRESS
PASSWORD STATE
FUNDEDLOAN 1
FUNDEDLOAN 2
FUNDEDLOAN 3
AVATAR
EMAIL ADDRESS
PASSWORD
PASSWORD AGAIN
PHONE NUMBER
FIRST NAME LAST NAME
STATE
SIGN UP (FULL)
CONVINCING ARGUMENT TO JOIN
STEP 3: THANK YOU / REWARD (1.0)ONBOARDING DESIGNS V3 | 3/13/2015
GROUNDFLOOR
GROUNDFLOOR
HERO TITLEBADGE
LOAN FRONT LOAN BACKPROGRESS BAR
MORE LOAN DETAILS
THE GROUNDFLOOR COMMUNITYTELL US - TESTIMONIAL
TELL OTHERS - SOCIAL MEDIA
CHOOSE YOUR NEXT STEP
COMPLETE ACCOUNT
EDUCATE YOURSELF
wireframe sampleswireframe summary
2
7 BRANDING The brand is re-examined and researched for a more precise connection to the targeted audiences. A style (colors, typogra-phy, photography, emotional make-up) is defined.
typography
color analysisarchtype research
8PRODUCT DESIGNWeb and graphic design is used to construct a responsive site in (agile) iterations, with the values, customer journey, architecture and brand in mind.
GROUNDFLOOR LEND SIGN INBORROW LEARN
HERE’S YOUR KEY TO A NEW FINANCE COMMUNITY
PASSWORD
SIGN UP
STATE
6% and 26% return on investment.
WHAT ARE YOU WAITING FOR?LET’S GET STARTED!
NAME
PASSWORD
SIGN UP
STATE
PHONE
It shouldn’t just be the wealthy few who get an opportunity to invest in real estate. You,
me, your grandmother, we should all be able
Step 1 is signing up for access.
you the best loan rates between 6% and 26%. And you start earning interest immediately, whether the
loan funds or not!
Step 2 is choosing your loans.
Loan diversityYou determine what loans are best for you
Learn from the GROUNDFLOOR community and
Step 3 is controlling your gains.
You’re in control
As featured on
JOHN JAMESSON
“I'm so thankful that I chose to have my money invested in the loans at
While the consistency and performance of the GROUNDFLOOR team is unmatched.
SHOW MORE TESTIMONIALS
FEAT
URE
D
LEN
DER
OVER
6,000 USERS
100+ SUBMITTED LOANS
OVER
$1,000,000INVESTED
GROUNDFLOOR uses bank level security
ALL YOU NEED TO GET STARTED IS
1. An email address, password and the state you live in.
2. A desire to do more with your money.
3. Three minutes.
GROUNDFLOORFINANCE TO THE POWER OF US
Cool. So what do I need to sign up and invest?
STEP 1: HOMEPAGE ENTRY (1.0)ONBOARDING DESIGNS V5 | 4/6/2015
SUPPORT
Funded / Repaid LoansTerms Of Service
Privacy Policy
Jobs | Press | Blog
CONNECT
FINANCE TO THE POWER OF US
WHAT ARE YOU WAITING FOR?LET’S GET STARTED!
NAME
PASSWORD
SIGN UP
STATE
PHONE
GROUNDFLOOR
GA
As featured on
Sign up!
STEP 1: HOMEPAGE ENTRY (1.1)MOBILE ONBOARDING DESIGNS V5 | 4/14/2015
FINANCE TO THE POWER OF US
GROUNDFLOOR
FULL SITELOG IN
Background image, either as hero (banner) or stand alone. Icons are not (yet) depicted.
(invest)
and text
Video
Undetermined content, but probably icon with text.
Title and text
GF avatar (humanizing & whimsical element) TBD
“Choose Your Own Adventure”
List of items
Badge / digital reward
element)
“Learn As You Go” progress meter (empowerment & smart
element)
Group of elements belonging to each other
FORM FIELD
CTA BUTTON
TAB 1 TAB 2
HERO TITLE
LEGEND
GROUNDFLOOR RELEASE 3 - GUIDELINESONBOARDING DESIGNS V5 | 4/7/2015
CURRENT STEP:
designs for the website/mobile site pages involved in the lender onboarding process. The idea is to cut down on design
-
A) Outlining - Structure, content placement: Brian, Nick, Ben, Chris, MarcelB) Content Fill - C) Style Finetuning -
-
eye. In order to achieve we have developed two sets of values:
The above values are internal reminders of how we consider our audience, individually and as a community. Publically we can bind and promote these values with the following three messages:
A) EmpoweredThe lender will feel stronger and bolder within the GF Community. Lending with GF makes the money
being:
B) Smart
D) Contrarian
By empowering individuals we celebrate diversity.
and chooses their GF experience for which we reward them. We show that with:
2) “Learn As You Go” progress meter3) Community Badges
STYLE FINETUNING
INDIVIDUAL VALUES
as a brand is that we eliminate the middleman, or at least the appearence of one. As such, the mes-
sage should always be:
“DON’T SAY HOW GREAT WE ARE, SHOW IT”
In order to do this we aim to:A) Connect
C) Be Whimsical
Our processes, content, message and design
COMMUNITY VALUES
PUBLIC GROUNDFLOOR MESSAGING
“Access for you, not just the elite”
“Control your portfolio: your money, your way”
“Return on investment up to 26%”
GROUNDFLOOR
GROUNDFLOOR
DOCUMENT EXPLANATION
MESSAGINGVALUES
DEVELOPERNOTES
STRUCTURE
CSS / HOUSESTYLE
Responsive: Bootstrap 3.0 - Fluid grid design
Layout: On a 12 column grid the layout of the elements is structured into:(A)
- 6 columns (’Invest now form’-step 1, ‘Complete your account, Educate your-self’-step 3, 4) (B)- 4 columns (’values’-step 1, ‘loan cards’-step 2, 3, 4) (C)
should always be in { font-family : Oswald; text-transform : up-percase; } regardless of size or font-color. When used as a logo it whould be in { font-family : ChaletComprime; text-transform : uppercase; } with a { background : #409EC4; } perfect triangle
The logo should be high-contrast against it’s background.
body text { font-family : Lato; font-size : 16px; color : #808080; }text on light blue bg { font-family : Lato; font-size : 16px; color : #313E46; }
menu text { font-family : Lato; font-size : 20px; color : #FFFFFF; }
text links { font-family : Lato; font-size : 16px; text-transform : uppercase; color : #39BB65; }
GROUNDFLOOR
HEROIMAGE A
FEATUREDTESTIMONIAL
A
VALUE 1:SMART
VALUE 2:INVENTIVE
VALUE 3:DIVERSE C
CLOAN 1 LOAN 2 LOAN 3C
GROUNDFLOOR
EMAIL ADDRESS
PASSWORD
PASSWORD AGAIN
PHONE NUMBER
FIRST NAME LAST NAME
STATE
SIGN UP (FULL) BB
A
#313E46
#F26E01
#39BB65
#3050C1
#409EC4#D9ECF3
#EAEAEA
#FFFFFF
GROUNDFLOOR GROUNDFLOOR
iteration feedback
design samplesdesign summary
9 MARKETINGAppropriate press kits, event presentations and advertis-ing is designed and developed and appropriate (soc. media) channels are targeted for the release.
media kit materials
soc. media ads
presentation
e-mail coms
handouts
10 TEST & RELEASEAfter A/B testing various components and trajectories of the new customer journey, the product is released
mobile viewportdesktop viewport
