SEAMLESSLY BLENDING Creative & Technology on
Mobile, Tablet and WEB
W

W

W

.

B

L

U

E

T

U

B

E

I

N

C

.

C

O

...
Mobile & Tablet application
Life Cycle

SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB

WWW.BLUETUBEINC.C...
Who is Bluetube
• Mobile, Tablet & Web Enterprise
Integrator
• User Experience & Design
• Build and Integrate business app...
Who AM I ?
• Grant Davies
• CEO Bluetube
• Mobile Evangelist

• Contact information
• blog.bluetubeinteractive.com
• gdavi...
Typical mobile lifecycle
• Write down requirements
• Look for standard components that work
• Code & STYLE TO FIT.

SEAMLE...
APP Development

Better LIFECYCLE
•

User Experience
•
•
•
•
•

•
•

User Stories
Persona Mapping
Wireframes
Creative
Buil...
User Experience
• Users will have an experience
• Its better if you plan that experience
• “Coding” with no UX / UI will r...
Example Application
•

Co.Pilot
• Internal GPS for a Building
• Employee Information
• Offices, conference rooms, cafeteri...
User Stories
•

•
•
•

As a User I would like to search for an employee and view
their photo, email and phone number.
As a...
Persona mapping

Personas
•

Employee
•

Jim Smith
•
•

•

Jane Smith
•
•
•

•

Wants to find a colleague, Jane smith
Want...
Scope decisions
• User stories
• Will be implemented in mobile app for IOS

• Administrator stories
• Will be implemented ...
ALL THE WIRES
( THE BIG PICTURE)

SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB

WWW.BLUETUBEINC.COM

12
User story

Search for employee
•

As a User I would like to search for an employee and view
their photo, email and phone ...
INFORMATION ARCHITECTURE
(WIREFRAMES)

SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB

WWW.BLUETUBEINC.CO...
Changes from wireframes

Changes
•
•
•
•
•
•

Navigation icons too big
“instructions” tool tips were made more “cartoon” f...
Creative DESIGN

SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB

WWW.BLUETUBEINC.COM

18
Change from creative design

Changes
• Make NAV icons stand out more
• Remove search button and “delete” in
search box
• C...
The APP

SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB

WWW.BLUETUBEINC.COM

21
How do we get to the app ?

PSD -> App
• Developers have photoshop
• Cut the images/backgrounds from
Photoshop
• Create a ...
Read our blog

blog.bluetubeinteractive.com
•

We will post the presentations to our blog

short link – bit.ly/10HUE9t

SE...
Thank you
QUESTIONS ?

SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB

WWW.BLUETUBEINC.COM

27
Xamarin Development Life Cycle: Taking an app from IA to Implementation
Xamarin Development Life Cycle: Taking an app from IA to Implementation
Xamarin Development Life Cycle: Taking an app from IA to Implementation
Xamarin Development Life Cycle: Taking an app from IA to Implementation
Xamarin Development Life Cycle: Taking an app from IA to Implementation
Xamarin Development Life Cycle: Taking an app from IA to Implementation
Upcoming SlideShare
Loading in …5
×

Xamarin Development Life Cycle: Taking an app from IA to Implementation

693 views
557 views

Published on

Bluetube's CEO Grant Davies presentation on how to plan a successful app from the ground up for our Atlanta Xamarin Users Group Meetup on December 11th, 2013.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
693
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Since MAY 2013 original estimate for the Asia pac app - we have added,
  • Note some non user story requirements came in
  • Who has worked with an MDM ? Which ones ? Did you like it ?Mobile device management
  • Allows you to searchShows the results of a searchGroups them into “types” like People, rooms, companiesShows you can tap to go to “details” of each list item
  • mu
  • Button backgroundsMagnifying glassIcons for nav
  • Icons updated once on the devceSearch button not needed since keyboard is “enter”“Delete” appears on search once text is typed in, so not needed prior to editing
  • IOS7Gradients goneIcons made clearer
  • Xamarin Development Life Cycle: Taking an app from IA to Implementation

    1. 1. SEAMLESSLY BLENDING Creative & Technology on Mobile, Tablet and WEB W W W . B L U E T U B E I N C . C O M
    2. 2. Mobile & Tablet application Life Cycle SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 2
    3. 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 3
    4. 4. Who AM I ? • Grant Davies • CEO Bluetube • Mobile Evangelist • Contact information • blog.bluetubeinteractive.com • gdavies@bluetubeinc.com SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 4
    5. 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 5
    6. 6. APP Development Better LIFECYCLE • 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 6
    7. 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 7
    8. 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 8
    9. 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 9
    10. 10. Persona mapping Personas • Employee • Jim Smith • • • Jane Smith • • • • Wants to find a colleague, Jane smith Wants to see where her cube is prior to going to see her 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 10
    11. 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 11
    12. 12. ALL THE WIRES ( THE BIG PICTURE) SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 12
    13. 13. User story Search for employee • 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 14
    14. 14. INFORMATION ARCHITECTURE (WIREFRAMES) SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 15
    15. 15. Changes from wireframes Changes • • • • • • 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 17
    16. 16. Creative DESIGN SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 18
    17. 17. Change from creative design Changes • 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 20
    18. 18. The APP SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 21
    19. 19. How do we get to the app ? PSD -> 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 22
    20. 20. Read our blog blog.bluetubeinteractive.com • We will post the presentations to our blog short link – bit.ly/10HUE9t SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 26
    21. 21. Thank you QUESTIONS ? SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB WWW.BLUETUBEINC.COM 27

    ×