Xamarin Development Life Cycle: Taking an app from IA to Implementation
-
Upload
bluetube -
Category
Technology
-
view
394 -
download
0
description
Transcript of Xamarin Development Life Cycle: Taking an app from IA to Implementation
S E A M L E S S L Y B L E N D I N G C r e a t i v e & T e c h n o l o g y o n M o b i l e , T a b l e t a n d W E B
W W W . B L U E T U B E I N C . C O M
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 2
Mobile & Tablet applicationLife Cycle
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 3
Who is Bluetube• Mobile, Tablet & Web Enterprise
Integrator• User Experience & Design • Build and Integrate business
applications• B2B and B2C
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 4
Who AM I ?
• Grant Davies• CEO Bluetube • Mobile Evangelist
• Contact information• blog.bluetubeinteractive.com• [email protected]
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 5
Typical mobile lifecycle• Write down requirements• Look for standard components that
work• Code & STYLE TO FIT.
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 6
Better LIFECYCLE
APP Development
• User Experience• User Stories• Persona Mapping• Wireframes• Creative• Build
• Internal QA• User Acceptance Testing & Launch
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 7
User Experience• Users will have an experience• Its better if you plan that
experience• “Coding” with no UX / UI will result
in a unplanned / Random experience
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 8
Example Application• Co.Pilot
• Internal GPS for a Building• Employee Information• Offices, conference rooms, cafeteria• Mapping & Turn by turn directions• Pictures of floors to orient a user
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 9
User Stories• As a User I would like to search for an employee
and view their photo, email and phone number.• As a user I would like to view the location of an
employees cube• As A User I would like to be able to search for
conference rooms or offices and receive turn by turn directions
• As an administrator, I want to require users to be authorized to use the application
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 10
Personas
Persona mapping
• Employee• Jim Smith
• Wants to find a colleague, Jane smith• Wants to see where her cube is prior to going to see her
• Jane Smith• Has a meeting with Jim smith• Wants to see his picture so she recognizes him• Wants to see his phone number so she can call to tell him she’ll be 15 minutes late
• Administrator• Frank Blount
• Wants to be able to associate employees to cubes• Wants to be able to associate employees to pictures from the security system• Wants to require users to be authorized to install the app
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 11
Scope decisions• User stories
• Will be implemented in mobile app for IOS
• Administrator stories• Will be implemented manually
• Database & Enterprise MDM
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 12
ALL THE WIRES( THE BIG PICTURE)
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 14
Search for employee
User story
• As a User I would like to search for an employee and view their photo, email and phone number.
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 15
INFORMATION ARCHITECTURE(WIREFRAMES)
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 17
Changes
Changes from wireframes
• Navigation icons too big• “instructions” tool tips were made more
“cartoon” for clarity• More categories in results• Make phone number a button• Make email a button• Lookup by floor and cube
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 18
Creative DESIGN
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 20
Changes
Change from creative design
• Make NAV icons stand out more• Remove search button and
“delete” in search box• Change name font and department
font, so name stands out.
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 21
The APP
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 22
PSD -> App
How do we get to the app ?
• Developers have photoshop• Cut the images/backgrounds from
Photoshop• Create a set of “resources” for the
app
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 26
Read our blog
• We will post the presentations to our blog
short link – bit.ly/10HUE9t
blog.bluetubeinteractive.com
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 27
Thank you
QUESTIONS ?