Design & Development AI Assistant
product design, UX/UI design, branding, and copy by Adam
WIZ is a narrow AI assistant that helps the user design and develop a mobile app, web app and/or website from start to finish without the user needing to know the nitty-gritty details about design and development. All the user needs to bring to the table is a well thought out big idea and it's off to the races.
When a visitor first loads the site the first elements that are loaded onto the white page are the WIZ logo and navigation links on the right. button. They are introduced with a quick but graceful fade in.
The mascot part of the .svg WIZ logo expands and moves into its spotlight position and at the same time, the wordmark part "WIZ" then slides into the left taking the mascot's place.
Just before the mascot finishes traveling to its spotlight position, the sea-blue gradient quickly fades in. When the mascot reaches its spotlight position with a smooth ease-out, an array of expanding circular lines burst from its blue lined head. The header "I'm WIZ! Your Design & Development AI Assistant" then fades in quickly. The paragraph below then fades in immediately after the header. And finally the call-to-action button.
All fades mentioned from here on out will be quick unless mentioned otherwise.
I think it'd be interesting if the circular lines kept expanding outward and new lines would slowly be generated from the head as if to say WIZ is generating and transmitting thought which supports the AI concept further.
I wanted to bring back some of the design flavors of the original Macintosh and Windows UI from the mid-80s. Ultra-basic, box-shadowed buttons.
After the user clicks the call-to-action button the following transitions happen:
1 WIZ mascot slides to the right and shrinks in size and simultaneously the gradient background, animated circular lines, header and paragraph fade out.
2 The "Here we goooooh!" header then fades in followed by the paragraph below. The default gray circle, blue-line face user profile pic slides in off-screen from the left and eases-out into its resting position.
3 The speech bubble to the left of WIZ then fades in followed by the fade in of the message.
4 To the right of the user's pic, a blue line smoothly draws out to the right from a single point. It is a text field and focus is automatically is placed on it as you can see with the hairline cursor.
After the user presses Enter :
1 All content on the screen slides up and behind a 95% opacity white DIV.
2 The new WIZ message and user choice UI fades in its place. Also, the History icon appears at the bottom left of the page. The user's attention is brought to the icon with a red circle animation.
The red circle fades in behind the white icon, which was previously invisible and inaccessible. The red circle then shrinks in size eventually disappearing to a point and reveals the icon is actually black as shown below.
After the attention-grabbing History icon reveal-animation, a message is animated out to the left of the icon explaining its purpose. It hangs out for about 5 seconds or until the user makes a selection.
Signing up for an account, while recommended, is not mandatory. A user can proceed without creating one and build an app almost to completion. All choices made by the user will be stored locally by their browser so if and when they return, they will be able to pick up where they left off. Additionally, storing the users choice data locally is helpful in situations where the Internet connection is spotty.
There may be steps along the way that will require the user to create an account such as steps connected to uploading a fair amount of data to the WIZ servers like videos, audio, and images.
After the user clicks Yes the following transitions happen:
1 All content on the screen slides up and behind a 95% opacity white DIV
2 The new WIZ message and user choice UI fades in its place. Also, the History button icon appears at the bottom left of the page. The user's attention is brought to the icon with a scaling red circle animation.
Step 1 and 2 is a transition sequence that always happens when a user moves from one step to another so I won't keep mentioning it.
If a user selects one of the social services to sign up then the OAuth login flow begins (e.g. Google account selection window appears, the user chooses or logs into their desired Google account, presses Submit button, OAuth window closes and the user gets redirected back to the app)
Upon selecting the Email and password option, WIZ shifts the focus into email field by placing a cursor in there to avoid forcing the user to click into it. Eliminating steps like this improve UX. After all, that's what technology is here for. To eliminate the need and pain of having to do annoying tasks.
After the user has clicked the verification link in their email, a new browser tab will open up to display the following page. This new page shows that the user has been automatically signed in and the next step in the account creation process (adding a profile pic) is presented to them.
I'm trying to get away from the stifling nature of copy seen in most apps. "Drop it like a bomb" is kind of funny but maybe some people would get offended by the bomb part. "Drop it like it's hot!" might be better because it's less violent.
Adding a profile pic is not a critical step, so the user can bypass it by clicking the Let's skip this button. A user can always go into their account settings later to add or edit their profile pic.
I thought a little uploading-animation would be a nice touch. Please take note of the star and its trail popping over the top of the light gray upload container. The star flies over and drops into the blue, sine wave water. The design of the star and its trail is taken from the WIZ mascot logo.
Also, the individual periods of the ellipses of the "Loading ..." would appear one by one until all 3 are present and then repeat. This was one of the original ways to let a user know that something was loading. One can still spot this in the wild from time to time.
When the profile pic is fully uploaded, WIZ's message changes to "Loaded! I think I see you" which lets the user know that WIZ has used face detection to identify the face in the image ...
... and WIZ will proceed to auto-zoom the image to fit the face perfectly in the circular crop zone. Take note that the actual slider UI handle moves during the zoom process. WIZ also lets the user know in its new message that they can change the position and zoom of the image manually if they don't approve of its face-detection cropping.
After the user clicks the Crop button:
1 All the UI will fade out leaving only the large cropped circular profile pic on screen
2 The large profile pic proceeds to shrink down to the normal conversation sized profile pic
3 Three new choices fade in for the user
So once the user has finalized their new profile pic, WIZ will agree with the user and the new profile pic will slide to the left and on top of the default profile pic.
And once that profile pic slide is done the following animation will play out:
1 The user's attention will be brought to the top right of the screen where a blue circular DIV expands from the center of the default profile pic covering it up
2 The user's new profile pic will scale up from the center point of the blue circle DIV and reach its full size
3 The blue circular DIV will then shrink all the way behind the new profile pic
Steps of the animation are as follows ...
The user has made their selection and in response, the Continue button has transitioned its style into the active state as seen below.
Settings, Help, Projects and Log out UI can be accessed by clicking on the user's profile pic in the header. Hovering over the pic will slightly slide out two circles. One red and one blue.
When the user clicks the profile pic the following transitions occur:
1 The red and blue circles quickly slide back behind the profile pic. At the same time, the entire main content area is blanketed by a white, translucent overlay which fades in to bring focus to the menu area.
2 A blue 1px thin line is drawn out under the profile pic
3 A red 1px line is drawn out to the right of the blue line
4 The menu items slide down and out from the red line. At the same time, the user's name slides up and out from the red line.
I wanted the WIZ mascot to visually be with the user during the entire experience so when the white overlay fades in, it doesn't cover WIZ. WIZ actually turns toward the menu since that is where the user's pointer is located and a message appears below stating "If you need me you can just click Help. I'll be by the logo ;)". This also gives us a chance to show the complete WIZ logo; wordtype and mascot together.
If the user clicks Help then WIZ will ask you what you need and a set of options will be displayed over the main content area. One of them would be a set of tutorials to help the user remember how the app works if they forgot.
The hover zones of each menu item are quite large only with a 5px margin between them. This prevents the user from having to position their pointer right on top of the text which would be the worst case scenario. The text isn't that big and it'd cause more effort than needed.
The .svg icons that appear on hover would be animated out rapidly and in a fun way via a library like Svg.js or Snap.svg.
When a user moves the pointer into the main content area, WIZ will spit out a message in a red bubble about how to get back in and simultaneously the menu will shrink up a bit in preparation to suck back into the profile pic. This is seen below.
If the user clicks back into the main content area, the menu-retraction-animation will run. The main steps of that animation are depicted below. Also, this is exactly the way the menu would animate out when a user clicks the profile pic but in reverse.
The user is about to click the History icon ...
Below are the main steps of the animation that is triggered after the user clicks the History icon.
After the History timeline is animated out in the left column, the main content area is blanketed by a translucent white overlay.
The user can then choose to go back and make edits to any of the previous steps by clicking on the step.
If the user clicks on a previous step the following occurs:
1 The white overlay over the main content area fades out while the main content area begins to auto-scroll upward towards the chosen step.
2 Once the chosen step is almost reached the scroll eases out smoothly
3 Once the scroll stops the History timeline retracts back into the History icon
There are still so many aspects of WIZ that I've not yet designed the logic, UI and/or UX for but I think this presentation will give you a good idea of how I think on multiple levels. Thanks for your time and consideration.