Pictone iOS Prototype App Development Part 2

CHALLENGE OBJECTIVES

• iOS prototype app development using Swift, it will be based on the part 1 code
• No major new screens, but some UI changes / enhancements are needed
• Need to implement voice recording and simple editing in this challenge

 
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 project is to build an iOS prototype app following the provided design using Swift.

 
WORKFLOW

• 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.
 
DETAILED REQUIREMENTS
The following requirements are all in scope of this challenge. Please also carefully check the spreadsheet to see all the details in case they are not detailed enough below.
 
*** IMPORTANT NOTE: If the layout differs between the design and the app,
the layout should basically be based on the current app, not the design submissions.
For example, the layout of the footer operation icon. If you are not sure about anything, post in the forum to get confirmation.
 
Screens: M00A���M05E

• Change the logo to the one being used in the current website, you can find this new logo in the new design files which we shared in the forum.
• Update the app to use the app icon in the design.

 
 
Screen: M05A
We would like to change the stop icon design to a square filled with white color.
 
Screens: M04A, M05A
Need to show end of lines so users are aware.
 
Screen: M04A
Need to add volume control to each character.
 
Screen: M05A

• Need to update the highlight color.
• Share button should be moved to the end of lines.

 
Screen: M05A
We would like to add a countdown when the record button is pressed.
See the sample image here.
 
Screens: M05A, M05B , M05C
UI changes:

• Delete volume control icon.
• Add a slider to control volume for each recording.

 
Functional features:

• Save a file as trimmed.
• Save the param of volume level which has each recording(file).

 
Screen: M05A
Need the volume icon to be animated during recording, i.e. the length of the bar should change at random to indicate recording is going on.
 
Screen: M04A
We would like to highlight the background of the line below:

• Playback M04A: Highlight in ""light blue"" at only the line being currently played.
• Recording M05A: mentioned in an issue above.

 
Screen: M04A
About 2 types of playback buttons (at each line or footer):

• Case 1) Press it at each line: Playback only the target line.
• Case 2) Press it at footer: Playback continuously from current line.(When playback at the each line, that line becomes the current line.)

Please check the spreadsheet we provided in the forum for more details.
 
Screen: M04A, M05A

• M04A: Select and Play each file of recorded voice or sample voice.
• M05A: Create, overwrite, and delete a file for each voice.

Please check the spreadsheet we provided in the forum for more details.
 
Recording / Editing
In this challenge, recording must be fully implemented, and the app should support simple editing (trimming) as shown in the design. These need to be really functional and cannot be mocked anymore.
 
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
• Base code

 
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 brief write up explaining how to build, configure and deploy your code.
• Please do NOT submit a video based demo or verification guide, use markdown format for that.