Final Project – Process

WESTSIDE PAVILION – ‘For the Love of Shopping’

logo

+++ Presentation +++  +++ Final Prototype +++

Definition Statement:
‘A mobile assistant for shoppers to the stores, restaurants, services and,
other amenities of Westside Pavillion’


PERSONAS

ab

c


SKETCHES

1.jpg


WIREFRAMES

wireframes


DESIGN PATTERNS
9 Types (Navigation, Calendars, Maps, Notifications, Search, Detail Views, Profiles, Settings,  Lists, and Forms)


NAVIGATION
EXAMPLES:

bottomnav1.png   nav_combo.pngnav4.png   nav5.gifbottomnav2.png

 


CALENDARS

EXAMPLES:

cal3.pngcal1.png cal2.png


MAPS

EXAMPLES:
maps2.jpg  maps1.jpg  maps3.jpg


NOTIFICATIONS

EXAMPLES:
notification1.jpg

notification3.pngnotification2.jpg


SEARCH

EXAMPLES:
search1.jpg  search3.pngsearch2.png

search5.png


DETAIL VIEWS

EXAMPLES:
detailview1.jpg  detailview2.jpg detailview3.jpg detailview5.png  detailview4.png


PROFILES

EXAMPLES:
profile2.png  profile1.png profile3.png  profile4.png


SETTINGS

EXAMPLES:
settings1.png  settings2.png

settings3.png


LISTS

EXAMPLES:
list1.pnglist3.png  list4.jpg

 


FORMS

EXAMPLES:
forms.png  forms2.jpg  forms3

 


VISUAL DESIGN COMPS

screens1

screens2


USER TESTING RESULTS

I’m tested the available sections Home, Visit, Eat, Meet.

