AEO Customer-Facing In-Store iOS App - Student Project

•

Student Project - Group Final Project for "Interface Design" Course

American Eagle Outfitters Inc. Customer-Facing In-Store iOS App Prototype

The project: The UX Team at American Eagle Outfitters, Inc. (AEO) collaborated with my Interface Design professor for the final group project of the class. AEO’s UX Team asked for prototypes for a customer-facing in-store mobile app that would serve as a shopping companion for AEO customers. The class was divided into teams of four, and each team had to meet specific deliverables and create a presentation deck to show the AEO UX Team in-person at their office in Pittsburgh, PA on the due date of our final project.

My team: My project team consisted of myself, a fellow graduate student, and two undergraduates. My fellow graduate student, Xingyi Zhao, and I were designated by the professor as the Team Leads.

My role:

• To oversee design decisions, ensuring that the client’s requirements
are being met.

• To ensure that the platform’s interaction designs are being met.

• To ensure that the designs are direct solutions for the problems discovered in our
preliminary research on in-store shopping pain points.

• To ensure that each team member is fulfilling their responsibility and that our project
deadlines are being met.

My tasks:

• Conducting preliminary research of the AEO mobile app’s user base.

• Conducting user research for in-store shopping pain points.

• Overseeing initial sketch designs to ensure they adhere to the iOS platform requirements
and that the interface is easy to navigate.

• Creating the persona of “Sara”, her scenario and her task-flow diagram.

• Collaborating with fellow Team Lead Xingyi Zhao to create wireframes and visual mock-
ups based off of our scenarios.

• Conducting usability testing on our final designs and making recommendations based off
of the findings.

• Constructing the project document, which showcases our research, designs, usability
testing results, and final recommendations. This was given to the AEO UX Team.

• Constructing our project presentation slides, which showcases our research, personas
and scenarios, and wireframes and visual mock-ups. This was presented to the AEO UX
Team.

The situation:

• The prototype customer-facing in-store mobile app should serve as a shopping
companion for AEO customers to enhance their shopping and brand experience.

• The AEO UX Team asked us to understand the in-store customer experience, including common unmet needs and any pain points that could prevent a customer from making a
purchase.

• Our project had to leverage user research on these pain points to support our design
solutions.

• Our class had approximately 3.5 weeks to complete this project, making time
management critical.

The process:

• Foundational goal and user research; defining key considerations.

• Defining key considerations and project goals.

• Personas and scenarios.

• Design brainstorming and sketching.

• Wireframes, created in Photoshop.

• Visual mock-ups, created in Photoshop.

• Interactive wireframes, created in Axure RP.

• Usability testing and recommendations.

1. Foundational Goal and User Research (AEO Mobile App and In-Store Shopping):

Foundational Goal

When you shop in the store, this app is your shopping companion. It aims to reduce common pain points that prevent an in-store purchase, to make shopping more convenient for you, and to increase brand loyalty in AEO to ensure a return visit.

AEO Mobile App Research

Our research was gathered from several online sources on retail mobile app user trends, cited at the end of the document. Our goal for this research was to learn general information on AEO target demographics and retail app users to determine who would most likely use an AEO in-store app while shopping.

Who are the typical AEO app users?

• 15-25 year-olds, both male and female.

• Mobile-savvy: Easily navigate digital media and often use apps for problem-solving or
convenience (Tode).

• Loyal customers who want to:

- Feel connected with the brand (Tate).

- Earn and check exclusive discounts, sales, and benefits (Tate).

What users would most likely have the AEO app?

• Teenage and young adult women, ages 15-30.

• 56% women use retail apps, compared to 44% men, via AppLift survey (Tate).

• Brand loyalists, who visit an AEO store several times a month and enjoy immersing themselves in
the AEO experience through in-store, online, and mobile features (Tode).

• Consumers who might not be brand loyalists, but want to be engaged in companies that they like.
They actively look for brands that can give them this experience (“American Eagle Outfitters…”).

• Consumers who want to be self-sufficient (Able to compare prices, browse product info & reviews,
etc.)(Halpin).

• Consumers with access to a disposable income that allows them to shop fairly often ($50,000 -
$79,000 on average) (Tate).

Sources:

1. Tode, Chantal. "American Eagle Outfitters Addresses On-demand Mindset with In-app Reservations." Mobile Commerce Daily RSS. 26 June
2015. Web. 28 Nov. 2015.

2. "American Eagle Outfitters: Getting to Millennials Through Multi-Channel Marketing and Data." Insights and Outcomes. Teradata, 8 May 2014.
Web. 28 Nov. 2015.

3. Tate, Ashley. "Who Uses Retail Mobile Apps?" AppLift. 4 Sept. 2015. Web. 16 Nov. 2015.

