Site Mockups

Great. Thank you Mel. Would it be possible for you to upload a PDF version (or some other appropriate format) that I can more easily circulate internally?

Tiffany , Haley , Alica , Julia and Monica , could you please review the mock-ups, and let us know if you see any issues. Note that some of these images are placeholders, and will be subject to further changes, including:

Note that my preference is for Homepage #2, because it gives a visual representation of what ISLG's research tools do, but please express your views on this point.

Also, Tiffany , Haley , Alica and Julia , did we created copy for the "benefit oriented product statement" Mel is referring to above. If not, what do you recommend should be inserted there?

Thanks,

Morgan

Thanks Morgan and Mel. Really excited to see the content come to life!

We will take a look through the mocks and annotate with any feedback by Monday. Does that work with everyone?

Thanks,
Tiffany

Morgan ,

Here's a PDF.

Mel

ISLG-WebMockups.pdf 14.7 MB • Download

Thanks Mel!

It's looking great, guys. I'll review and send my comments to Morgan, on Monday morning, too.

Hello!

The Quietly team actually had some time this afternoon to sit down and go through the mocks - looking great! We've provided specific annotations and questions in the PDF itself. Please take a look and let us know if you'd like to hop on a call to discuss. Otherwise, some general comments:

Thanks,
Tiffany

ISLG-WebMockups with comments from Quietly.pdf 14.7 MB • Download

Tiffany and Julia,

Thank you for all the comments and annotations above, they all make sense to me, and should be implemented, unless others disagree and further discussion is needed. 

Let me mull over the choice between Homepage 1 and 2. I'll wait until we've heard feedback from everyone before making a final decision.

Thanks,

Morgan

Hello all,

I've circulated the mockups above internally, and no one has any further comments beyond the ones already addressed by Tiffany and Julia. Also, we all prefer homepage #2, so let's proceed in this direction.

Melissa , could you please update the mockups and post an updated version? Note that I'd like to get this finalized this week, so that I care share this with our shareholders during out AGM next week.

Thanks,

Morgan

Morgan, I've just finished marking a pdf with mine. Here it is.

ISLG-WebMockups- Design notes.pdf 2.4 MB • Download

Thanks for the comments Monica .

There seems to be some disagreement between Homepage #1 and #2. The ISLG team and my preference is for #2, but Quietly and Monica prefer #1. Megan and Melissa , could you weigh-in, and then we'll decide how to proceed?

With regards, to Monica's other comments, I think we should defer to Industrial's suggestions on UX, but please implement Monica's suggestions concerning visual design and adhering to the branding guide. Also, I agree re testimonials, either use quotation marks or italics, but not both.

Morgan

Hi Morgan,

We will go through and implement the changes above. 

In terms of the homepage, we feel the added visuals in option #2 give the visitor more context and incentive to dive deeper into the content. This visual approach feels fresher and more marketing forward. However, we do understand the desire to have the product benefits higher on the page. We have included a mockup to illustrate how we could meet in the middle. This third option combines the clear, straightforward layout of #1 with the visual appeal of #2.

Let us know what you think.

Mel

Homepage-v3.png 2.29 MB • Download

Great. Thanks Mel.

I like version 3. Maintains the visual component that I liked about #2, but looks a lot cleaner, and brings the client logos and testimonials higher up the page. Tiffany , Haley , Alica , Julia and Monica , does this work for you?

Morgan

Hi Morgan and team,

Thanks for the additional version, Melissa. It's definitely maintains a cleaner layout and middle ground between the two. However, we do still prefer v1. Here are some considerations around v3 in terms of our thinking when it comes to the content and design experience.

In v3:
- Overall, we feel the Homepage should really speak to the benefits first, before jumping into representing the specific product features. The bigger graphic elements are product-focused (vs. relating more generally to the user benefits) and could just live on the Product page.

- There are both the 'icons' and  bigger 'graphic elements' underneath, that represent the features. Not sure you need both to speak to one benefit and we think it would be cleaner with just one or the other.

- On the same note, with all three of the bigger 'graphic elements', there is some design inconsistency - the first two are conceptually designed visual elements while the third one for 'Review extensive content analysis' appears to be an actual screen shot of the product. If you you were to keep these in design, we recommend to design the third one into a 'conceptual design element' like the first two.

