Challenge Summary
Welcome to Quantum Gravity - eCommerce Site Mobile App Wireframe Challenge.
In this challenge, we are looking for wireframe (Axure) solutions based on requirements from our client. We’re also looking to the community to come up with interesting ideas for the workflow - we’re absolutely open to creative solutions!
At the end of this wireframe challenge, we are looking to have a complete solution for the user experience and flow of the application.
Round 1
Submit your design for a Checkpoint feedback:
1. Product catalogue
2. Fitting room / virtual try on
3. Shopping cart
4. Account management
Notes.jpg: Any comments about your design for the Client
Round 2
Final Design plus any Checkpoint feedback:
1. Product catalogue
2. Fitting room / virtual try on
3. Shopping cart
4. Account management
5. Fashion consultant
6. Education
7. Search
Notes.jpg: Any comments about your design for the Client
Challenge Description:
Quantum Gravity mobile app will create an interface similar to the experience on Tinder, Spring, Pinterest and Instagram. This interface will have the following qualities:
- Instagram inspired product catalogue
- Swipe to browse and tap to explore product details (similar to profile browsing on Tinder)
- Swipe to buy (similar to Spring)
Wireframe Expectations:
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all use cases mentioned in challenge details below.
- You MUST use wireframes note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Mobile platforms:
in order of priority
- iOS
- Android
Screen Sizes Resolution:
- iphone 6 (1334 by 750)
- iphone 6 plus (1920 by 1080)
- Samsung Galaxy 5 (1920 by 1080)
Required Features:
Social sharing integration
- Facebook
- Twitter
- Instagram
- Google+
Required Screens:
1) Product catalogue
- Tinder style swipe browsing
- Tap to view ‘product details screen’
- Swipe right to get to ‘product options screen’ to choose different color or size options for this product
- Swipe left to return to the ‘product details screen’ from ‘product options screen’
- Swipe left on ‘product details screen’ to view ‘product video screen’:
-- ‘Product video screen’ will start playing a short product features video
- Swipe right on product details video screen to get to product details screen
- Swipe up to try product with virtual try on
- Swipe down to re-enter product catalogue on product details screen
- Tap to go from product details to product catalogue
2) Fitting room / virtual try on
- Once customer has finished the fitting (face measurement) process, the app should remember their face measurements
- Fitting / face measurement should be done using a credit card or similar standard dimension things and asking the customer to hold it against their face, maybe at two or three specific angels
- Post pictures on social media from Fitting room with product overlays
- Click and save picture from Fitting room with product overlay
3) Shopping cart
- View items in cart
- Complete purchase using In-App Purchase based upon Apple or Android Marketplace OR Apple Pay
- Provide order id, shipping and delivery dates
4) Account management
- Order history
- Product returns
- Login credentials
- Payment info
- Size / fit measurements (linking to this functionality as defined in the Fitting room/ virtual try on)
- App support / contact us
-- Email
-- Call
-- Tweet
- Notifications
-- Updates for your orders, credits and cart actions
-- Special sales alerts
5) Fashion consultant
- Live interaction with fashion consultant for tips on style, fit and match (either with the attire or occasion)
- Order by phone
- Other support issues
6) Education
- Videos catalogue educating the customer about what quality means and how to assess quality in competitive products
7) Search
- Search by color
- Search by uploading a picture of eyewear to view similar style eyewear
- Search by style match for face type
Note: Glasses do not come in varying sizes. A great location to pickup this knowledge is www.warbyparker.com (Do not copy this website its just for reference):
- Example 1 (Please see sizing section)
- Example 2
Target Audience:
- The target market for Quantum Gravity Apps are consumers in the younger to middle-aged demographic between the ages of 25-35, people who are fashion-conscious, socially active, and web savvy. In short, they are status oriented, take pride in their appearance, and like to purchase the latest trendy product that they can show off to their friends and society in general; however, this group also bases many buying decisions on the approval of friends and family.
Judging Criteria:
Your submission will be judged on the following criteria:
- User experience
- Completeness and accuracy of the areas of functionality and content
- How well your wireframes provide a consistent user flow and clear information architecture for the application
Submission & Source Files:
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.