Prototyping multiple applications together


#1

I’m struggling with which prototype tool to use. My requirements are a bit unique:

  1. The prototype needs to show how multiple web and mobile apps will connect together
  2. The prototype’s purpose is to show the flow of how users will interact between these apps when “combined”
  3. The prototype will combine drastically different user interface designs
  4. The prototype will be given to users to test on desktops and phones (some of the connected apps are desktop-only and some are mobile apps)

My initial thought was to create the prototype using HTML/CSS. There will probably be about 100 pages, so I really need to use some sort of framework or software that can organise these pages. Being able to globally update markup and design changes would also be a very valuable feature!


#2

Hey @jesseechapman, Seems like you have your work cut our for you.

  1. Reading the requirements, it sounds like you are not necessarily prototyping a NEW product - rather communicating the functionality and connections between existing apps?
  2. I’ve used a lot of different prototyping tools and my suggestion would be to go with some kind of storyboarding approach. Most prototyping tools with artboard features will allow this. This way you will be able to plot down different screens, devices & products on one central place and have it hooked in & interactive ready to be tested by users.
  3. Not clear on what needs to happen here? what designs need to be consistent if you’re stipulating the connection between different apps?
  4. Going with the artboard and storyboarding approach, you might have an easier way of testing.

The amount of pages and stuff sounds tricky so my suggestion for tools:

  • Something like Sketch, XD or Invision studio (should you have access) would work great with the storyboarding,
  • Something like Axure will work best for organizing all the different apps as you can create a folder per project and then have a main screen where you can plot interaction and connection between products. Axure also allows for navigation and connecting screens so you will still be able to test.

I hope this answers your question?


#3

@jesseechapman

wow, it looks like a massive design project!

I agree with you on the best tool to share and to test prototypes. The HTML+CSS+JS prototype is a great way to share the design with stakeholders, clients and tech people.

Said that I’ve some concerns about the project overall:

What does it mean exactly? Are u going to design a single theme with variations related to the CDI of each entity? Are u going to design different themes for each entity?

Are u going to use a list of personas and user journeys for this tasks?
What about the cross-browser topics and the responsiveness?

Looking forward for your answrrs :slight_smile:


#4

Thanks for the reply @dopamino,

In regards to your questions, I’ve modified my initial question slightly to hopefully make a bit more sense.

I will need to technically design seperate “themes” for each application presented in my prototype.

In terms of the list of persons and user journeys, that stage will come later! :smile:


#5

Thanks for the reply @brendin,

Yes, that is exactly what I am doing - I am not prototyping a new product at all - I need to communicate the connections between the existing apps using a “prototype” presentation.

One important thing to note is that these existing apps could change their interactions based on user feedback at any given time, so I will definitely need to have the ability to easily make updates to the designs.

I have tried Axure before for much smaller projects, however, having a front-end development background, I found adding all the interactions to screenshots quite tedious and felt that directly using html/css/js would have been easier to implement and modify in the long run…


#6

hi @PandaSparkle

It sounds weird to me but I do believe that there’s no wrong or right way to execute the design process. I’m curious how much does it cost to define personas and user journeys after delivering lo-fi and/or hi-fi deliverables.

I will give you my opinion from two angles:

1 - From a pure design perspective, due to your code skills, I would go for the HTML option. Maybe it will be expensive, in terms of time and effort, but it will allow you to be more responsive to the changes. One pain point, IMO, for this option is about the feedback collection, especially during the iterations with your stakeholders
2 - From a product management perspective, if you want to onboard and to engage your stakeholders a clickable prototype made with tools such Balsamiq/Sketch+InVision could be the right one. This option could be cheaper, in terms of time and effort, but the pace of the updates could be slower than the HTML one

Good luck with it!


#7

Thanks for the reply @dopamino!

I actually am thinking that it might be better to do screenshots and create interactivity using azure or adobe xd (?)…mainly because of this:

If I create css/HTML prototypes, I will have to ensure that it matches the UI design perfectly, meaning line-height, padding applied…all those little details.

So I feel that if I take the css/HTML approach, I will end up spending the majority of my time doing front-end development work rather than interaction design. What do you think?


#8

hey @PandaSparkle
I fully agree with your angle. It looks like not the right moment to design pixel-perfect deliverables.
I don’t know your skills in Aure or Adobe XD, but still sounds to me too expensive for the first round of the prototype. I would collect the screens and connect them each other by using a simpler tool, for instance, with InVision you can:

  • easily create prototypes for the target device(s)
  • easily create interactions between the screens (web and mobile)
  • provide one single repository for all the screens you will work on
  • collect all the users/stakeholders feedback in one spot
  • organize your work with the workflow tool

Keep us posted on it!