- Lastly, currently the same screenshot being used on the Product page to describe "Identify relevant passages quickly" (re: above) is also used to showcase "Review extensive content analysis" on v3. Though they are related, this may create confusion as to whether this one feature does both things.

Again, by no means are the above considerations show-stoppers (the are very minor!) but we wanted to provide additional context to our preference. We think all three versions are great so the decision is ultimately up to you and the ISLG team, Morgan.

Thanks,
Tiffany

I agree with Tiffany. The home page shouldn't drill into the nuts and bolts but rather encourage you to click further to find out more about the product. And, I also agree that all three are good. I'm just putting my marketing hat on, trying to understand which approach will lead more to actually contacting ISLG for a trial.

OK. Tiffany and Monica , have convinced me to leave the screenshots on the product page. So, let's go back to version #1.

I agree with Tiffany's comments about keeping the screenshots conceptual given that we want these screenshots to be relevant in the new application if possible, so that we don't have to replace them down the road. Melissa , could we come up with screenshots that are more conceptual for the Product Page?

Also, I think we should update the icon from "Review extensive content analysis" with the icon being produced for the intro video that represents subject matter expert performing their analysis (unless other disagree). Here is a screenshot from frame 8 of the storyboard. Tiffany , any word if that icon has been produced yet?

image.png 48.5 KB • Download

Thanks,

Morgan

Hi Morgan - We don't have that icon designed yet, but they will be ready by the end of next week when we provide the design presentation for the video.

Cheers,
Tiffany

OK. That's fine Tiffany.

Let's proceed with getting the mockups updated, and we can replace the icon when it's ready (again, assuming we agree on this point).

Morgan

Morgan  

Please find attached the revised mockups. I believe these capture all the required changes. 

Let me know if you need anything else.

Mel

ISLG_WebDesign_Revisions-011718.pdf 8.36 MB • Download

Hi Mel,

I think some of the things I mentioned were not done. Could you please take a look at my pdf? I wrote them, again.

Let me know if you have any questions and/or if there are things that can't be changed, at this stage.

Thanks

ISLG_WebDesign_Revisions-011718-Monolab.pdf 1.86 MB • Download

Also, looks like we're still missing the "benefit oriented product statement" on the homepage and above "start you trial" on the product page. 

Thanks,

Morgan

Most of those additional revisions have been added with a couple of exceptions:

For now I have left out the circles around the icons (product page, resources, signup). Throughout the site, circles have been reserved for actions items like nav buttons, play buttons etc. I am hesitant to add these as strictly design elements as it may confuse the visual language. 

I have also chosen not to add division lines on the product page. I did try it and felt it made the layout too busy. Monica any concerns you have about readability/usability will likely be resolved once we see the page in action within a browser.

ISLG_WebDesign_Revisions-011718-2.pdf 8.11 MB • Download

Thanks Mel. I'll use these for my meeting next week.

Morgan

Hi Mel,

I understand the reasoning for not having circles but now the icons look as if they're floating in space. I can see what you mean about actions but I feel like the arrows in them tell you to click on them but not a mallet or others. What if all "action" arrows are filled circles and we do line-only ones for the features ones?  I'm even wondering if we need them. It feels like we're using a lot of them, now. Thoughts?

Hi Melissa and Megan ,

Just following up to see where we're at on resolving all the outstanding comments from the mockups. Are you waiting for Monica 's updated headshots, or could we start on another round of revisions?

Also, Stephen , during our call on Friday, I'd like to include a discussion on the timelines for getting the new public site (and updated member site) launched. I'm looking ahead at the calendar, and it would be ideal if we could launch the new site and brand during a conference we're attending April 15-19 in Sydney. I need to know whether it's feasible for us to meet this deadline, so that we can start other preparations on marketing materials, exhibitor booth, etc.

Thanks,

Morgan

Hi Morgan ,

For a launch before April 15th we'd have to ask Anil to confirm on the dev side, but this sounds very feasible since it looks like the majority of the design is complete and we're just tying up some loose ends. Let's discuss in detail tomorrow.

Thanks,
Stephen

Sounds good Stephen . I suppose our conversation tomorrow about incorporating the branding guide into the members side will inform things as well.

Let's integrate this into our scheduled call for next Thursday given that Anil will be on the call. We should start the process of integrating the development team into the project.

Thanks,

Morgan

Morgan Monica ,

Below are the mockups with the final requested changes.

Once we have final sign off we can get into front-end development.

Mel

