Mobile Challenge App Design ux and Look-and-Feel


Download 19.78 Kb.
NameMobile Challenge App Design ux and Look-and-Feel
A typeDocumentation
Mobile Challenge App Design - UX and Look-and-Feel



Contents


Overview 2

Requirements 2

My Submission 3

Design Guidelines 3

Phone Designs 3

Home Screen 3

Survey/ Challenge Listing Screen 4

Survey/ Challenge Detail Screens 5

Tablet Designs 7

Home Screen 7

Survey/ Challenge Master Screen 8






Overview




This is one of two design challenges we're running for the same application.  For this first contest, we we want you to create a beautiful look-and-feel for our working prototype of the Retail Execution application we've been building on CloudSpokes, and update the user experience if necessary.  (The second challenge will have you thinking bigger - leaderboards, points and badges, geolocation).
ll cans

Requirements



The use case is for a mobile application that crowdsources the analysis of retail displays.  Here's an example - the makers of Cloud Cola are running a Fourth of July "Buy One Get One Free" special for a limited time in the Chigago area, complete with special store displays and special bottle labels.  Cloud Cola wants to enable its Chicago-area fans to check out the special displays at their local stores and report back on the status of the displays.  Things like - is the special disiplay signage present?  Is the special price shown?  Is there enough stock?  In exchange for their participation, Cloud Cola fans might get loyalty points that can be redeemed in the future, special badges, etc (but that's part of the next design contest).

We have a prototype of the Challenge Participation application - see the attached screenshots.  In short:

  1. A user views open challenges

  2. Selects a challenge to participate in / views challenge details

  3. Checks into the store / starts challenge

  4. Answers survey questions & takes a photo of the display

  5. Submits the challenge and gets a confirmation (ideally showing their responses and photos).

For this challenge, we want you to come up with mockups of a beautiful new look-and-feel for the app that works well with the Cloud Cola branding (but in the future could be changed for a different brand).  In addition, feel free to rethink the user experience if you can make it better.

The application is implemented using Bootstrap, so consider that in your design.  You are encouraged to use the attached Cloud Cola logos and imagery in your designs.

Judging for this challenge is mostly about a beautiful, professional-looking look-and-feel - it should be complete enough that we can rebuild the app's UI from your design.  Useful updates or enhancements to the user experience will also be considered toward your score.

My Submission



I’m proposing the following designs for this app. Please note that though I’ve designed it primarily keeping iPhone & iPad in mind, the overall concept is of a responsive design that should work on all form factors – smartphones, tablets and other devices.
All images are provided for standard iPhone and iPad form factors – 640 x 960 and 768 x 1024 respectively.

Design Guidelines



For a compelling use experience, I would propose that the app be


  • Locked to portrait mode for iPhone (no landscape)

  • Use an accordion/ split view interface for iPad to use screen estate effectively

  • I’ve provided the images for iPad for portrait mode. If my designs do get selected, I can provide the images scaled appropriately for landscape mode as well

  • A background image has been used to provide a visual contrast. It can be removed if you think it’s a bit overboard.

Phone Designs

Home Screen



I’m providing 2 variants. Each of the variants has been designed keeping in mind that it’s attractive, uses the Cloud Cola branding and is visually catching to the eye.



Survey/ Challenge Listing Screen



This is a list view of all surveys/challenges. Each list item shows the name of challenge/ survey along with a thumbnail and links to the actual detail page.



Survey/ Challenge Detail Screens



This is the challenge detail view.

This is the challenge detail view showing survey questions

This is the challenge detail view showing buttons from where user can click images.


Tablet Designs

Home Screen



This is the portrait mode image. Landscape scape image mode will be scaled accordingly.




Survey/ Challenge Master Screen



This is the portrait mode image. Landscape scape image mode will be scaled accordingly to adjust width of left and right panes. The left pane contains the listing and the right pane contains all challenge details, thereby using all screen estate effectively.


This is the portrait mode image. Landscape scape image mode will be scaled accordingly to adjust width of left and right panes.


This is the challenge detail view showing buttons from where user can click images.





Thank you for taking the time to review my submission! If you face any problems or need any changes/ clarifications, please email me at admin@talesforce.com
Thanks!

Bottom of Form
Bottom of Form

Bottom of Form

Share in:

Related:

Mobile Challenge App Design ux and Look-and-Feel iconAbstract This report contains the functional, design, and structure...

Mobile Challenge App Design ux and Look-and-Feel iconDescription of Product: Outlook Mobile app for ios is the business-class...

Mobile Challenge App Design ux and Look-and-Feel iconWe feel that your work environment should feel like home and your...

Mobile Challenge App Design ux and Look-and-Feel iconGira eNet Mobile Gate App

Mobile Challenge App Design ux and Look-and-Feel iconSigning app Note: signing the app is only necessary when you intend...

Mobile Challenge App Design ux and Look-and-Feel iconChapter 2 App Design Issues and Considerations

Mobile Challenge App Design ux and Look-and-Feel iconDescription of Product: Power bi app allows user to use Power bi on their mobile devices

Mobile Challenge App Design ux and Look-and-Feel iconAbstract The challenge to manage massive applications sesara from...

Mobile Challenge App Design ux and Look-and-Feel iconDownload the app To get started, make sure you are using an iPhone...

Mobile Challenge App Design ux and Look-and-Feel iconAbstract in this paper, we describe the process of designing a mobile...




forms and shapes


When copying material provide a link © 2017
contacts
filling-form.info
search