Challenge Summary
Welcome to Twirl - Mobile App Concept Design Challenge.
We need your help to come up with design solutions for a fun hybrid mobile application (will work in both iOS and Android devices) addressed to fashion lovers. Users will be easily sharing their outfits with the community, allowing them earning money or reward points through a discoverability system.
Best of luck.
2. Discovery
4. New Outfit Registration (Quick Selfie)
6. Wardrobe
8. Profile
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Login/Register
2. Discovery
3. Outfit Details
4. New Outfit Registration (Quick Selfie)
5. Search
6. Wardrobe
7. Profile
8. Settings
9. Notifications
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this competition is to come up with the look and feel of a mobile application for the fashion industry. You are provided with user stories and existing mockups to follow as reference.
Concept Design Goals
The application implements a crowdsourcing fashion industry use case by advertising unique looks live in the street. Users can market their closet and earn money by selling their style or earn reward points when their outfits get discovered by users in the streets. Fashion brands can gain more visibility in the street and collect statistical data on users preferences in different geographical places.
The most important features you need to keep in mind:
- Discovery view and adding new outfits flow should be a seamless experience.
- Creative new way/interaction of exploring the wardrobe.
We expect the final design will be elegant high end fashion, clean and simple. As of style, it should be colorful, vivid and fun targeted for younger users. Please avoid girlie look & feel as well as cluttered information, we like spacing.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Login/Register
Create login and registration pages. User can register/login using email and password or social connection with Facebook.
The design should be welcoming and fun. Make good use of stock photography.
2. Discovery
See mockup - page 2.
Features
- User should be able to discover nearby items close to him/her.
- Tiles/cards of outfits would be available at first sight, allowing the user to interact with them through likes, comments and sharing.
- The amount of tiles/cards will be unlimited, as long as the user wants to see he/she should be able to scroll/swipe.
- There should be a mechanism to set the proximity distance to discover outfits e.g. 10 feet, 20 feet ~ 500 feet, etc.
- Place a prominent “Post Outfit” button. It will allow the user to take a photo of his/her outfit.
- A tile/card should display the following information:
-- Main outfit photo.
-- User thumbnail and name.
-- Title.
-- Posted time.
-- Distance.
-- Likes, comments, tags.
-- CTA: add to favorites, comment, view whole outfit details.
- The very first tile should be “My Current Outfit”. The discovery view should start with the current outfit displayed as the first tile in order to capture the user’s attention that this outfit is marked as current. User should be able to change the outfit from that tile by navigating to the wardrobe view. The tile should be shown once when the user opens the app, open to other ideas to make sure the user is aware of what the app is showing as current.
First time user
Design an onboarding process through screens to show the user how to use the main screen of the app. This would be displayed only once after a first time login (see page 1).
Navigation
User should be able to access all features through a menu. Design a navigation that includes the logged-in pages.
3. Outfit Details
See mockup - page 3.
This page is displayed after user taps in a tile/card from the discovery page. This view can be part of the discovery view or a separate page.
Features
- User should be able to go back to the previous page (discovery).
- User can see a thread of comments related to the selected outfit. Each comment should showcase author, date/time, comment content. User can enter comments. Design this comments view (see page 9), it could be part of this screen or a separate feature somehow. Suggest what suits best.
- User can see specific information about a specific outfit:
-- Main prominent photo.
-- Title.
-- User information (thumbnail, name).
-- Likes, amount of comments, tags.
4. New Outfit Registration (Quick Selfie)
See mockup - page 4.
The purpose of this page is to save a new outfit entry in the system.
Features
- User can take a picture or select from the stored photos in the phone.
- Add a toggle button to set this as the current outfit or not.
- Add post/save and cancel buttons.
- User can set the following data related to the entry:
-- Title
-- Description
-- Tags per item (see Wardrobe features more detailed information)
-- Mark it as current outfit.
5. Search
See mockup - page 5.
This page allows the user to search for outfits from within the community uploads.
Features
- User can enter long text string indicating the desired search.
- If there are matches for the entered terms, results should be displayed.
- Results should display a list/grid of outfits.
6. Wardrobe
See mockup - page 6, 11, 12, 13.
This is a page available for the logged in user, the cornerstone user assets management. You should please think of a new way of allowing users managing previously added outfits (new, edit, delete). You can use the provided wireframes as inspiration, however we are more interested into finding an UX solution to the features and flow stated below.
Features
- User can see all the created outfits. The layout should divide the items in two main categories: outfits and clothing items.
- The outfits section should display a “see all” button to navigate through all the created outfits. It will displayed the outfits the user has created.
- The clothing items section allows the user breaking down a particular outfit. User can select an outfit, set characteristics for each piece of the outfit such as brand, type (t-shirt, skirt, shoes, etc) and description. Right now we are using “tags” to set these characteristics but we are definitely open to other ideas.
- There should be a mechanism to edit and delete outfits and clothing items. Please show how it would look.
- Place an “add/create” outfit button which will take user to the outfit registration page.
- User should be able to mark an outfit as the current outfit for the day, this should be what the user is currently wearing.
- Design as many screens are necessary to showcase this flow.
7. Profile
See mockup - page 10.
This page host the personal information of the user.
Features
- Display user name and profile picture.
- Display current amount of earned reward points. Also display a “next mission points to achieve” section e.g. “To be discovered 10 times - Unlock next level”.
- Display a badge placeholder. User can have: bronze, silver or golden badges.
- User should be able to set the current outfit quickly from here. Once clicked/tapped, user gets to choose from the existing wardrobe items or to take a selfie to register a new entry and set it as current outfit.
- Place a “add/create” outfit button.
- Place a “Wardrobe” button/link.
- Place a “Settings” button.
- Place a “Invite” friends button/link.
8. Settings
User profile settings administration page.
Features
- Place a “enable/disable account” toggle.
- Place a “hide profile” toggle/button.
- Add links to terms of service, privacy policy and logout.
- Display app version number.
9. Notifications
See mockup - page 8.
This page displays a list of activities the user can check.
- Author.
- Date/time.
- Type of activity (new comment on outfit, new like, etc).
Challenge After-Party
For the winner exclusively; after announcing winners, 1st place designer will engage in a private task to deliver a style guide sheet and an app icon design in several sizes. Keep it in mind for your design organization.
Branding Guidelines
- Branding is open to suggestions. We like this color palette, if you choose to alter it be sure to use tiffany blue as accent color #81D8D0.
- Use Biryani as main font.
- We don’t have a logo yet. You can use a placeholder or create something simple for demo purposes. Make sure it read “Twirl”.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
- Fashion designers, style aficionados. New way of creating a fashion trend by showing off unique styles at the same time a new way for brands to gain visibility. We plan on partnering with retailers as well.
- Targeted to the US only, for now.
- The way users would discover this app would be through downloading the app. Brand partners will promote the app as a way for users to gain rewards when the brand items are discovered, then use these reward points to shop again at the retailer.
Judging Criteria
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- 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
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
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 need your help to come up with design solutions for a fun hybrid mobile application (will work in both iOS and Android devices) addressed to fashion lovers. Users will be easily sharing their outfits with the community, allowing them earning money or reward points through a discoverability system.
Best of luck.
Round 1
Submit your design for a checkpoint feedback.2. Discovery
4. New Outfit Registration (Quick Selfie)
6. Wardrobe
8. Profile
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback.1. Login/Register
2. Discovery
3. Outfit Details
4. New Outfit Registration (Quick Selfie)
5. Search
6. Wardrobe
7. Profile
8. Settings
9. Notifications
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this competition is to come up with the look and feel of a mobile application for the fashion industry. You are provided with user stories and existing mockups to follow as reference.
Concept Design Goals
The application implements a crowdsourcing fashion industry use case by advertising unique looks live in the street. Users can market their closet and earn money by selling their style or earn reward points when their outfits get discovered by users in the streets. Fashion brands can gain more visibility in the street and collect statistical data on users preferences in different geographical places.
The most important features you need to keep in mind:
- Discovery view and adding new outfits flow should be a seamless experience.
- Creative new way/interaction of exploring the wardrobe.
We expect the final design will be elegant high end fashion, clean and simple. As of style, it should be colorful, vivid and fun targeted for younger users. Please avoid girlie look & feel as well as cluttered information, we like spacing.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Login/Register
Create login and registration pages. User can register/login using email and password or social connection with Facebook.
The design should be welcoming and fun. Make good use of stock photography.
2. Discovery
See mockup - page 2.
Features
- User should be able to discover nearby items close to him/her.
- Tiles/cards of outfits would be available at first sight, allowing the user to interact with them through likes, comments and sharing.
- The amount of tiles/cards will be unlimited, as long as the user wants to see he/she should be able to scroll/swipe.
- There should be a mechanism to set the proximity distance to discover outfits e.g. 10 feet, 20 feet ~ 500 feet, etc.
- Place a prominent “Post Outfit” button. It will allow the user to take a photo of his/her outfit.
- A tile/card should display the following information:
-- Main outfit photo.
-- User thumbnail and name.
-- Title.
-- Posted time.
-- Distance.
-- Likes, comments, tags.
-- CTA: add to favorites, comment, view whole outfit details.
- The very first tile should be “My Current Outfit”. The discovery view should start with the current outfit displayed as the first tile in order to capture the user’s attention that this outfit is marked as current. User should be able to change the outfit from that tile by navigating to the wardrobe view. The tile should be shown once when the user opens the app, open to other ideas to make sure the user is aware of what the app is showing as current.
First time user
Design an onboarding process through screens to show the user how to use the main screen of the app. This would be displayed only once after a first time login (see page 1).
Navigation
User should be able to access all features through a menu. Design a navigation that includes the logged-in pages.
3. Outfit Details
See mockup - page 3.
This page is displayed after user taps in a tile/card from the discovery page. This view can be part of the discovery view or a separate page.
Features
- User should be able to go back to the previous page (discovery).
- User can see a thread of comments related to the selected outfit. Each comment should showcase author, date/time, comment content. User can enter comments. Design this comments view (see page 9), it could be part of this screen or a separate feature somehow. Suggest what suits best.
- User can see specific information about a specific outfit:
-- Main prominent photo.
-- Title.
-- User information (thumbnail, name).
-- Likes, amount of comments, tags.
4. New Outfit Registration (Quick Selfie)
See mockup - page 4.
The purpose of this page is to save a new outfit entry in the system.
Features
- User can take a picture or select from the stored photos in the phone.
- Add a toggle button to set this as the current outfit or not.
- Add post/save and cancel buttons.
- User can set the following data related to the entry:
-- Title
-- Description
-- Tags per item (see Wardrobe features more detailed information)
-- Mark it as current outfit.
5. Search
See mockup - page 5.
This page allows the user to search for outfits from within the community uploads.
Features
- User can enter long text string indicating the desired search.
- If there are matches for the entered terms, results should be displayed.
- Results should display a list/grid of outfits.
6. Wardrobe
See mockup - page 6, 11, 12, 13.
This is a page available for the logged in user, the cornerstone user assets management. You should please think of a new way of allowing users managing previously added outfits (new, edit, delete). You can use the provided wireframes as inspiration, however we are more interested into finding an UX solution to the features and flow stated below.
Features
- User can see all the created outfits. The layout should divide the items in two main categories: outfits and clothing items.
- The outfits section should display a “see all” button to navigate through all the created outfits. It will displayed the outfits the user has created.
- The clothing items section allows the user breaking down a particular outfit. User can select an outfit, set characteristics for each piece of the outfit such as brand, type (t-shirt, skirt, shoes, etc) and description. Right now we are using “tags” to set these characteristics but we are definitely open to other ideas.
- There should be a mechanism to edit and delete outfits and clothing items. Please show how it would look.
- Place an “add/create” outfit button which will take user to the outfit registration page.
- User should be able to mark an outfit as the current outfit for the day, this should be what the user is currently wearing.
- Design as many screens are necessary to showcase this flow.
7. Profile
See mockup - page 10.
This page host the personal information of the user.
Features
- Display user name and profile picture.
- Display current amount of earned reward points. Also display a “next mission points to achieve” section e.g. “To be discovered 10 times - Unlock next level”.
- Display a badge placeholder. User can have: bronze, silver or golden badges.
- User should be able to set the current outfit quickly from here. Once clicked/tapped, user gets to choose from the existing wardrobe items or to take a selfie to register a new entry and set it as current outfit.
- Place a “add/create” outfit button.
- Place a “Wardrobe” button/link.
- Place a “Settings” button.
- Place a “Invite” friends button/link.
8. Settings
User profile settings administration page.
Features
- Place a “enable/disable account” toggle.
- Place a “hide profile” toggle/button.
- Add links to terms of service, privacy policy and logout.
- Display app version number.
9. Notifications
See mockup - page 8.
This page displays a list of activities the user can check.
- Author.
- Date/time.
- Type of activity (new comment on outfit, new like, etc).
Challenge After-Party
For the winner exclusively; after announcing winners, 1st place designer will engage in a private task to deliver a style guide sheet and an app icon design in several sizes. Keep it in mind for your design organization.
Branding Guidelines
- Branding is open to suggestions. We like this color palette, if you choose to alter it be sure to use tiffany blue as accent color #81D8D0.
- Use Biryani as main font.
- We don’t have a logo yet. You can use a placeholder or create something simple for demo purposes. Make sure it read “Twirl”.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
- Fashion designers, style aficionados. New way of creating a fashion trend by showing off unique styles at the same time a new way for brands to gain visibility. We plan on partnering with retailers as well.
- Targeted to the US only, for now.
- The way users would discover this app would be through downloading the app. Brand partners will promote the app as a way for users to gain rewards when the brand items are discovered, then use these reward points to shop again at the retailer.
Judging Criteria
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- 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
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
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.