Challenge Summary
Welcome to AppXpress – MESH01 Mobile App Design Challenge!
MESH01 is a platform for field testing footwear, apparel and equipment. We launch a test in our system, choose a set of participants from our tester community, and then send out product samples for them to test. The testers wear the product and submit activity logs, photos, and surveys which are then used to evaluate the performance of the product.
MESH01 is looking to enhance the testers experience by putting the necessary functionality into their hands. Many of our product tests are conducted with testers that are in the field, on the job, hiking in the mountains, running along a river, etc. We need to create a very intuitive, easy to use mobile app that makes it very easy and efficient for the testers to complete requested information versus having to wait until they get home and login to their desktop to do the same.
We have started to build out the mobile framework using Ionic (HTML5/Angular JS). This means that the app will run natively on the mobile device, but will still use web technologies. That means it is NOT an adaptive web application. Keep this in mind while designing.
Round 1
Submit your design for a Checkpoint feedback
0. Navigation.
1. Landing Page.
3. User Profile.
4. Product Tests Page.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus Checkpoint feedback
0. Navigation.
1. Landing Page.
2. Login Page.
3. User Profile.
4. Product Tests Page.
5. Activity Logs Page.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
We are in the process of developing a mobile app that gives product testers access to the same functionality as our desktop web app. We need to create a very intuitive interface that resembles the same look and feel as our existing site.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Branding Guidelines:
- Please use the existing site for branding guidelines.
Design Goals:
- How should this application be designed?
- Read the user flow and decide what should the priority features be (what is the priority navigation for this user?)
- How quickly the user can find what he wants? What should the priority features be?
- How quickly can the user understand and interact with the app?
- The application should be easy to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
Target devices:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Make sure you create graphic in “vector” format, so when resize the graphic still look sharp! It will be great if you can provide the landscape version.
User Flow:
- Melody is a product tester.
- Melody registers as a tester on site.
- Melody completes her tester profile (activities, sports, bio stats, contact info, etc.).
- Melody is then selected to participate on a test (there are several statuses during this process).
- Melody must accept a NDA - Now officially on test.
- Brands ship product (Melody is notified of shipment status).
- Once product is received, Melody begins to complete surveys.
- Melody also completes activity logs (brief descriptions on how they are using product, what activity, conditions, terrain, etc.).
- During a test, Melody will be asked to upload images and video.
- During a test, Melody will be asked to put green and red dots on product photos to highlight good and bad points (performance zones).
- Melody will be able to update her profile as often as needed.
- Melody will be able to view her tester rating based on their test scores.
Main App Features:
- Image & video upload.
- Ability to complete surveys.
- Performance Zones completion.
- Ability to track their activity (ex. Running).
- Receive survey reminders.
- Chat between tester and brand.
- Receive notifications (new tests, their status).
- Update their tester profiles.
Required Screens:
Note: Please read importnat thread in forums before you start working on this challenge.
0) Navigation:
- How does the user navigate this application?
- Include navigation that you think fits with this application.
- Focus on the priority items and how things should be sized.
1) Landing Page:
- Please refer client landing page: http://mesh01-sandbox6.herokuapp.com/.
- This page should reflect the MESH01 branding and look "premium" in design.
- A user should be able to register as “Product Tester” (only).
2) Login Page:
- Please refer client login page: http://mesh01-sandbox6.herokuapp.com/login.
- User needs to fill his username and password.
- We need a login button.
- We do not need the Design Office portion
3) User Profile:
- Please refer profile page: http://mesh01-sandbox6.herokuapp.com/dashboard/Profile.
A- Bio Tab:
- There will be profile completeness indicator.
- Notice how the user can update his profile and enter more details.
- User will be able to upload images in his image gallery.
- User will be able to complete activity surveys. Note that these are different than the surveys the tester will complete during a test. (Capture the surveys in your design).
B- Completed Activity, Sport or Profession Profile Tab:
- User will see the completed survey information and will be able to edit it.
C- New Activity, Sport or Profession Profile Tab:
- User will fill survey information related to their particular sport. activity or profession. This is not to be confused with survey questions related to the products the testers are testing.
- At the end of the survey we will need a submit button.
4) Product Tests Page:
A- My Current Tests:
- Please refer http://mesh01-sandbox6.herokuapp.com/dashboard/ProductTests/current
- Please refer screens My Current Tests.png, Image Upload.png, Performance Zone.png and Survey.png.
- Note that the screenshots may not show the entire page. View the full page in the sandbox to see everything.
B- My Pending Requests:
- Please refer http://mesh01-sandbox6.herokuapp.com/dashboard/ProductTests/pending
- Please refer screen My Pending Request.png.
- Note that the screenshots may not show the entire page. View the full page in the sandbox to see everything.
C- New Product Tests:
- Please refer http://mesh01-sandbox6.herokuapp.com/dashboard/ProductTests/new
- Please refer screen New Tests.png.
- Note that the screenshots may not show the entire page. View the full page in the sandbox to see everything
D- My Past Tests:
- Please refer http://mesh01-sandbox6.herokuapp.com/dashboard/ProductTests/past
- Please refer screen My Past Tests.png.
- Note that the screenshots may not show the entire page. View the full page in the sandbox to see everything.
5) Activity Logs Page:
- Please refer http://mesh01-sandbox6.herokuapp.com/dashboard/ActivityLogs
- Please refer screen Activity Log.png
- User will see:
-- Tip of the day (ignore for mobile)
-- Local conditions (ignore for mobile)
-- Complete your profile (ignore for mobile)
-- Create a new activity log wizard. (Capture the flow)
-- Activity logs (searchable)
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
Target audience:
The focus of this app will be product testers. Product testers receive products from brands and are asked to complete surveys, report on activity, upload images and videos as well as "heat map" good and bad points (performance zones) on the products they are evaluating.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
- Making the site something they would check and potentially participate.
- Completeness of required tester functionality
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.