Challenge Summary
Welcome to "BeamTail - Retail Shopping Innovation Apps Design Concepts Challenge". This challenge purpose is to create design concepts for our new mobile application called BEAMtail that focused on changing your experience in retail environments by combining an extremely easy to use mobile application with a newer technology device called a BEAMPro (by Suitable Tech). At the end of this challenge, we are looking for the best UI/UX design for the application.
IMPORTANT!! Checkpoint/1st Round will run fast, make sure to pay attention to the timeline!!
Round 1
01. Login Screen
02. Starting/Dashboard Screen
03. User Case Scenario #1 - "Get an Expert!" screen, Introduction Screen
04. User Case Scenario #1 - "Get an Expert!" screen , Step 1
05. User Case Scenario #1 - "Get an Expert!" screen , Step 2
06. User Case Scenario #1 - Get an Expert screen, Step 3
Round 2
01. Login Screen
02. Starting/Dashboard Screen
03. User Case Scenario #1 - "Get an Expert!" screen, Introduction Screen
04. User Case Scenario #1 - "Get an Expert!" screen , Step 1
05. User Case Scenario #1 - "Get an Expert!" screen , Step 2
06. User Case Scenario #1 - Get an Expert screen, Step 3
07. User Case Scenario #3 - Shop the World! screen 1
08. User Case Scenario #3 - Shop the World! screen 2
Bonus Screens (Not Required)
09. User Case Scenario #2 - Phone a Friend! screen 1
10. User Case Scenario #2 - Phone a Friend! screen 2
BEAMtail is a mobile app focused on changing your experience in retail environments by combining an extremely easy to use mobile application with a newer technology device called a BEAMPro (by Suitable Tech).
Regarding BeamPro :
It's very important for you to understand what a BEAMPro is and can do so please visit this site and take the time to watch these two short videos here and here detailing how others are already using this smart presence technology to reimagine a physical experience through better technology.
What does the BEAMtail Mobile App do?
BEAMtail helps you accomplish 3 unique things Each will have a detailed user experience below:
1) Get an Expert! Access and schedule time with an industry expert that will join you via a BEAM smart presence robot to transform your retail experience
2) Phone a Friend! Ask a friend for advice, now! Your friend will magically appear on the BEAM inside the store you’re in
3) Shop the World! Shop an Exotic Retail Location, Remotely from Anywhere on Earth tell the app what you’re shopping for and shop exotic locations via a BEAM, from your couch!
Screen Requirements:
01. Login Screen
- Featuring an easy Social SignIn (make it beautiful and visual!)
- we need a logo for this app and it should be featured on this screen
- Remember, the name is "BEAMtail" and it should inspire the feeling of movement, fluidity, and travel this app brings people together and allows you to be 'transported' to other parts of the globe with a push of a button.
- We need a screen and logo that captures these feeling!
02. Starting/Dashboard Screen
- Once logged in, a user can navigate to 1 of 3 available paths : "Get an Expert!", "Phone a friend!", or "Shop the World!"
- Let's see some great icon work, subtle fonts, and bright but clean colors here!
- This is the real start of the user journey so make it easy and fun to use!
03. User Case Scenario #1 - "Get an Expert!" screen
- Introduction screen, a simple screen (either with image of an expert in the background or designed simply non busy background) with the large icon of the Search + Question Mark icon
- Text on page to read: "What can our experts help you do?"
- Show some space/form so a user can type in what they are searching for AND maybe show some suggested searches or categories down the side as well (example of suggested searches can be things like "meal planning", "the perfect outfit", "new pair of jeans", "workout sneakers")
- On this screen have the copy 'Wedding Dress' typed into the search area as if the user was searching for that term.
- ****NOTE**** It would be very helpful for the user to see a progress bar down this entire User Path to showcase certain steps the user will need to take in order to get time with their expert :
* Step 1 - Choose Your Store
* Step 2 Select - Your Expert
* Step 3 Schedule - Time with Your Expert
04. User Case Scenario #1 - "Get an Expert!" screen, Step 1
- Step 1, Choose Your Store screen step
- This screen is what a user would see after they typed in 'wedding dress' On
- this screen a user would be able to:
a. Visually see the wedding boutiques in their area appear on the screen, with the following text that user can read: "Wedding boutiques hip like you, using BEAMtail"
b. Each location (visually show 3 to 5 on the screen) should have the following :
* Name of the store in larger font
* Contact information (phone, web, social, store hours)
* Icon that indicates you can view a map
* Colorful Button with copy 'That's My Store!' which would allow a user to select a particular store
05. User Case Scenario #1 - "Get an Expert!" screen, Step 2
- Step 2, Select Your Expert step
- This screen allows a user to visually see the Experts they could book to help them with their shopping experience: For this screen show the user 3 potential choices, each choice should have:
a. Fun Image of the Expert (headshot or action shot)
b. Their Name
c. A quote from the Expert
d. Their rating (This is important), show some sort of star rating or rating system 5 stars, 5 ‘BEAMs’ something to show how the user community views this expert.
e. Short copy on "Right now I am so into _______________" describing what the expert loves right now
f. Can likely use a "See Success Stories" element so a user could tap or click and see what the Expert has done for BEAMtail users
- Example Copy and Image just for inspiration, please do not copy this style! (Check documentation References.zip)
06. User Case Scenario #1 - Get an Expert screen, Step 3
- Step 3, Schedule Time with Your Expert Step
- Here a user gets to see an easy shared calendar interface that details:
* When the store they selected is open
* When the Expert is available (also show when the Expert is already booked) - It would be nice if the app, visualized and suggested 2 or 3 times for the user where the storewas open and the expert is available to make it easy on the user!
- A user should be able to make their selection from this page and complete the booking.
- *** As a bonus *** It would be great to see a confirmation modal window pop up that confirmed the details with the user some
- simple design and copy like: Congrats (User Name)! You’ve booked time with BEAMtail expert Lisa Kennedy for:
* Saturday, January 24th
* 11AM to 12:30 PM (EST)
* Cymba New York City,
- A confirmation email has been sent to user.name@gmail.com Please arrive 10 minutes early to your appointment and enjoy your BEAMtail experience!
- **** REMEMBER **** We discussed the progress bar in this section, please make sure your design shows us the progress bar through completion of scheduling the BEAMtail appointment.
07. User Case Scenario #3 - Shop the World! screen 1
- Here we see a screen with the largest item being a field for you to tell teh BeamTail APP what you are looking for.
- The field can also include a search / filter functionality to help the user narrow down what they are looking for...but overall we are going for simplicity here.
- Underneath this field you can have seasonal suggestions for what a shopper might be looking for.
* For instance recent seaasonal items might have been Christmas ideas, New Years Eve fashion and upcoming seasonal events might be Valentines Day.
* For this example...a user types in "wedding dress" into the field to indicate what they are looking for.
08. User Case Scenario #3 - Shop the World! screen 2
- After hitting 'enter' on what They were looking for the user would be presented with 3 featured stores where they can shop for this item and a 4th item which is a "find a store" button if one of the three store options is not what the user is interested in. For the city/store options
- We're thinking that they can be 3 visual choices (bold image + short copy) to then decide which store she wants to shop in copy and images provided below:
a. Yumo Sumasari Tokyo, Japan: Daring elegance meets unsurpassed sophistication. Look beautiful, be bold.
b. Cymba New York City, United States of America: Chic Manhattan styles that always wow! Be the bride and own your day.
c. Spusa Martino Milan, Italy: Modern European flare meets oldworld stylings.
- Simple, beautiful, amazing dresses, just for you.
- ** You can use images from these stores as long as you note the source in your submission.
- Also...it might be a good idea to use stock imagery for the cities that these stores are in. (Tokyo, New York, and Milan)
BONUS SCREENS:
09. User Case Scenario #2 - Phone a Friend! screen 1
- Here we need a clean, visual display, of which friends are available to 'BEAM' right now
- This screen will looks like a Facebook screen that shows which friends are online or on mobile right now, BUT, let's make this visual instead!
- We do NOT need to show a huge list of friends (like Facebook might show), instead a screen should show 5 or 6 friends (visually) and we need to see easily, which ones are available to chat, and which are not
10. User Case Scenario #2 - Phone a Friend! screen 2
- This screen can be very simple, Just show a human being on the phone the way you would see a friend during a Facetime chat or Skype chat Think
- About the icons needed here to do things like "End the Call", "Comment", "Thumb Up or Thumb Down", what do you think???
- What simple features would you want here if you could phone a friend and instantly have them appear via a BEAM smart presence robot? Keep this part SIMPLE!
- Not many features are needed here so focus on making it clean, crisp, and fun looking!
Documentation :
- Inspiration.zip
- User Case Scenarios.zip
- References.zip
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Design Guidelines
- Simple and Fun
- Not many colors needed, but use of bright gender related (male and female) colors are appropriate
- Use of Creative Icons to drive the experience, lead the user with ease and whimsy!
- Orientation : Up to designers.
- Use 1080 x 1920 px resolution (iPhone 6 Plus)
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
Design Considerations
- The application should be easy, fun and ease to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
Target Audience
- World wide shoppers.
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.