This document outlines the initial planning process for a mobile application called "Shop it 2 Me" proposed by a client. It discusses iterating from an initial idea to developing use cases, workflows, and functional requirements. The planning process involves refining the problem statement, drawing diagrams of how the app would be used, and identifying components and data needs. This helps uncover more use cases and requirements to create a formal specification document to guide further design and development.

1. The George Washington University
Design Part I
The Journey of an Idea to Invention
Kunal Johar
CSCI 4243 (Senior Design)
Kunal Johar Design Part I 1

2. What is Senior Design?
Kunal Johar Design Part I 2

3. What is Senior Design?
Idea
Formal Planning
Practice Software Engineering
Technical Challenge
Polished Product
Ability to Articulate Your Vision
Kunal Johar Design Part I 3

4. What is Kunal Doing Here?
“I’ve been here for 8 weeks and I feel like
I’ve done 2 mini senior designs”
- Zack Schwartz (GW CS Class of 2011)
Kunal Johar Design Part I 4

5. What is Kunal Doing Here?
• Goals
– Think like an outsider while commanding
strong engineering skills
– Communicate superbly to coders, managers,
and the public at large
Kunal Johar Design Part I 5

6. What is Kunal Doing Here?
Idea
Formal Planning
Practice Software Engineering
Technical Challenge
Polished Product
Ability to Articulate Your Vision
Kunal Johar Design Part I 6

7. The Idea
• This is YOUR project
• It is up to YOU to transition it to invention
• Own it!
Kunal Johar Design Part I 7

8. Technical Challenge
''My mother made me a scientist without ever intending it.
Every other Jewish mother in Brooklyn would ask her
child after school: 'So? Did you learn anything today?'
But not my mother. She always asked me a different
question. 'Izzy,'
she would say, 'did you
ask a good question today?' That
difference - asking good questions -made me become a
scientist!''
http://www.nytimes.com/1988/01/19/opinion/l-izzy-did-you-ask-a-good-question-today-712388.html
(Isidor I. Rabi, Nobel laureate in physics)
…often quoted by Dr. Youssef
Kunal Johar Design Part I 8

9. Technical Challenge
• Not knowing what you don’t know is the
battle
• You can implement any* algorithm
• Trial and Error is the formula of innovation
*I have yet to successfully implement the CS151 dynamic programming based
assignments
Kunal Johar Design Part I 9

10. How Will We Learn?
• Shop it 2 me
Idea
Formal Planning
Practice Software Engineering
Polished Product
Ability to Articulate Your Vision
Shop it 2 Me will be developed through in-class discussion and exercises
Expand upon the techniques used as you develop out your idea
Kunal Johar Design Part I 10

11. Shop it 2 Me: Overview
• Whose Idea is It?
– Yours
– Mine
– Client
• Heather
Kunal Johar Design Part I 11

12. Developing Heather’s Idea
• How are other projects started?
– Flickr? Twitter? Craigslist?
– Can you name a project where the “idea” did not
originate from someone who can program?
http://money.cnn.com/2011/08/24/technology/startups/startups_technical_founder/
• Who is Heather?
– Individual
– Self-Funded
– Has an “idea”
Kunal Johar Design Part I 12

13. But She Actually Has No Idea
http://www.cs.uni.edu/~wallingf/blog/archives/monthly/2010-12.html#e2010-12-01T15_45_40.htm
• “I just need a programmer”
– Our insights, our ideas become the invention
– We solve the core challenges of the project
• Algorithms
• Data structures
• Workflows
Kunal Johar Design Part I 13

14. Let’s Begin with the Idea!
“I want to go to the mall and if I want to buy
something, I should be able to ask friends
and get their ideas and see if I should by it
buy looking at a yes/no pie chart”
• “I also like the name ‘Shop it 2 Me’ is it available?”
Kunal Johar Design Part I 14

15. Getting to an Idea
• One Option is to Refine the Problem
Statement
“I want to go to the mall and if I want to buy something, I should
be able to ask friends and get their ideas and see if I should buy
it by looking at a yes/no pie chart”
• Another option is to jot out features
needed
• Another option is to jot out how it will be
used
Kunal Johar Design Part I 15

