Tagly has been developing a comprehensive real-time marketing platform that enables out customers to build engaging experiences with no coding.
Customer sites that use the platform have immediate access to:
- real-time messaging and updates
- authentication integration with FB, twitter, etc
- ability to run gamification campaigns using QR codes, NFC, external web sites and so on.
- ability segment customers through activities and behaviours
We are at pre-demo stage (i.e. nearly ready to go to market) and we need a designer to provide consistent treatment across the platform.
You can see some early work from the first iteration of the Tagly platform here (https://www.facebook.com/taglydotcom).
- There are two parts to the platform: Customer-facing and Administration
- You will note that we have used Bootstrap CSS for the buttons and so on (http://twitter.github.com/bootstrap/) - we don't want to deviate from the button/form element styling too far.
- In general, we are building the UX to be a "Responsive" and so we will be coding the platform so that design elements resize appropriately based on PC/Tablet/Phone form-factors.
- Customer-facing screens need to be smart and tidy and well laid out however they MUST BE BRAND NEUTRAL AND NOT FEATURE THE TAGLY BRAND.
- This is critical as Tagly's customers will be embedding the customer facing screens and features into their sites.
- Accordingly, the dark grey look and feel of the screenshots is indicative of ONE brand only. Other customer sites might be a variety of different colours.
- We will provide customers with some degree of customisation when they embed Tagly into their sites. This will centre on colours, padding, spacing, font treatment and so on.
- The administration screens will only be used by Administrators of the customer site. End-users will never see this and so it does not need to adapt to customer brand requirements.
- We are after strong guidance on navigation and styling for this section.
We want to see the following specific screens produced as an outcome for this contest:
The paths in the descriptions below refer to the attached ZIP file. We have provided a lot of screens for reference material. We are looking for your lead and guidance in how we address our current look and feel issues but we need the following addressed at least.
We do not expect you to design two dozen screens - we are just looking for the general use case. For example if you design one pop up for us, we can take it through the rest of the site. Consistency is the key.
1. The "Tagly Bar".
* \User Edits their Profile\1 - User is logged in to profile.png
* \Misc\Network and Site Selection Box.png
This is the persistent nav bar that people use to access their profile and also other sites in the customer network. Also note the pop-up that appears when a user tries to explore the other sites in the customer's marketing network.
2. General Pop-up framing.
* \Sign Up New User (Native) Story\4 - User details filled in.png
This screen shows the general nature of the pop-up that is used to access the user profile and so on. Key things we need fixed here are:
- The framing.
- The current title on the framing is too stylistic and not neutral enough.
- The close button does not look very good.
NOTE 1: We are happy with the layout of the form itself on the popup. This does not need fixing.
NOTE 2: The image and the text on the left of that form are customer supplied (they upload it on the admin site) so don't spend too much time on the treatment of this.
3. Edit profile screen.
* \User Edits their Profile\2 - User clicks on their name to view their profile.png
* \User Edits their Profile\3 - User edits their profile information.png
Generally look at these:
\User Links SMA Auth Story\*
These screens are both a mess. Key outcomes we are looking for are:
- Orderly and attractive layout of the elements presented there.
- The layout needs to be small such that it can scale down to a mobile device.
- Please show how this might look on a PC and also an iPhone/Android.
- Please ensure there is minimum wasted space and try and minimise scrolling as this is a poor UX on slower mobile devices.
4. Badge box
\User Links SMA Auth Story\1 - User is logged in to profile.png
The badge box shows the list of things a user can win in a campaign. There are a few elements here:
- We want a nice badge box design. PLEASE REMEMBER the design must be neutral as it is going on to a customer site with unknown colour schemes and so on.
- Note that we have code that overlays the state of the badge as won or not won (that is the dot int he corner). This really needs improving and we would like some sort of banner or similar overlay that we can composite on to the badges to show if they are won or not. Note customers can and supply their own badge images and overlays. We just want a few sample badges and won/unwon overlays to use as high quality defaults.
5. Story/Tagly Flow
* \Misc\Multiple News Stories.png
Tagly has a feature called Flow which is a completely real-time list of events happening in and around the campaign/customer sites. In practical terms this will be like a list of tweets, facebook stories, etc. We want a nice neutral layout for this .
* \Admin - Tags\Tags.png
We have the need to show a sensible layout for hierarchical information on the administration site. Currently we are using a treeview which is not satisfactory. We want to see an alternative treatment for this.
We are open to any other suggestions you can make to improve the platform appearance. Very high marks will be given to people who can demonstrate designs that are outside the box and really creative but usable and practical to implement.