4. Halpin, Nancee. "Why Consumers Use Retail Mobile Apps While Shopping." Business Insider. Business Insider, Inc, 13 Aug. 2015. Web. 16 Nov.
2015.

User Research: In-Store Shopping Pain Points Survey

Our method & goal: A short survey was given to users to discover biggest pain points for in-store shopping experience, and how often retail apps are used while shopping.

• Users surveyed:

- 10 Users: Female: 8; Male: 2

• Ages:

- 13-17: 0 users

- 18-24: 5 users

- 25-34: 3 users

- 35-44: 1 user

- 45-54: 1 user

• Uses Store Apps While Shopping:

- Yes, often: 2/10 users

- No, not interested/not aware of app: 2/10 users

- No, but would reconsider if certain features were available: 6/10 users

- Mentioned certain features: Fitting room assistance, self-checkout function,
checking stock of an item size.

• Common obstacles for making a purchase:

- Unable to find preferred size/color on rack: 5/10 users listed this as biggest obstacle

- Crowded checkout line: 3/10 users listed this as biggest obstacle

- Crowded fitting rooms frustrate trying items: 2/10 users listed this as biggest obstacle

2. Key Considerations and Project Goals:

Key Considerations

Based on user research and AEO UX Team suggestions, the key considerations addressed in our scenarios are:

1. Scan Barcode & Check In-Store Stock of Item Size/Color: Reduces pain point of
not finding preferred size/color on the rack and finding an associate to check if store
is out-of-stock.

2. Enhanced Fitting Room Experience:

1) “Share My AEO” – Social feature to allow customers to share and gather
feedback about what they’re trying on from friends and family who aren’t shopping
with them.

2) “Need Help in Fitting Room” – Reduces pain point of needing a different size/color
while in a fitting room.

3. Self-Checkout: Reduces pain point of standing in a long line to checkout.

Our research leads us to believe that consumers who use retail apps want an app that will help them to shop faster and “smarter”, by saving them money with exclusive discounts and/or giving information on current sales and promotions, and helping customers to find information about the stock of a desired item. It’s important to help users to feel self-sufficient while not distracting from their in-store shopping experience.

These key considerations and goals were created as a group after conducting an informal competitor analysis and reviewing our research.

3. Personas and Scenarios:

Personas: Mary & Sara

These personas are in the AEO target demographic, and the demographic most likely to use retail mobile apps while shopping in stores. The scenarios illustrate our three key considerations for reducing the most common pain points of in-store shopping.

Mary is 20 years old, and is a full-time university student with a part-time job. In her free time, she loves to go out shopping. However, her course work and job schedule does not leave her with a lot of time to shop, so she wants to be as efficient as possible when she goes shopping. Mary does a lot of shopping on American Eagle Outfitter’s Web site and on the AEO mobile app when she cannot visit the store, and enjoys browsing the selections for fun. When she shops online, Mary cannot always determine how an item will fit her, and has had to return or exchange items before. When she discovers the “Reserve, Try & Buy” feature, Mary is excited to try it, as it will make shopping in the store more convenient for her limited free time. Her biggest pain points while shopping in stores are standing in long lines to buy only a couple of products, and leaving a fitting room just to exchange a size or color and wait to try it on again.

Sara is a 16-year-old full-time high school student. One of her favorite past-time activities is to hang out at the mall with her friends and she likes to to show off her shopping experience. They all enjoy browsing through the clothing stores together, trying on the new arrivals, and showing off outfits to each other. Sara’s parents allow her to buy one or two items during each visit to the mall. They encourage her to be a “smart shopper” by taking advantage of loyalty programs. Sara has her own American Eagle Outfitters account, and always checks in when she visits her favorite stores to see what discounts and other benefits that she can get. She usually makes purchases based on in-store discounts and special offers to save money and to gain loyalty points, as these make her feel like a savvy shopper. Sara enjoys making her shopping experience social, both inside and out of the stores, and always looks for ways to share her experience and her purchases. Her biggest pain points when shopping in stores are not finding her size on the rack and being unable to determine if the store has more in stock, and being unable to get an opinion on what she is trying on in the fitting room at the time.

Scenario: Mary

Christmas is coming, and Mary wants to buy some new clothes from AEO. She opens the mobile app and finds a lot of new arrival products that she is immediately interested in buying. Mary plans to visit the store to try on the items, so she uses the “Reserve, Try & Buy” feature to reserve an AEO Prescott Sweater at the store closest to her. She goes to the store when she receives the message that her order is ready for pick-up. At the store, Mary speaks with an associate to pick up her reservation and to open a fitting room. When she tries on the sweater, Mary finds that the size is not right. She uses her AEO in-store app to alert an associate to exchange the size for her. After easily getting a different size without leaving her fitting room, Mary is very satisfied with the sweater. She leaves the fitting room and browses for 2 more items to purchase. Since there is a line for the registers and she only has 3 items, Mary decides to use the in-store app’s self-checkout feature, and to pay with her credit card in the app. Mary is very happy with her self-sufficient shopping experience and continues to be a loyal AEO customer.