16. What is the Main Idea?
“I want to go to the mall and if I want to buy
something, I should be able to ask friends
and get their ideas and see if I should by it by
looking at a yes/no pie chart”
What features are How should this
needed? work?
How can you restate
the problem? ise
ss Exerc
In-Cla
Kunal Johar Design Part I 16

17. Some Thoughts….
• Must be mobile
• Must be multi-user but asynchronous
• Has feedback element
• Interfaces with camera?
• Needs a server?
• Sends notifications?
• Is “Shop it 2 Me Available?”
– .com? App name? Trademark?
Kunal Johar Design Part I 17

18. How Will People Use It?
• Scenario I
– I go to the store and take a picture to send to
friends
• Scenario II
– I receive a picture and am asked my thoughts
• Scenario III
– I look at results of a past question
Kunal Johar Design Part I 18

19. But How Can People Use It?
• Scenario IV
– How do I Authenticate?
Kunal Johar Design Part I 19

20. Organizing Our Thoughts
• Idea
– What are we building?
• Use Cases / Scenarios
– How will it be used and who will use it?
• Functional / Non Functional Requirements
– What will it do and how will it do it?
Kunal Johar Design Part I 20

21. Keep Refining
REQ
UI RE
MEN
T S
A
IDE
US
E
CA
SE
S
Kunal Johar Design Part I 21

22. Use Cases
• Define a scenario
– Describe how the application will be used
– Determine actors
• Individuals
• Groups
• Other Systems
– Specify Pre-Condition or “State”
– Specify Trigger or “Action”
Kunal Johar Design Part I 22

23. Defining a Scenario
• I go to the store and take a picture to send
to friends
– What is the objective?
– Who are the “actors”?
– What are the preconditions?
– Who are the actors?
Kunal Johar Design Part I 23

24. Scenario Refined
• Generic Names for Actors
– Instead of “I” perhaps “Requestor” or even
“Vote Requestor”
– This helps us incrementally create our
workflow and data structures
Kunal Johar Design Part I 24

25. Drawing Our Use Case
• Plenty of Tools
– Microsoft Visio (Free to GW Students)
– Gliffy (Free Trial)
– Omnigraffle (Mac Only)
Kunal Johar Design Part I 25

26. Example of Our Use Case
• How Can we Improve this?
Kunal Johar Design Part I 26

27. Example of Our Use Case
• How Can we Improve this?
Kunal Johar Design Part I 27

28. Example of Our Use Case
Kunal Johar Design Part I 28

29. Use Cases -> Structure / Workflow
• We are starting to see the iterative
process of building out an idea
• The simple use case has identified at least
a few components, client app, server app,
messaging system
Kunal Johar Design Part I 29

30. High Level Structure
Kunal Johar Design Part I 30

31. High Level Work Flow
Kunal Johar Design Part I 31

32. Functional / Non-Functional Specs
• Functional Specs / Requirements
– Describes action or display
– E.g. “Use camera to take photo of item to be
voted on”
• Non-Functional Specs/Requirements
– Describes external requirement
– E.g. “Must work on iPhone” or “App must load
within 2 seconds”
Kunal Johar Design Part I 32

33. Formalizing Requirements
• We build these elements in parallel
– Idea / Problem Statement
– High Level Requirements
– Use Cases
– Functional / Non-Functional Requirements
– Components Needed
– Workflow
Kunal Johar Design Part I 33

34. Formalizing Requirements
• However at some point we need to move
on to coding
• SCRUM / Waterfall / X P
– Describe management style of moving from
requirements to coding
Kunal Johar Design Part I 34

35. Brainstorming -> Formalizing
• Overview
iOS app to allow a user to solicit a “Yes/No”
feedback on a photograph sent to a
subset of contacts
Kunal Johar Design Part I 35

36. Use Cases
• Shopper asks friends if she should buy an
item
• Friend responds to vote request
• Shopper views response
Kunal Johar Design Part I 36