https://3.basecamp.com/3691577/blobs/2d63229c-076a-11e8-a344-a0369f6daf77/download/ISLG_WebDesign_Product-v4.jpeg • Download

ISLG_WebDesign_about.jpg 2.2 MB • Download

ISLG_WebDesign_SignUp-v2.jpeg 876 KB • Download

Hi Mel,

The changes look good to me. Just a couple of minor modifications:

Finally, could you consolidate all the pages (including the other pages: homepage, etc.) into one PDF document, and then could Monica and Quietly ( Tiffany , Haley , Julia and Alica ) please review so that we get final approval on this by end of day.

Thanks,

Morgan

Morgan , Monica , Tiffany , Haley , Julia , Alica ,
Mockups for final approval below.

ISLG_WebDesign_Feb1.pdf 9.18 MB • Download

Hi - these look great to us. Our only question is around the images. Are these still placeholders? If not, what is the thinking behind them as it relates to either the end-user, the ISLG brand or to the purpose of each page? If these aren't placeholders, we have some specific feedback and suggestions that ladder back up to delivering a complete user/brand/content experience for the customer.

Thanks,
Tiffany

Hi Tiffany ,

The only placeholder image on the product page is the one for the Publication Ctiator (because it's not in production yet and will be replaced at a later date) yet. The image for the Subject Navigator and Article Citator are representations of actual screenshots for these tools, and the Jurisprudence Citator's image is a representation of the historical line of cases created by treatment throughout the case law (i.e., the research task the tools performs).

What further changes did you have in mind? 

Note that we need to get this finalized today, so that we can move on to the next stage in the development process. Perhaps we can leave things as is, and discuss modifying these at a later date?

Thanks,

Morgan

Hi Morgan,

We were referring to the header images on each page. (e.g. the construction image of the backhoe, the windmills, the TTC subway).

If these are final images - our question was around the thinking of how these reflect the purpose of the page, the ISLG brand and/or relate to the end customer.

Sepcifically:

About ISLG: How does the construction image reflect the copy "A powerful combination of people and technology"? 

Start Your Trial:

This looks like a TTC subway station in Toronto. Not sure if this intuitively speaks to Creating an account.

Resources & Events:

The image of the solar panel we assume reflects 'latest research techniques', but the focus of this page is more around Resources and Events... is there another image that represents that?

Contact Us:

The USB/computer connections are about 'connecting', but when it comes to client servicing - the image gives off a rather technical and cold vibe as opposed to a human behind ISLG who can answer your questions. One suggestion is a beautiful shot of Vancouver - as this is the head office.

Some food for thought, as we are thinking about the entire brand/user/content experience on the site when it comes to really connecting with the end-customer. It all has to 'just feel right' and on-brand.

We understand these need approvals today, but would suggest considering sourcing more relevant images before the site goes live and would defer to design as this is part of the visual storytelling (that complements the content).

Thanks,
Tiffany

Hi Tiffany ,

I see what you're getting at. The header images are meant to represent the industries or sectors that are involved in investor-state disputes, which are outlined in the branding guide below. These are meant to relate to the industries users represent, rather than the function of the page.

Does that make sense?

Morgan

ISLG-BrandGuide - FINAL.pdf 2.03 MB • Download

Ah! If that is the strategic vision around the visual storytelling, then that makes sense.

Thanks,
Tiffany

Great. Thanks Tiffany .

OK. Assuming Monica doesn't have any further comments (but please let us know if you do), I confirm these as the finalized mockups for the new ISLG public site, and we'll proceed to the next stage in the process. Thank you to everyone for putting together a great work product. I'm really happy with it.

Note that I'll be sending a separate message with details on next steps.

Thanks,

Morgan

Hi, Morgan. I do have comments. I'll upload a marked pdf in 15 minutes.

Thanks

ISLG_WebDesign_Feb1-Monica.pdf 1.75 MB • Download

Here you go. Most comments I had made previously, so if the changes can't be made or you decided not to do them, please ignore.

Thanks

Thanks for the comments Monica . I think we can probably go back and forth on these items indefinitely, and none of these items seem particularly controversial. However, Melissa , could you please share your thoughts on whether these comments were considered, and if not perhaps further modifications can be implemented and circulated in another mockup.

Having said that, we need to move forward, which will be illustrated in my separate message, so the next version  Melissa  deems appropriate will be the final version.

Thanks,

Morgan