Major Tasks:

Mobile App: “Reserve, Try & Buy”

In-Store App:

1. Barcode Scanner

2. Fitting Room Assistance – Request different size

3. Self-Checkout Process

Scenario: Sara

Sara is at the mall with her friends, and they are visiting AEO to try on outfits and find an item to purchase. As a loyal shopper, Sara opens the mobile app when she enters the store and checks in to view the current special offers. She receives AE Rewards points for checking in, and is notified that there is a “Buy One, Get One 50% Off” sale on sweatshirts, sweatpants, and sweatjackets. Sara encourages her friends to browse those items to “get a good deal.” Sara finds a shirt that she likes, but her size is not on the rack. She wants to know if the store has more of her size in stock, so she scans the item with the app’s barcode scanner to view the product page. She selects her size and preferred color and sees that the store is, unfortunately, out of stock for that item. Sara finds a cozy sweater that she wants to buy, and tries it on in the fitting room. She wants her mom’s feedback, who is not shopping with her, and uses the in-store app’s social feature to share a photo of herself wearing the sweater. Her mom says that the sweater looks good, and Sara decides to buy it and a second sweater in a different color to take advantage of the sale. She checks out at the register and is satisfied with her social shopping experience.

Major Tasks:

1. Check-In To Store

2. AE Rewards & Special Offers

3. Barcode Scanner

4. Check Item Size In Stock

5. Social Feature: Fitting Room Feedback

I created the persona and scenario for “Sara” and oversaw the creation of the persona and scenario for “Mary” to ensure that it was cohesive to our project goals and design concepts.

4. Brainstorming and sketching:

I created the following sketches for the initial concept of “Sara’s” scenario. These include a simplified task-flow map of interactive elements and a concept for a “Wish List” feature that was later dropped (User research showed that this element was not a necessity to solve shopping pain points, and my group decided to allocate time, effort, and resources for this feature into other critical features.).

5. Wireframes:
I created the following wireframes for this in-store app project using Photoshop (CC) to show design decision concepts and main navigation elements.

Left: Main Page, Middle: "My AEO" Menu, Right: "Find Help" Menu

Left: AEO Social Page, Middle: Main Page, Right: Self-Checkout - Tutorial, Step 1

6. Visual Mock-Ups:

These mock-ups showcase the look of the final designs and how the interactions would be implemented. The mock-ups, built by my teammate Xingyi Zhao, follow the scenarios as a showing of the key considerations and design solutions:

Sara's Scenario:

In her scenario, Sara arrives at an AEO store and, after being prompted to use the in-store mode, wants to check in to this specific store.

1. Sara taps “Yes” on the mobile app’s alert to open the in-store app.

2. Once it loads to the main page, she taps the hamburger menu icon to navigate to the check in page.

1. Sara taps “Check In” on the menu to navigate to the check in page.

2. Since she is not signed in, Sara enters her account information and taps “sign in” to sign in to her AEO account and to check in to this AEO
store.

The check in function automatically navigates to the “My AE Rewards” page upon completion, to show the user that they have received points for checking in. Sara looks at her points, and wants to see what the current deals are inside this AEO store.

1. She taps the “hamburger” menu icon.

2. She taps “In Store Deals” and reads over the page.

3. Sara finds a shirt that she likes, but the size is not on the rack. She wants to know if the store has her size in stock, and taps the
barcode scanner to open the scanner.

Scanning a product barcode automatically opens the product’s information page.

1. Sara taps the “Size” button to open the pop-up menu.

2. She taps her preferred size, “S”, and the menu closes.

3. She taps the “Color” button to open the pop-up menu.

1. Sara taps the “Color” button to open the pop-up menu.

2. She taps her preferred color, “Clouded Ink”, and the menu closes.

3. The app automatically searches this info to the store’s inventory, and quickly displays that the item is out of stock.

Sara is tying on a sweater in a fitting room. She is shopping alone, but wants her mom’s opinion. The AEO in-store app can help her!

1. Sara taps “AEO Social” on the bottom navigation bar.

2. The AEO Social page opens, showing ways for AEO customers to connect to the brand and each other. Sara taps “Share My AEO” to share a
photo.

3. She positions the camera and taps to capture the photo, then taps on the chat bubble icon to share it.

