Challenge Summary
Welcome! We are designing storyboards for a iOS7 based mobile applicaiton. This is the second part, you are provided with existing storyboards and wireframes to complete the screens. The branding is quite simple, the default look of the native iOS7 components. In other words, you don’t need to care about graphic design that much, it’s about the user experience!
Round 1
For your R1 deliverables please submit the following requirements under “Storyboards Requirements” section:
4. User Profile
6. Virtual Wallet
10. Chat
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens as shown in the requirements list (01, 02, 03 etc.) – it’s easier to review.
Round 2
Final design will contain the mentioned requirements under “StoryboardsRequirements” section plus any updates from client feedback.
4. User Profile
5. Privacy
6. Virtual Wallet
7. Organizer
9. Search Reverse
10. Chat
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens as shown in the requirements list (01, 02, 03 etc.) – it’s easier to review.
The primary goal of this contest is to design screens that show the look and workflow of an iPhone application. This application offers social networking features such as chat, friend connections, profiles, messaging and more. It’s your task for make these features interesting (UX wise).
You must focus on the user experience; make it very simple and easy to use by following the provided storyboards as guideline/reference.
Branding and Guidelines
- Design screens for iPhone retina display at portrait view 640 x 960 px; RBG color mode at 326 pixels per inch.
- Source file must me Adobe Illustrator.
- Follow design standards from iOS7, using default UI components.
- DO NOT make original application designs. This is quite simple (graphically). You can re-think the layout and suggest improvements, however it must be strictly tied to the iOS best practices. Read Apple Design Resource Center for more information.
- Declare your fonts according to the Studio font’s policies.
Storyboards Requirements
You are provided with rough mockups of the application – Wireframes.zip, the concept. As well as the AppFeatures.doc which contains specific descriptions of the application features; it’s not mandatory to read but it may help you to understand what some components do in the application.
Remember to focus on the user experience. You are encouraged to think the layout to make it a perfect suit for the iOS design standards; that’s an asset that may help you to win the contest.
4. User Profile (See 04_01_User.png and 04_02_User.png from wireframes)
4.1. Edit Information
4.2. Change password
4.3. Add/Update Phone Number
4.4. Manage Social Networks
* Platform interactions. They are the interactions or crosses that users have had with each other within the platform, ie, if it belongs to the same group of alert, or exchanged information in a chat search, if sent a friend request, if it has earned a reward responding well to search for that user.
* Common contacts. Contacts shared by two users, ie the two users have got added the same contact to their contact list.
5. Privacy (See 05_01_Privacy.png and 05_02_Privacy.png from wireframes)
6. Virtual Wallet (See 06_Wallet.png from wireframes)
6.1. Buy Coins
6.2. Wallet Settings
7. Organizer (See 07_Organizer.png from wireframes)
9. Search Reverse (See 09_04_SearchReverse.png from wireframes)
- This is just one screen (on the right side). Add this screen.
10. Chat (See 10_01_Chat.png to 10_05_Chat(messages).png from wireframes)
- See “Whatsapp” application as reference BUT keep using default iOS7 UI components.
- Provide samples for take photo, video, audio, location actions.
- Design all kinds of messages that can be displayed in the chat and the different ways of representing the possible lines of chat.
-- 10_03_Chat (Design line comunication).png
-- 10_04_Chat ( Design line search).png
-- 10_05_Chat(messages).png
* NOTE: Don’t design each one of the screens shown in the workflow/wireframes. Just extract the unique screens according to the required features. As you can see, some screens repeat along the workflows, but they mean to show you how the application works and connects their components, just that.
Resources
- Download here the iOS7 UI Kit for Illustrator – iOS7_UIKit_Illustrator.zip
- There is a PSD version available in case you’re more comfortable with this software and you are willing to work with the transition from Photoshop to Illustrator - iOS7_UIKit_Photoshop.zip
Target Audience
Wide audience overall. Massive public and companies.
Judging Criteria
- Consistency with the existing design.
- How well you implement the design following the provided guidelines.
- Simplicity.
- User Experience.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Illustrator and saved as layered Ai vector files.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.