Responsive Design refresh for for existing web app (PC and mobile)
- Status: Pending
- Hadiah: $500
- Entri Diterima: 22
We have an existing web page/app which was architected awhile ago and opens different version depending on PC or mobile. You can see examples here;
1. PC Browser - [login to view URL]
2. Mobile browser (view using a phone and it will change to suit the mobile browser) - [login to view URL]
The current design is OK, but we need a more modern responsive design that works across Desktop and Mobile.
In addition to the existing functionality we need to add the following into the design;
• Chat - Button to open a chatbot window/form, and the chat window with text entry area.
• Map - to show location markers.
• Call Now;
o Button so a user can start a call (separate from a normal cell call).
o Call progress dialog, connecting, ringing, in-call, call ended.
o Keypad so the user can select options from an IVR.
The following are configurable by the client to use or not. So they may or may not show. So the design must show how they will look if they are not present.
• Report Outage button
• General Information
• Twitter and facebook icons
• Call Now
• Chat with an Agent
Some design ideas/criteria;
1. It must be simple and intuitive to use within seconds of it opening.
2. We quite like the current mobile version.
3. The look must be light and clean.
4. Client logo in the top left corner is client configurable, but we can define the size.
5. Cloud image is client configurable but we can define the size.
6. A primary and secondary colour. These might just be highlights eg a border, or semi-transparent background, just something to allow the client to carry through their brand colours.
7. Maybe an accordion on one side with Planned and Unplanned outages? And map panel on the right which is replaced by outage details when a locality is selected?
8. On PC replace the cloudy image and “welcome text” with a map if the client has selected to show a map?
• All design files, and HTML images ready for development.
• Design document with screen shots and details on the hex colours, font sizes, image sizes, etc so a developer can follow it.