 |
Mobile Site and Campaign Design Tool |
|
|
|
 |
|
|
|
|
 |
| A new version of a mobile site creation tool was designed for this mobile client. The project included user research, wireframe design and iteration, interaction design, and visual design. A final look and feel for the editor is presented at the top, followed by a few screen shots of wireframes showing the new workflow that starts with a wizard and ends with the redesigned editor. |
|
|
|
|
 |
|
|
|
|
|
 |
|
 |
|
|
|
|
 |
 |
|
| Mobile Site Editor |
 |
| The editor was given a whole new look and feel including an improved workflow, innovative and simple to use tools to facilitate campaign and web site creation, a more intuitive layout and structure, and new visual design. The visual design was deliberately made to be low-key and muted so that the focus would be on the site pages themselves. |
|
|
 |
|
|
|
|
| |
 |
|
| Workflow Wireframes: Step 1 |
 |
| When setting up a site, a wizard appears which walks the user through the basic steps that are needed to setup any site. Context sensitive help appears beside the controls. Progressive reveal is used to show information only when it is needed by the user. |
|
|
 |
|
|
|
|
|
 |
|
| Workflow Wireframes: Step 2 |
 |
| Step 2 allows the user to select from a set of predesigned templates. The user can choose a different color theme for each template. The templates and color themes help to minimize customization that the user might need to do in the editor. |
|
|
 |
|
|
|
|
|
 |
|
| Workflow Wireframes: Step 2 |
 |
| Before progressing to the mobile site editor, the user can preview the template with their own banner. The preview capability helps the user to make a more informed decision about which template to use. |
|
|
 |
|
|
|
|
|
 |
|
| Mobile Site Editor |
 |
| Every state of the editor was captured in the wireframes. In this way, I could work with the product team to quickly and easily refine the design. In total, 25 pages were included in the wireframes showing all the different possible states of the wizard and editor. |
|
|
 |
|
|
|
|