Results:

  1. Participates had no idea what the blue crowd button was on the home section and was not interested in it.
  2. Some liked the graphics but thought some were a distraction/confusing especially on the home(couldn’t see menu clearly) and Visit(the street in top graphic looked like the map section.
  3. Calling the Events section ‘Meet” was very confusing to everyone but one person.
  4. All main buttons should be clickable.
  5. Menu should have different ways to get rid of it
  6. The profile section on top of the menu was confusing.

Needed Improvements:

  1. Remove crowd button(there is no interest in it).
  2. Keep graphics but change home and view to make top menu legible on small screen(3 of 4 tested on large monitor). Visit graphic street should be toned down.
  3. Meet section will be changed to ‘Events’.
  4. Most of  buttons should be clickable to create better flow.
  5. Menu should have different ways to get rid of it(swipe, click away and scrolling)
  6. Remove profile from menu. Add to profile only

FINAL DESIGN COMPS

load   Home . menu .Visit - Directions   Visit - Smart Parking   Shop

Shop Catergories    Shop Maps   Eat.png  Eat Catogories.png    Eat Maps    playEvents


FINAL PRESENTATION

Screen Shot 2017-10-20 at 4.51.30 PM

LINK 1 

LINK 2

 

Advertisements

Project 4

MINIMAL PROTOTYPE

INVISION – WESTSIDE PAVILLION APP >



USABILITY TEST PLAN

PDF LINK >
usabilitydashboard

 


 

TESTING SCRIPT


INTRO

  1. Greeting: Thank you participating in my study! Your feedback will be invaluable in helping me make design changes for this application.
  2. Purpose of study: The purpose of this test is to determine initial reaction to the interface and concept of the current prototype. I’m designing a shopping center virtual assistant to help users when they visit the Westside Pavilion.  Your feedback will be used to help me make design changes to the prototype for my next iteration. Also, this session is a test for the App design and not a test about you.
  3. (Provide required forms. Null for class project). I will be video recording(recording this session to supplement my notes while you complete the given tasks. The recording(audio/video) will only include your hands, the screen and voice interaction as you follow the tasks/instructions. If you are comfortable being recorded, please sign this consent form.
  4. Explain testing process: I have 5-6 tasks for you to complete. The tasks are intentionally open ended.
  5. Please describe out loud: During the tasks, I would like you to think out loud. I do not want to interrupt your thought process with my questions, so if you are thinking about which button to press, explain what you are thinking.
  6. Questions and concerns: If you have any questions or concerns, please feel to interrupt test and ask. You are not obligated to complete any of these tasks and we can end the
    test whenever you choose. Do you have any questions? Fantastic, let’s begin.

 

INITIAL INTERVIEW:

  1. Tell me about your shopping habits?
    1. How do you like to shop?
    2. What are your favorite shopping center experiences?
    3. Do you find what you are looking for when you visit the mall?
  2. Do you plan a shopping center visit?
    1. What is your process?
    2. Do you have a favorite website/app?

 

TASK:

  1. Explore the App
  2. Go to the Events/Meet section and view.
  3. Go to Store list and view.
  4. Go to Menu and view.
  5. Go to Shop section and view
  6. Go to Visit and Parking section.

DEBRIEF:

  1. Moderator(me):
    1. Do you have any questions about the testing session?
    2. Thank you so much!
    3. This has been a very helpful session. Thanks for your feedback.

VERBAL POST-TEST INTERVIEW

  1. Overall, how did you feel about the product you just used?
  2. What were the three best things about the product you just used
  3. What were the three bad things about the product you just used?
  4. What can you change to make the product better

 

USER TESTING SESSION – MODERATED

Test subjects from target demographics.
Women who currently go to shopping centers – 22 – 45
* Study was done on 4 strangers with varied age, income and culture.

#1 Female, 42 – Computer

20171017_155906   1.        20171017_172131    2.20171017_172211   3.        20171017_172202  4.      

Summary:

1st Interview –

  • Tell me about your shopping habits?
    1. How do you like to shop?  I go to stores when I need something.
    2. What are your favorite shopping center experiences? Getting what I need.
    3. Do you find what you are looking for when you visit the mall? Yeah sometimes
  • Do you plan a shopping center visit?
    1. What is your process? Don’t have a process…I just..go.
    2. Do you have a favorite website/app? I use Amazon?

Task –

  • Explore the App
  • On Home section: “What is that blue button?” *explained that it was a crowd report* “I don’t get it”
  • Go to the Events/Meet section and view.“What is Meet? A meeting?” *explained* “Oh okay…why isn’t it called events? But? I guess ‘meet’ is fine too.”
  • Go to Menu and view. *was in home section(1)* “Where is it? Oh there it is. I didn’t see it. You should darken it so that I can see it better”
  • Go to Shop section and view “Oh I like the list…the catergories”
  • Go to Visit and Parking section. *hover’s mouse over mid nav* “I didn’t have my glasses on….I would not see the text. Whiter?”  midnav

2nd Interview

  • *interrupted before questions* “Can I make a comment? If I was on my phone? I thought the top section was an ad…not clickable. Make the text whiter on the middle link part”
  • Overall, how did you feel about the product you just used? “I like the graphics.”
  • What were the three best things about the product you just used? “I like the graphics…the colors work…pretty,  the different sections and the calendar”
  • What were the three bad things about the product you just used? “The text on the middle part whiter, the date part..I don’t care about it and the blue button…looked like a graph”
  • What can you change to make the product better. “Make the top button(home) clickable. The middle part I can’t read with glasses”

—————————————————————————————————————-

#2 Female,29  Mobile

1    1.   2   2.

Summary:

1st Interview –

  • Tell me about your shopping habits?
    1. How do you like to shop?  “I like to look around till I find something that I like.”
    2. What are your favorite shopping center experiences? “I don’t know…I don’t remember”
    3. Do you find what you are looking for when you visit the mall? “Yep”
  • Do you plan a shopping center visit?
    1. What is your process? “What? No!”
    2. Do you have a favorite website/app? “For Shopping? Rebates?”

Task –

  • Explore the App. “I like it”
  • On Home section: “Cool! Why so many icons?”mainnav *
  • Go to the Events/Meet section and view. ****
  • Go to Menu and view. *was in home section(1)* *accomplished goal* “Menu*icon* fades into background.”
  • Go to Shop section and view. ****
  • Go to Visit and Parking section. “This part *header graphic*? Looks… like the map below”
    2

2nd Interview

  • Overall, how did you feel about the product you just used? “Design is cool”
  • What were the three best things about the product you just used? “The look is nice. like the list*store*. I like the date *home* part”
  • What were the three bad things about the product you just used? “I can’t click on the other bottom links. Too many icons. The visit part? visit I can find that in the menu. Get rid of the profile icon part. I can find it in the menu too. Too many icons for the same thing”
  • What can you change to make the product better. “Fix the things that I didn’t like?”

—————————————————————————————————————-

#3 Female,23  Computer

3  1.    4 1.

Summary:

1st Interview –

  • Tell me about your shopping habits?
    1. How do you like to shop?  “Like to browse. If I find something cute…I buy it.”
    2. What are your favorite shopping center experiences? “Forever21?” *why?* “I like their stuff”.
    3. Do you find what you are looking for when you visit the mall? “Yes”
  • Do you plan a shopping center visit?
    1. What is your process? “Don’t have any”
    2. Do you have a favorite website/app? “I don’t use Apps”

Task –

  • Explore the App. ****
  • On Home section: “What’s this?” *blue button* “App doesn’t look real” *what do you mean?* “The cartoons..”
  • Go to the Events/Meet section and view. “I like this”
  • Go to Menu and view. ***
  • Go to Shop section and view. “Why can’t I scroll this? Can’t click on some of the icons on the bottom. Why? Broken?” mainnav
  • Go to Visit and Parking section. “Can’t click on the parking?”  
    2

2nd Interview

  • Overall, how did you feel about the product you just used? “Doesn’t feel real *App*…maybe you should use a picture of the real building? I like though….just the cartoons…”
  • What were the three best things about the product you just used? “I like the menu…it’s the first thing I’d use, the calendar and the list(but I can’t scroll)”
  • What were the three bad things about the product you just used? “I like the graphics but it doesn’t fit?…I don’t what else to say. Maybe? Fix all the buttons”
  • What can you change to make the product better. “Fix the buttons and change the graphics.”

 



USER TESTING SESSION – UNMODERATED/OFF SITE

Test subjects from target demographics.
Women who currently go to shopping centers – 22 – 45
* Study was done on 1 female stranger via UserTesting.com/Invision to create some balance to observe if some of the likes and dislikes were similar without me in the room. Noticed that some of the women(in person) were hesitate in negative critique.

Female, 23 – Computer
Off-site testing #1

SCRIPT

The purpose of this test is to determine initial reaction to the interface and concept of the current prototype. I’m designing a shopping center virtual assistant to help users when they visit the Westside Pavilion.  Your feedback will be used to help me make design changes to the prototype for my next iteration. Also, this session is a test for the App design and not a test about you.

1. Explore

2. Go to Shop

3. Go to Menu

4. Go to Meet

5. Visit

What is your age. What are 4 things that you like or dislike? What would you like to see in the finished product?

SUMMARY:

Participate (Female, 23) was able to follow through with tasks. Expressed frustration with static screen Wanted the menu to disappear when she swiped it off. Thought graphics was nice but functionality not done right. Found the meet section very confusing and uninteresting.


 OVERALL TESTING RESULTS

I tested the sections Home, Visit, Eat, Meet.

Results:

  1. Participants had no idea what the blue crowd button was on the home section and was not interested in it.
  2. Some liked the graphics but thought some were a distraction/confusing especially on the home(couldn’t see menu clearly) and Visit(the street in top graphic looked like the map section.
  3. Calling the Events section ‘Meet” was very confusing to everyone but one person.
  4. All main buttons should be clickable.
  5. Menu should have different ways to get rid of it
  6. The profile section on top of the menu was confusing.

Needed Improvements:

  1. Remove crowd button(there is no interest in it).
  2. Keep graphics but change home and view to make top menu legible on small screen(3 of 4 tested on large monitor). Visit graphic street should be toned down.
  3. Meet section will be changed to ‘Events’.
  4. Most of  buttons should be clickable to create better flow.
  5. Menu should have different ways to get rid of it(swipe, click away and scrolling)
  6. Remove profile from menu. Add to profile only

 

Project 3

DESIGN PATTERNS
9 Types (Navigation, Calendars, Maps, Notifications, Search, Detail Views, Profiles, Settings,  Lists, and Forms)


NAVIGATION
EXAMPLES:

bottomnav1.png   nav_combo.pngnav4.png   nav5.gifbottomnav2.png

 


CALENDARS

EXAMPLES:

cal3.pngcal1.png cal2.png


MAPS

EXAMPLES:
maps2.jpg  maps1.jpg  maps3.jpg


NOTIFICATIONS

EXAMPLES:
notification1.jpg

notification3.pngnotification2.jpg


SEARCH

EXAMPLES:
search1.jpg  search3.pngsearch2.png

search5.png


DETAIL VIEWS

EXAMPLES:
detailview1.jpg  detailview2.jpg detailview3.jpg detailview5.png  detailview4.png


PROFILES

EXAMPLES:
profile2.png  profile1.png profile3.png  profile4.png


SETTINGS

EXAMPLES:
settings1.png  settings2.png

settings3.png


LISTS

EXAMPLES:
list1.pnglist3.png  list4.jpg

 


FORMS

EXAMPLES:
forms.png  forms2.jpg  forms3


 

Midterm Project

Introduction

My app is called Westside Pavilion – MySmartMall. It will make a visit to the mall less time consuming, more productive and enjoyable.

I’m passionate about this project because it is a challenge and solution to making the indoor mall more interesting, relevant and helpful to the modern tech-savvy user. The users of this App will be 25-45, male/female, comfortable with their smartphones and a local resident/tourist with the income range of $35,000-$120,000. MySmartApp will act as a virtual assistant for the user who visits the indoor shopping center. Users can browse stores’ inventory, have less stress when finding parking and finding what they want when they need it. It will form an organic bridge or relationship between the user and the shopping center/mall.

The user flow will be an onboard or quick intro for a new user. The main screen will link to visit(parking and directions), shop(stores and services), eat(dining), play(movies and other entertainment services) and meet(events). All sections will be fluid and a user can quickly move between sections.

The main sections are Visit, Shop, Eat, Play and Meet. Action words and images were used to motivate user and fulfill some of their initial expectations (e.g. be engaging, simple etc). The three main features are parking, favoring items, navigating the building and a robust search for every section and anything relevant to the casual user. Parking allows the user to easily find available parking, pay and find their car when mall visit is completed. Favoring items consists of browsing store’s inventory and clicking on a heart to save to a shopping list that is available in the upper left pull-down menu and shop section. The navigation helps the user navigate the mall via floor maps and draw routes using input and GPS. The search feature will guide the user to every section on the app.


Mobile App Definition Statement

A smart App that makes a visit to the mall painless, efficient and less time-consuming.


Personas

NOAH REYNOLDS, 36 years (pdf version)
Noah is married and a new father. He is part of a big close-knit family and the middle child among eight siblings. He works at Santa Monica College. Noah loves his work and his peers. He likes to hang out with his wife, baby, friends, parents and siblings. He loves celebrating special events with his family but hates buying gifts(waits last minute and gets stressed while finding the ‘perfect’ gift).

noah

EMMA NGUYEN, 26 years (pdf version)
She is a go-getter, optimistic and charismatic. She lives in the Palm Area with a roommate and her pug Lucy.She is a buyer at ModCloth(retro) LA office – she loves her job and peers. Her side hustle is being a fashion, makeup and lifestyle Youtuber. To appeal to her target audience, she is up to date on the latest trends. In her spare time, she likes to go out with her friends to eat, shop, party and going to movies.

emma.png

ISABELLA CASTILLO, 41 years (pdf version)
She is career driven and happily married. At work, she is proud of her management skills, eye for talent, mentorship and her career path. She lives in Santa Monica with her husband Marco and teenage son Eric. She’s a weekend warrior and loves to spend time with her family when she’s not traveling for business.

isabella


Sketches

1.jpg

2



User flow diagram/flowchart

map


Wireframes (balsamiq prototype)

wireframes


Project 2

20 Questions – An exercise in meeting my App’s users

  1. Are they male/female?
    My target audience will be male and female.

  2. How old are they?
    The age range will be 25-45.

  3. Where do they live?
    They are locals who close to the mall and tourists.

  4. Do they have children?
    Yes, some will have children.

  5. Are they married?
    Some will be married.

  6. Where are they when they use the app?
    They will be at home or on-site.

  7. Do they love a competitive app? Why?
    Yes, they do. Westfield Century city App because of the smart parking concept.

  8. What do they do?
    They are young to pre-middle age people who work in tech, marketing, and lifestyle careers. 
  9. What do they have in common?
    They like shopping for self and can be impatient when they have to wait.

  10. Why are they interested in the topic?
    The interest in the App is convenience while shopping.

  11. Who are they trying to impress?
    Peers, friends and family members.

  12. Who impresses them?
    People with leadership qualities.

  13. What Internet tools do they use most every day?
    They use messaging and google every day.

  14. What Internet tools do they not use ever?
    Telnet, FTP and geocaching.

  15. What drives my target to make decisions?
    Peer  approval.

  16. Can they afford my app?
    Yes, free!

  17. Can I reach them with my app? Are they accessible?
    They are accessible.

  18. Are there enough people in your target to be profitable?
    Due to the yearly demographics, Westside Pavillion has managed to stay relevant.

  19. How does your idea resonate with your audience on an emotional level?
    It validates their main pain points by serving as a bridge from users and shopping center

  20. Do you need to break your target up into niches?
    If interviews become more populated, niches may be broken down to age and gender
 * based on 7 interviews – 4 Female and 3 Male (age 25-56)

 



3 Personas based on interviews and target audience

NOAH REYNOLDS, 36 years (pdf version)
Noah is married and a new father. He is part of a big close knit family and the middle child among eight siblings. He works at Santa Monica College. Noah loves his work and his peers. He likes to hang out with his wife, kid, friends, parents and siblings. He loves celebrating special events with his family but hates buying gifts(waits last minute and gets stressed while finding the ‘perfect’ gift).

noah

 

EMMA NGUYEN, 26 years (pdf version)
She is a go-getter, optimistic and charismatic. She lives in the Palm Area with a roommate and her pug Lucy.She is a buyer at ModCloth(retro) LA office – she loves her job and peers. Her side hustle is being a fashion, makeup and lifestyle Youtuber. To appeal to her target audience, she is up to date on the latest trends. In her spare time, she likes to go out with her friends to eat, shop, party and going to movies.

emma.png

 

ISABELLA CASTILLO, 41 years (pdf version)
She is career driven and happily married. At work, she is proud of her management skills, eye for talent, mentorship and her career path. She lives in Santa Monica with her husband Marco and teenage son Eric. She’s a weekend warrior and loves to spend time with her family when she’s not traveling for business.

isabella

Assignment 3

READING – Part 1: Informal Competitive Analysis

wp-image-1578047079

Westfield US (Android/iOS)

Publisher: Westfield Labs Corporation
Rating: yellowstaryellowstaryellowstargraystargraystar
Price: Free

The Westfield US app serves an online supplement for the company’s 34 shopping centers in the US. It encompasses stores, food, lifestyle, services, parking, individual products, deals, maps and entertainment to millions of customers.

The best features are the design, parking and shopping experience. The design is very simple, consistent, direct and clean. In some stores, smart parking is introduced to manage crowds and make the parking experience less stressful. The shopping experience is the star of this app. A user can search and find items based on category and store name. Also, items can be added to a shopping list with directions to store and can be purchased online.

The worse features are the current in-store navigation, ease of access to smart parking feature, search limitations and no emergency contact feature. The in-store navigation was fantastic in early versions, GPS location was offered and a step by step mapping system allowed you to get to your destination(similar to Google Maps walk feature). The current version gives user an awkward draw route map. Knowledge of close-by stores names and the destination is required. The smart parking feature is a great and working concept but a signup required first. The license plate visual recognition feature is faulty. It will recognize some plates based on time of day/lighting and with some letters of the alphabet. No emergency contact with gps location.

.

wp-image--1597585670

SIMON – Malls, Mills & Outlets (Android/iOS)

Publisher: Simon Property Group
Rating:  yellowstaryellowstaryellowstargraystargraystar
Price: Free

This app supplements the company’s more the 220 shopping centers in the US. It focuses on each center’s stores, food, lifestyle, services, parking, individual products, deals, maps and entertainment.

The best features are the call-to-action slides and featured items on the main/home section. The 3 call-to-action slide feature points to finding a store, deals and ???. Color and direct speech is used to successfully guide user. Featured items(eye catching images) is listed above the fold and not complete. It gives a sense of continuity.

The app’s unsatisfactory aspects are the loading, the awkward map, app navigation and too much information in the drop down menu for the casual user. The loading for search and sections are very slow. The map is difficult to read. Very small, display fonts are used and is monotone. The app navigation is awkward and inconsistent. For example, in the search feature, stores and restaurants will be listed as logos or text in different sections of map. The pull down menu is great but busy and include useless info for the casual user (e.g. investors, Buyers, about app etc). No emergency contact with gps location.

.

wp-image-1015667857

Emaar Square Mall (Android/iOS)

Publisher: Emaar Technologies

Rating:  yellowstaryellowstaryellowstar  yellowstar  graystar

Price: Free

This app serves to enhance the Dubai-based real estate development company’s shopping center experience in Istanbul, Turkey. It focuses on each center’s stores, food, lifestyle, services, parking, deals, maps and entertainment.

It’s best features are the clean drop menu of everything offered to the casual user. Also, their call-to-action slider, mapping, interesting solution to parking management, store listing and app navigation. The call-to-action slider contain random important events, deals and specials. The mapping is a great solution to navigating the large center. The system consist of a draw route/map from one place to another. Map is very clean and easy to use. The parking management is solved with a note taking approach with the camera, record sound file and note taking within the App. The store listing is handled in 3 ways, A to Z, categories and floors. The app navigation is very clean, language direct and legible.

The worse features is that you can’t buy products online. No emergency contact with gps location.

*Rating/Resources: App Annie and last online current company annual reports.

 


 

CONCEPT – Part 2: Defining the Mobile App Concept
*Note: Project idea was changed after impromptu brainstorming with adviser.

APP: MY SMART MALL

A smart App that makes a visit to the mall painless, efficient and less time consuming.

The target audience will be based on current mall’s chief consumers who visit often. The App will be reskinned and features will be customized for a specific mall.

In this case study the mall will be Westside Pavilion. Center located adjacent to highly affluent communities including Rancho Park, Beverly Hills, Brentwood, etc. It’s consumers have a Median age of 34(Average age: 25-44). Average household income is $110,000(Median $65,000). Ethnic demographic(White 57%, Hispanic 24%, Asian 18%, Other etc).

Reference:  2017 Westside Pavilion Market Profile (pdf). Secondary Research on neighbor mall – Westfield Century City (pdf).

The core functions are mall info, navigation, parking and interacting with stores/restaurants

 


 

SKETCHING – Part 3: Second Draft of Concept Generation Worksheet

*Note: Project idea was changed after impromptu brainstorming with advisor.

APP: MY SMART MALL

wp-image-2053672016