Challenge Summary
Welcome to The LIDS Mobile Phone App Design Challenge!
We are looking for your help in designing a new mobile app for LIDS (lids.com). The goal of this challenge to create clean, intuitive interfaces that a wide range of users can interact with successfully on an Android or iOS phone device.
Your design should consider finger/touch points and reduce risk of touching unintended areas. Your design should not create any confusion, but instead display and beautiful and intuitive experience. It should also be up-to-date in design/style of other current applications available in the Apple & Google Play stores today. We are very interested in your creative design and are looking for ideas of different design to support the functionality we show in wireframes. We are NOT looking for designs applied directly to our wireframes. We want to see how you would envision this app and how your design would feel.
The target demographic is young males aged 15-25, but also consider a wide range of users who will be using this app to find stores, track loyalty points, view special promotions, and explore LIDS’ social media feeds, and more.
To be successful in this challenge you must give the appropriate consideration to native functionality, and reference the provided style guide and documentation.
Screen 2: Create Account
Screen 3: Home - Logged In + nav content
Screen 4: Loyalty & Rewards - Logged In
Screen 5: Social Landing – Twitter
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Screen 1: Landing
Screen 2: Create Account
Screen 3: Home - Logged In + nav content
Screen 4: Loyalty & Rewards - Logged In
Screen 5: Social Landing - Twitter
Screen 6: Find a Store - List View and Map View
Screen 7: Gift Cards
Screen 8: Profile + overlay (initial view of this screen includes overlay, click OK to close overlay)
Screen 9: Preferences
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The LIDS Sports Group, operating within Hat World, Inc., is comprised of the LIDS retail headwear stores, the LIDS Locker Room specialty fan retail chain, the LIDS Clubhouse retail stores and the Internet businesses, lids.com, lidslockerroom.com, lidsclubhouse.com, lids.ca.
Operating out of Indianapolis, Indiana, the retail businesses make up more than 1,000 mall-based, airport, street level and factory outlet locations nationwide, and in Canada and Puerto Rico. LIDS retail stores offer officially licensed and branded headwear of collegiate teams, major professional sports teams, as well as other specialty fashion categories in the latest styles and colors. LIDS Locker Room is a mall-based retailer of sports headwear, apparel, accessories, and novelties which also operates under the Sports Fan-Attic and Sports Avenue retail concepts. Most LIDS and LIDS Locker Room stores also offer custom embroidery capability. LIDS Clubhouse operates team-specific professional sports and university athletics retail stores and e-commerce websites. Hat World, Inc. is a subsidiary of Genesco Inc.
Screen Sizes:
- Mobile Resolution 750px x 1334px.
- If you create any icons be sure to do so in vector format, so when we resize, graphics will still look sharp!
Branding Guidelines:
- See attached Style Guide and fonts.
Design Goals:
- Consider native functionality and include notes if there are any differences to call out between the Android and iOS mobile phone experiences. Your design should consider finger/touch points and reduce risk of touching unintended areas. It should also be up-to-date in design/style of other current applications available in the Apple & Google Play stores today. We are very interested in your creative design and are looking for ideas of different design to support the functionality we show in wireframes. We are NOT looking for designs applied directly to our wireframes. We want to see how you would envision this app and how your design would feel.
- Apply branding guidelines to functional elements as outlined in wireframe.
- Appropriate use of primary and appropriate secondary colors to highlight areas of importance, calls to action, links, etc.
- Consistent use of primary, secondary, and tertiary buttons
Required Content:
- The screens you design will act as templates for additional screens with similar content, so please consider this when naming and arranging layers in the source files.
- Please reference the notes provided here and on the wireframe screens.
Screen 1: Landing
http://ow1jk3.axshare.com/#p=00_-_landing_-_first-time_user__logged-out_view
- First screen a new user or logged-out user will see upon opening the app
- User must choose one of these options to proceed: Create Account, Log In, or Continue as a Guest
Screen 2: Create Account
http://ow1jk3.axshare.com/#p=01_-_create_account
- All fields are required for this form
- By default, opt-in to receive promo emails is selected
- User should be able to toggle a show/hide password functionality to minimize user error while creating a password
- This form utilizes transitioning labels, so please note that when user starts typing in a field, the label that’s currently in the input field moves over to the right rather than disappearing. This way, the user can still know what to enter in that field. Please demonstrate this or similar functionality in the UI, with the main purpose being to save space without leaving the user guessing one the label hint disappears.
Screen 3: Home - Logged In + nav content
http://ow1jk3.axshare.com/#p=03b_-_home_-_logged_in
- Please style the nav in a way that differentiates the 3 types of choices:
1. Logged-in User (this links to profile info) - or if user is logged out, this is “Log In | Creat Account”
2. Main content sections (Home, Favorite Teams and Brands, etc)
3. “Change Country” - more of a setting that user can toggle to view the Canadian version.
Screen 4: Loyalty & Rewards - Logged In
http://ow1jk3.axshare.com/09_-_loyalty___rewards_-_logged_in_view.html
Dashboard should contain these main elements:
- Loyalty member date (loyalty member since..)
- Membership Type (Basic or Access Pass)
- Renewal Date
- Points Earned
- Points until next reward
- Reward ($10 off coupon code)
- CTA for upgrade/renew/purchase membership
- Area for Rewards Program info (this content will be pulled into the app from existing responsive website, so please use the provided content [access-pass.jpg] as-is)
Screen 5: Social Landing - Twitter
http://ow1jk3.axshare.com/#p=05b_-_social_landing_-_twitter
- Social landing screens act as a hub for toggling between Facebook, Twitter, Instagram, YouTube, Pinterest, and LIDS Blog
- User lands here by clicking on social media content from home page, with this example showing that they clicked on Twitter content.
- This view shows their entire Twitter feed and is intended to be a long scrolling screen.
Screen 6: Find a Store - List View and Map View
http://ow1jk3.axshare.com/#p=07a_-_find_a_store_-_stores_near_me_-_location_on
- This list is location-based, so when the device’s location is on, this screen is automatically populated, defaulting to a list view.
- User should be able to...
-- Tap the result itself to view store details (shown in another view)
-- Designate favorite store with “Set as my store” for one store at a time
-- Toggle or left-swipe over to map view of the results, showing stores marked on a specific view of map (like 50-mile radius). This is intended to be a native map view, so Google maps is fine to use.
-- Tap “Looking for other locations? Click here” for extended search options on another screen
Screen 7: Gift Cards
http://ow1jk3.axshare.com/#p=08_-_gift_cards
- Landing screen for Gift cards should show a list of saved gift cards that includes:
-- Card #
-- Ability to copy # to paste into an online order
-- PIN #
-- Balance amount
-- Ability to delete from list
-- Link to view more
- Check Balance CTA
Screen 8: Profile + overlay (initial view of this screen includes overlay, click OK to close overlay)
http://ow1jk3.axshare.com/#p=10_-_profile__initial_view_after_new_account_creat
- User will see a welcome message after creating new account, please provide this view in your designs
- Can either choose OK and remain in Profile section, or Not Now to be taken to home page
- Click OK, and please design the Profile page to include CTA’s for:
-- Favorites
-- Contact Info
-- Preferences
-- Order History
Screen 9: Preferences
http://ow1jk3.axshare.com/#p=10d_-_preferences
- Provide a way to toggle on/off opt-ins for:
-- SMS
-- Promo emails
-- App notifications
---- Provide link to Change Password
Supporting Docs:
- Style guide (BrandGuidelines_LIDS_2016.pdf)
- Logo and fonts (Fonts & LIDS_logo_655.eps)
- access-pass.jpg (access-pass.jpg)
- Wireframes:
-- Here are the wireframes for this challenge: http://ow1jk3.axshare.com/
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
Judging Criteria:
- Creativity in the design that reflects an intuitive and easy to use mobile app. We are looking for creativity not a design applied directly to these wireframes.
- How well your design match the UX
- How well you execute the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
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
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD file) or Sketch.
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.
We are looking for your help in designing a new mobile app for LIDS (lids.com). The goal of this challenge to create clean, intuitive interfaces that a wide range of users can interact with successfully on an Android or iOS phone device.
Your design should consider finger/touch points and reduce risk of touching unintended areas. Your design should not create any confusion, but instead display and beautiful and intuitive experience. It should also be up-to-date in design/style of other current applications available in the Apple & Google Play stores today. We are very interested in your creative design and are looking for ideas of different design to support the functionality we show in wireframes. We are NOT looking for designs applied directly to our wireframes. We want to see how you would envision this app and how your design would feel.
The target demographic is young males aged 15-25, but also consider a wide range of users who will be using this app to find stores, track loyalty points, view special promotions, and explore LIDS’ social media feeds, and more.
To be successful in this challenge you must give the appropriate consideration to native functionality, and reference the provided style guide and documentation.
Round 1
Screen 1: LandingScreen 2: Create Account
Screen 3: Home - Logged In + nav content
Screen 4: Loyalty & Rewards - Logged In
Screen 5: Social Landing – Twitter
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
All designs to reflect feedback from checkpoint review.Screen 1: Landing
Screen 2: Create Account
Screen 3: Home - Logged In + nav content
Screen 4: Loyalty & Rewards - Logged In
Screen 5: Social Landing - Twitter
Screen 6: Find a Store - List View and Map View
Screen 7: Gift Cards
Screen 8: Profile + overlay (initial view of this screen includes overlay, click OK to close overlay)
Screen 9: Preferences
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The LIDS Sports Group, operating within Hat World, Inc., is comprised of the LIDS retail headwear stores, the LIDS Locker Room specialty fan retail chain, the LIDS Clubhouse retail stores and the Internet businesses, lids.com, lidslockerroom.com, lidsclubhouse.com, lids.ca.
Operating out of Indianapolis, Indiana, the retail businesses make up more than 1,000 mall-based, airport, street level and factory outlet locations nationwide, and in Canada and Puerto Rico. LIDS retail stores offer officially licensed and branded headwear of collegiate teams, major professional sports teams, as well as other specialty fashion categories in the latest styles and colors. LIDS Locker Room is a mall-based retailer of sports headwear, apparel, accessories, and novelties which also operates under the Sports Fan-Attic and Sports Avenue retail concepts. Most LIDS and LIDS Locker Room stores also offer custom embroidery capability. LIDS Clubhouse operates team-specific professional sports and university athletics retail stores and e-commerce websites. Hat World, Inc. is a subsidiary of Genesco Inc.
Screen Sizes:
- Mobile Resolution 750px x 1334px.
- If you create any icons be sure to do so in vector format, so when we resize, graphics will still look sharp!
Branding Guidelines:
- See attached Style Guide and fonts.
Design Goals:
- Consider native functionality and include notes if there are any differences to call out between the Android and iOS mobile phone experiences. Your design should consider finger/touch points and reduce risk of touching unintended areas. It should also be up-to-date in design/style of other current applications available in the Apple & Google Play stores today. We are very interested in your creative design and are looking for ideas of different design to support the functionality we show in wireframes. We are NOT looking for designs applied directly to our wireframes. We want to see how you would envision this app and how your design would feel.
- Apply branding guidelines to functional elements as outlined in wireframe.
- Appropriate use of primary and appropriate secondary colors to highlight areas of importance, calls to action, links, etc.
- Consistent use of primary, secondary, and tertiary buttons
Required Content:
- The screens you design will act as templates for additional screens with similar content, so please consider this when naming and arranging layers in the source files.
- Please reference the notes provided here and on the wireframe screens.
Screen 1: Landing
http://ow1jk3.axshare.com/#p=00_-_landing_-_first-time_user__logged-out_view
- First screen a new user or logged-out user will see upon opening the app
- User must choose one of these options to proceed: Create Account, Log In, or Continue as a Guest
Screen 2: Create Account
http://ow1jk3.axshare.com/#p=01_-_create_account
- All fields are required for this form
- By default, opt-in to receive promo emails is selected
- User should be able to toggle a show/hide password functionality to minimize user error while creating a password
- This form utilizes transitioning labels, so please note that when user starts typing in a field, the label that’s currently in the input field moves over to the right rather than disappearing. This way, the user can still know what to enter in that field. Please demonstrate this or similar functionality in the UI, with the main purpose being to save space without leaving the user guessing one the label hint disappears.
Screen 3: Home - Logged In + nav content
http://ow1jk3.axshare.com/#p=03b_-_home_-_logged_in
- Please style the nav in a way that differentiates the 3 types of choices:
1. Logged-in User (this links to profile info) - or if user is logged out, this is “Log In | Creat Account”
2. Main content sections (Home, Favorite Teams and Brands, etc)
3. “Change Country” - more of a setting that user can toggle to view the Canadian version.
Screen 4: Loyalty & Rewards - Logged In
http://ow1jk3.axshare.com/09_-_loyalty___rewards_-_logged_in_view.html
Dashboard should contain these main elements:
- Loyalty member date (loyalty member since..)
- Membership Type (Basic or Access Pass)
- Renewal Date
- Points Earned
- Points until next reward
- Reward ($10 off coupon code)
- CTA for upgrade/renew/purchase membership
- Area for Rewards Program info (this content will be pulled into the app from existing responsive website, so please use the provided content [access-pass.jpg] as-is)
Screen 5: Social Landing - Twitter
http://ow1jk3.axshare.com/#p=05b_-_social_landing_-_twitter
- Social landing screens act as a hub for toggling between Facebook, Twitter, Instagram, YouTube, Pinterest, and LIDS Blog
- User lands here by clicking on social media content from home page, with this example showing that they clicked on Twitter content.
- This view shows their entire Twitter feed and is intended to be a long scrolling screen.
Screen 6: Find a Store - List View and Map View
http://ow1jk3.axshare.com/#p=07a_-_find_a_store_-_stores_near_me_-_location_on
- This list is location-based, so when the device’s location is on, this screen is automatically populated, defaulting to a list view.
- User should be able to...
-- Tap the result itself to view store details (shown in another view)
-- Designate favorite store with “Set as my store” for one store at a time
-- Toggle or left-swipe over to map view of the results, showing stores marked on a specific view of map (like 50-mile radius). This is intended to be a native map view, so Google maps is fine to use.
-- Tap “Looking for other locations? Click here” for extended search options on another screen
Screen 7: Gift Cards
http://ow1jk3.axshare.com/#p=08_-_gift_cards
- Landing screen for Gift cards should show a list of saved gift cards that includes:
-- Card #
-- Ability to copy # to paste into an online order
-- PIN #
-- Balance amount
-- Ability to delete from list
-- Link to view more
- Check Balance CTA
Screen 8: Profile + overlay (initial view of this screen includes overlay, click OK to close overlay)
http://ow1jk3.axshare.com/#p=10_-_profile__initial_view_after_new_account_creat
- User will see a welcome message after creating new account, please provide this view in your designs
- Can either choose OK and remain in Profile section, or Not Now to be taken to home page
- Click OK, and please design the Profile page to include CTA’s for:
-- Favorites
-- Contact Info
-- Preferences
-- Order History
Screen 9: Preferences
http://ow1jk3.axshare.com/#p=10d_-_preferences
- Provide a way to toggle on/off opt-ins for:
-- SMS
-- Promo emails
-- App notifications
---- Provide link to Change Password
Supporting Docs:
- Style guide (BrandGuidelines_LIDS_2016.pdf)
- Logo and fonts (Fonts & LIDS_logo_655.eps)
- access-pass.jpg (access-pass.jpg)
- Wireframes:
-- Here are the wireframes for this challenge: http://ow1jk3.axshare.com/
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
Judging Criteria:
- Creativity in the design that reflects an intuitive and easy to use mobile app. We are looking for creativity not a design applied directly to these wireframes.
- How well your design match the UX
- How well you execute the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
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
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD file) or Sketch.
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.