Pictone iOS Prototype App Development

CHALLENGE OBJECTIVES

• iOS prototype app development using Swift
• Around 11 screens
• Need voice recording and simple editing to work in the app

 
PROJECT BACKGROUND

• The purpose of this project is to redesign the experience around a social voice recording service. Users from pictone.net can create, edit and play voices over a play guided through a script that allows them to customize the experience through different tools offered.
• The purpose of this challenge is to build an iOS prototype app following the provided design using Swift.

 
WORKFLOW
Please make sure your design incorporates this high level workflow, for more details please check the spreadsheet we provided in the forum:

• Step 1: user launches the mobile app, splash screen is shown
• Step 2: app displays the home screen, the home screen is vertically scrollable
• Step 3: clicking the image at the top of home screen goes to the script details screen
• Step 4: clicking a script from either home screen or scripts list screen goes to script details screen
• Step 5: on script details screen, user can play existing recordings, record and edit recording.

 
USERS / ROLES
This is a prototype app without users or roles.
 
SCREENS / FEATURES
The following screens are in scope of this challenge. Please carefully check the spreadsheet to see all details, all screens shown in the spreadsheet are in scope, there’s one confirmation screen for recording that’s not listed below and it’s in scope as well.
 
M00A: Info Card
This is the splash screen, make sure the loading indicator is an actual spinner instead of a static image.
 
M01A: Browse
This is the home screen, which consists of the following sections:

• The top section shows the cover for a popular character and right below that is the list of albums from this character. Tapping the thumbnail or title on the cover goes to M03A, clicking one of the albums goes to M03A. Note data must come from a local json and cannot be hardcoded, though the LOAD MORE button needs to function (loads more data from json).
• Scroll down and you’ll see a section with a list of characters, tapping the thumbnail or title of  any album in this section goes to M02A. Data should be coming from local json file and the LOAD MORE button needs to function (loads more data from json).
• Scroll further down and you’ll see another section of genres, this section doesn’t need to to be functional, just load data from local json and display the data on UI, no need to respond to user’s actions, though the LOAD MORE button needs to function (loads more data from json).
• The loading indicator while loading more must be a real spinner

 
M02A: CV
This screen shows all albums that belong to the character. On tapping any album should lead to screen M03A.
 
M03A: Script Information
This screen shows summary info of the album at the top, then 3 tabs below it:

• Tab 1 shows the text script summary, including introduction, characters and acting points
• Tab 2 is for recording playback, read sections below to understand the details
• Tab 3 is for recording, read sections below to understand the details
• Note that all data should be coming from local json

 
M04A: Script Listen
M04B: Script Listen

• This screen shows the actual script and lets users play the audios (recordings)
• The number of characters will match these from the 1st tab
• For each character, there’s a fixed number of 3 different recordings, the 1st one is user’s recording which is by default null until user records it, the 2nd and 3rd ones can be pre-configured audios / recordings loaded from local json, these two are readonly (can only be played)
• The bottom bar will indicate the playback status

 
M05A: Script Record
M05B: Script Record
M05C: Script Record
M05D: Script Record
M05E: Script Record

• This screen allows users to record their own voices for the scripts.
• The RECORD dropdown will just show options based on the characters (one for each character, users can select only one character at a time), but it will NOT affect anything else
• The DELETE ALL RECORDINGS button should clear all recordings by the user
• SHARE button does NOT need to work
• The list should show all scripts (same as the ones in M04A screens, but on the left of each script there should be a icon indicating the status of that paragraph of script. The playback icon is shown for scrips of characters that are not the character being recorded.
• Users will be able to delete, play or edit their own recordings. Note for editing we only need trimming feature.
• Please check the spreadsheet we provided in the forum for more details.

 
Record Confirmation

• This screen is created by grouping pop-up pictures since it doesn’t exist in the design source, but it’s in scope, check https://take.ms/ThjE3 to see what it refers to.
• When the user taps the “recording” icon, if the recorded voice data exists, this screen confirm if the user should overwrite it.

 
FORM FACTORS
Please make sure your design supports these form factors:

• In-scope
  • Mobile portrait
• Out of scope
  • Desktop portrait and landscape
  • Tablet portrait and landscape
  • Mobile landscape

 
OS / DEVICES

• iOS 12
• iPhone 7 and newer models

 
DEVELOPMENT ASSETS

• Design Source
• Spreadsheet explaining the flow

 
TECHNOLOGY STACK
The following technology stack will be used as part of this challenge:

• Swift
• iOS 12
• Xcode 10
• JSON

 
SCORECARD REVIEW

• This submission will use the new iOS development scorecard.
• Please review the scorecard carefully.
• Your submission will be reviewed on these requirements:
  • Challenge Spec Requirements
    • Requirements Coverage
  • Coding Standards
    • Best Practices
    • Code Quality
  • Development Requirements
    • Localization
    • Testing
    • Performance
    • Security
    • Deployment
  • Organisation & App Architecture
    • Onboarding
    • Launch Screen
    • Search
    • Alerts
    • Scrolling
    • Tables
    • Alignment
  • User Interaction
    • Button Size
    • Page Controls
    • Pickers
    • Sliders
    • 3D Touch
    • Feedback/Notifications
    • Progress Indication
    • Authentication
  • Visual Design
    • Typography
    • Legibility
    • Images
    • Text Fields

Final Submission Guidelines

FINAL DELIVERABLES

• All original source code.
• A detailed readme in markdown format explaining how to build, configure and verify your submission. Note that video based guide is NOT acceptable.