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.
2. Mobile & Tablet application
Life Cycle
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB
WWW.BLUETUBEINC.COM
2
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. 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. 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. 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. 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. 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. 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. 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. 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. ALL THE WIRES
( THE BIG PICTURE)
SEAMLESSLY BLENDING CREATIVE & TECHNICAL ON MOBILE TABLET & WEB
WWW.BLUETUBEINC.COM
12
13.
14. 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
17. 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
20. 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
22. 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
23.
24.
25.
26. 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
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