37. Workflow
• Shopper asks friends if she should buy an
item
– Takes picture
– Chooses contacts
– Writes message
– Sends request
Kunal Johar Design Part I 37

38. Analysis Leads to More Use Cases
• User adds other user to contact list
• User removes other user from contact list
Kunal Johar Design Part I 38

39. In
-C
la
Workflow Refinement s s
Ex
er
ci
se
• Articulate workflows for each step
– Shopper asks friends if she should buy an item
– Friend responds to vote request
– Shopper views response
– User adds other user to contact list
– User removes other user from contact list
• What other use cases/requirements can you
uncover?
Kunal Johar Design Part I 39

40. Some Use Cases
• Vote Related
– Shopper asks friends if she should buy an item
– Friend receives vote request
– Friend views vote request
– Friend responds to vote request
– Shopper receives notification of response
– Shopper views response
• Contact Related
– User adds other user to contact list
– User removes other user from contact list
– User searches for other user
– User adds friend via Facebook Connect
– User ‘blocks’ user from communicating with self
• Authentication
– User authenticates
Kunal Johar Design Part I 40

41. Some Requirements
• Authentication
– Probably need a server
– Probably need to use some sort of cryptography
• Non-functional (General) Requirements
– iOS App, RESTFul web service
• Functional
– Use OAUTH Challenge/Response
Kunal Johar Design Part I 41

42. Some Requirements
• Sending a vote request
– Data: Photo, geo-location, from user, to contacts
• Non-functional (General) Requirements
– UI should not freeze during send process
• Functional
– Upload photo via Amazon S3 API
– Use asynchronous calls during upload process
– Send push notifications to contacts
Kunal Johar Design Part I 42

43. Requirements Lead To More…
• Upload photo via Amazon S3 API
– Anyone have experience with this?
Kunal Johar Design Part I 43

44. Upload to Amazon S3
• “Basics” of S3 uploads
– Need to secure upload request
– Need to apply access control to photo links
• APIs are not necessarily trivial
~30 hours of coding to get this component
- Plan ahead. Perhaps label this as its own
module in your requirements plan
Kunal Johar Design Part I 44

45. Bottom Line
- Construct your project with organized
brainstorming
- High level
- Use cases
- Workflow
- Requirements
- More use cases
- More requirements
Kunal Johar Design Part I 45

46. Bottom Line
- Draw a clear picture as you refine
Kunal Johar Design Part I 46

47. Specifications Document
- Attached is a redacted specification document
for ShopVote
- Use this as a guide as you create your
specification document
- Homework (Due 9/15)
- Develop a specification document and a screencast as
you would talk a developer through it
Kunal Johar Design Part I 47

48. Shop It 2 Me
• Waterfall
 Determine Requirements
 Determine Workflow / High Level Components
 Identify Unknown Steps
 Determine 3rd party APIs
 Setup Bootcamp Tasks to Overcome
 Determine Overall Code Structure
 Develop Task List with Pseudo Code
 Code / Test
 Polish
Kunal Johar Design Part I 48

49. Next Steps
• Our Specification Document Provides a Framework for us to continue
planning
• Create Low Level Workflow (Design Part II)
– For each high level work flow
• Create a UI mockup
• Determine data structures needed
• Determine control flow
• Determine the pseudocode design
• Reorganize / Refactor into Task List (Design Part III)
– Finalize psuedocode and class structures
– Think about design patterns, classes, helper/utility classes, third party APIs
– Reorder into logical units of coding
– Develop test plan
• Code!
Kunal Johar Design Part I 49

50. How Good Do You Want to Be?
• The 10,000 Hours Rule
DO
• Write your ideas out
• Refactor and optimize your thoughts
LEARN
• Try a tool like Visio
• Critique a Friend’s Design
DO
• Further refine your ideas
• Write some proof of concept code
LEARN
• Read a book like Design Patterns
• Try a new paradigm (functional language, NoSQL DB)
http://www.gladwell.com/outliers/outliers_excerpt1.html
Malcolm Gladwell, Author (Outliers) Kunal Johar Design Part I 50