We have an existing profile page that we would like to create the ability to edit key fields in line. This will require taking the profile code as it is today, and creating a new page with the edit functionality. The freelancer is expected to put together the UI and the relevant Angular JS to power the page which will then be connected to RESTful APIs in / out from the database. The user experience is defined, but we will not provide pixel perfect designs – therefore the freelancer will be expected to operate with some ambiguity and take feedback as the work evolves. The page needs to accommodate empty states, but is a single view all based off a single template)
Create a new view of the profile page (existing HTML, CSS of the page view available as a base plate).
The page needs to accommodate;
1. Inline text edit (no styling functions)
2. Simple rich text editing
3. Image management - upload, removal, crop/move/resize function
4. Location lookup – via google API
5. Fields with radial select functionality (choose from short list) – this is button select or check box for multiple items, the options will be provided.
6. Fields with drop down select (choose from long list) – this will be drop down select, options will be provided
Page UX will need to incorporate
1. Field highlighting and shading
2. Overlay style modals for when fields being changed are active
3. Simple publish button overlay
4. A ‘profile completeness’ progress bar with dynamic calculation and next step recommendation prompts.
5. This is a desktop web feature so mobile experience is not required.
Successful completion will be determined by
o Ability to run test cases to add, edit, delete, save, discard information in editable views.
o When changes are made they are replicated on the page
o Ability to publish page changes.
o Location change save creates event to reload the map (event to fire to API)
o Ability to measure profile completeness accurately (logic here to be provided)
o Cross browser compatibility.
o Page load / page weight being acceptable to initially render, and on page performance e.g. opening and closing various edit states.
o Code passes W3C validator