Name of website: Pici Pasta

Name of responsible person : Askar Askarov (designer)

Team members:
1. Bolat Bolatov (front-end developer, analyst)
2. Sergey Sergeev (back-end developer)
3. Mohammed Muhamet (Scrum master, analyst)
4. Aliya Aliyeva (tester)
 Strategy (User Personas 1)
Persona Name: Rachel Hernandez
User Picture
Persona tagline: My coworkers are like my second family

Persona Details Other Details

• Age: 35
• Role: The Office Manager
• Area: Advanced Bionics
• Computer Literacy: High
• Loves throwing holiday
parties for the office
• Enjoys wine tasting with co-
workers on the weekends
• Married for 3 years

Goal Narrative
• To find delicious food • ….
…..
…..
Frustrations:
…..
• ….
…..
• ….
…..
• ….
……
 Strategy (User Personas 2)
Persona Name: Ethan Peng
User Picture
Persona tagline: I only want the best experiences for my clients

Persona Details Other Details

• Age: 46 • Likes to impress bigger clients during
• Role: The Business owner meetings and project wrap ups
• Area: small marketing startup
• Computer Literacy: high • Content creation for hotels (LINE, Ace
Hotel) and lifestyle brands
(Refinery29, Toms)
• Likes team building exercises and takes
Goal Narrative the team out on hikes
• To find healthy food • …. • Married for 20 years, father with a 5
….. year old daughter and 10 year old son
…..
Frustrations: • Has an MBA from UCLA
…..
• ….
…..
• ….
…..
• ….
……
 Strategy (User Personas 3)
Persona Name: Michelle Sage
User Picture
Persona tagline: I Want to build local Santa Clarita community
Persona Details Other Details
• Age: 28
• Role: The Nonprofit Communications • Organizes and plans events
to raise money/donations
Director
during the holiday season
• Area: Nonprofit aimed at providing
art supplies and classes for • Has a Bachelors in
underprivileged youth Communications from CSUN
• Computer Literacy: High • Runs the social media
campaigns
Goal Narrative
• Loves to take cooking
• To find delicious and • …. classes with her friends
affordable food …..
• Single but appreciates going
….. on dates to enjoy fine dining
Frustrations: …..
• …. …..
• …. …..
• …. ……
 Strategy (User Personas Example)
Persona Name: Steve Medeiros
User Picture
Persona tagline: My parents taught me not talk to strangers

Persona Details Other Details

• Age: 22 • Recent Graduate of Syracuse University
• Role: Graduate
• Area: Finance • Accepted a job in NYC
• Computer Literacy: High • Bored of his routine, looking for something new

Goal
• Find someone to date (the goal is Narrative
defined according to the idea of Project Steve is 22 years old, single, and a recent graduate from Syracuse University. He accepted
) a job in NYC working in finance, and has moved into a tiny apt with a buddy from college.
A handful of his college friends moved into NYC, with others spreading out to Boston,
Frustrations:
Washington DC, Albany, San Diego, as well as dozen other cities. For the first time in his
• Doesn’t have enough time to go out
life , Steve doesn’t have an established network. Instead, he can count on two hands the
and find people to date
number of people he knows in the city.
• Doesn’t feel comfortable
Steve finishes work on a Tuesday, goes to the gym, and comes home around 8. He orders
approaching a complete stranger to
Chinese food with his roommate, and they each sit in their cramped apartment watching
date
TV with laptops on their laps until 11:30 when they go to bed. This routine occurs Monday-
• Sees his friends with tons of
Wednesday, some Thursday and Fridays, and a variation occurs Sunday night (no work
attractive potentials that he’d like to
during the day)
find more about
Outline of Scope
Content (text, images, video) that the user will need. Systems that will allow the user accomplish tasks. “The
“The user will be looking for…” user will be able to …” (description of user stories in Project)

Content Requirements: Content Requirements: Functionality Requirements Functionality Requirements

(User Stories): (User Stories):
The user will be looking for: The user will be looking for :
The user will be able to : The user will be able to :
• Food Menu • FAQ - What are the
questions? • Get help via a live chat • Place order
• Pasta feature
• Where Do You • Contact information
• Appetizers
Deliver? • Customize the catering • Delivery information
• Desserts order
• Can you cater for • Make payment
• Drinks dietary restrictions? • Indicate date/time of • Get order confirmation
• Images of past catered • Do you have a delivery
events minimum order? • Make changes/cancel
• Indicate the amount of
catering service after order
• Do you charge for people
• Text that stresses that has been placed
deliveries are only for the delivery? • Pick options for
Santa Clarita area • How much time do salads/main • Create an account
you need prior to an courses/drinks and • view current/past
• About us order? indicate the ratio of orders
how much of each
• Testimonials • What is your pricing option to order • Log in
structure?
• Contact (phone number +
address) • Who can I contact?
Sitemap
Provide full sitemap for all
elements of the website
including the flowchart
Give the link to the original
sitemap location in the case if
the resolution of the sitemap
is high and can’t be shown
properly in the slide
Name of Website (Brand)
Design
Provide the Alternative
variants of the WebSite
Name Visual Design, if any.
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Home Page
Wireframe

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Home Page
Wireframe - Live Chat
Pop-Up

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Additional Page
Wireframe –
Testimonials

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Wireframes
Provide the full set of wireframes for
desktop layout + 1 wireframe for
home page mobile layout
or
Full set of wireframes for mobile
layout + 1 wireframe for home page
desktop layout
by Your Choice.

Specify here the name (goal) of your

wireframe (for example, “Home
Page Wireframe”) and locate each
wireframe on the different pages

Ordering Process
Wireframes

Desktop Layout
Mood Board
Provide the mood board of your
Project website.
Give the link to the original website
if you used the special tools (for
example, Pinterest) or in the case if
your mood board has the high
resolution.

Link to Pinterest:
https://www.pinterest.com/pileopan
das/italian-brand/
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Home Page with Chat

Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Home Page &

Navigation Visual
Mockup

Mobile Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Additional Page (FAQ)

Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Additional Page
(Testimonials)
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout
Visual Mock-Ups
Provide the full set of visual mock-
ups for each wireframe presented
above
Specify here the name (goal) of your
visual mock-up (for example, “Home
Page Visual Mock-up”) and locate
each visual mock-up on the different
pages

Ordering Process
Visual Mockup

Desktop Layout