1. On her AEO Contacts page, Sara taps her mom’s account name from a filtered list.

2. A chat opens, and Sara’s photo is shown in the conversation. Sara’s mom gives her opinion of the sweater, and Sara decides to buy the
sweater.

Mary's Scenario:

In her scenario, Mary is in the fitting room, and wants a different size in a sweater that she’s trying on.

1. Mary taps “Find Help”

2. She selects “Fitting Room Assistant”

3. And scans the barcode of the sweater.

1. Mary taps the color that she wants .

2. Then, taps the pop-up menu to select the size that she needs.

3. She swipes her finger to the left to continue.

1. Mary is prompted to enter the number of the fitting room she is in. The number is posted inside the room.

2. She taps “Fitting Room Number” to open the pop-menu.

3. She taps to select the appropriate number.

4. She taps “Submit” to submit her request for assistance. A message tells her that the associate will come to her with her sweater of choice.

Mary is ready to checkout, and wants to use “Self-Checkout”.

1. Mary taps “Self-Checkout” in the bottom navigation bar.

2. She reads the 3-page tutorial of the self-checkout process, and swipes to the left (or right) to view the 3 pages of the tutorial.

With an understanding of the process, Mary is ready to begin self-checkout.

1. She taps “Get Started” to start the process.

2. Mary scans each of her 3 items with the barcode scanner. Items appear below the scanner.
3. She taps “Submit” when she is done scanning each item into the app.

4. Mary taps “Edit” to open the edit function (Select an item to remove it from the list.).

1. Mary taps “Cancel” to close the edit function.

2. She reviews her list again, and taps “Checkout” to being payment for these items.

3. Mary sees that she has two options for finishing the checkout:

a. To enter the App Express line and pay at this register; or,

b. Pay in the app and visit the App Express register to have an associate finalize and bag her purchase.

4. She chooses the second option, and taps “Scan” to scan her credit card into the app.

1. Mary captures her credit card into the app with the open scanner.

2. She is prompted to enter the remaining security information, and taps “Done” when finished.

3. Mary enters her billing address information and taps “Save” to save the information to her account and continue the checkout process.

1. Mary reviews her checkout information and taps “Place Order” to submit her payment, and the sale information to AEO.

2. She is shown a digital receipt, which is saved in her account’s “Purchase History” (in “My AEO”). Mary taps the “X” button to close the receipt
and to return to the in-store app’s main page.

I created the visual mock-ups for the “My AERewards” page and the screens for the “Find an Item In Stock” feature in “Sara’s” scenario, as well as the pop-up menu elements for the main navigation.

Project results:

• User testing feedback: Users were asked to complete the tasks outlined in each
scenario, and were given static wireframes of the first scenario and an interactive
wireframe of the second.

- “[On the Main Page, it’s nice that] they list the hours of the store that I’m in and that there’s a picture of the store. And that in-store deals are right there. It hits me with things that I might be interested in.”

- “Navigating seemed easy. Everywhere that I thought to click, it followed all of the
obvious cues. Nothing about it seemed out of the way.”

- “This looks very well thought out. It’s so creative and well-tuned to pain points and
how to solve them. I would want to use this app if I was in an American Eagle
store.”

- Overall, our navigation was straightforward. Users were able to complete tasks in a
timely manner with minimal confusion.

- Our in-store checkout process is raw, as expected, but “everything makes sense.” - Users appreciated our placement of a 3-step tutorial at the start of the self-
checkout process with a button to skip to the first step of the checkout.

- Users unanimously agreed that the in-store app features made them feel self-
sufficient with shopping, and that feeling self-sufficient would encourage them to
purchase an item.

• I myself conducted a usability test with one user (female, 25) using the methods a
mentioned above. Due to remaining time constraints, more users could not be
recruited. However, the usability test was successful overall.

• Project grade: The professor gave my team an “A” for the project and asked for a
copy of our project files to showcase our work as an example for future students. He
praised our dedication to research and our attention to detail with our presentations
and visual mock-ups, citing our project one of the best complete projects he’s seen for
the course.

What I learned from this project:

• Preliminary research makes for stronger designs. It is absolutely critical in order to gain
a thorough understanding the problem that you’re solving through your designs, and
research aids in supporting your design decisions to your team and your client.

• Time management is also crucial when deadlines are tight. In this case, it was helpful
to break the project down into weekly goals, with team meetings held throughout to
ensure the work is being done and everyone understands where we are with the
project and what is left to do in the time remaining.

• Open communication with teammates is helpful in building constructive collaboration
and trust.

• Setting a foundational goal at the start of the project can help you to focus your
research and your design work. This focus can help you to work more efficiently and
more effectively toward meeting the project goals.