An interesting prototyping question

Process & Techniques
#1

Hope all are well.

I was wondering how I would go about prototyping a website like this?

I was specifically wondering about the way the chocolate bar was getting unwrapped and breaking apart and so on.

I really appreciate your feedback.

God bless.

Many thanks.

Peace.

2 Likes
#2

Personally, I wouldn’t worry about including the actual animation. I’d go with changing the image on hover and click states, and leave the animation up to my trust web-coding devs. Depending on the software you use for prototyping, you may actually be able to get some semblance of the animation in, but each piece is going to be a little different with this.

In the end, so long as your prototype can communicate the concept, I think you’re in the right spot.

4 Likes
#3

Awesome! Thanks, Doug! This was giving me a bit of a head ache, but you answer really helped.

Many thanks.

3 Likes
#4

Another question I have would be regarding carrying out usability testing.

Would you have any suggestions on how I would go about carrying out usability testing (pre-front-end developer) on a prototype where I am not totally able to show all the effects (for example, the chocolate bar, again).

Thanks! I truly appreciate your kindness once again!

2 Likes
#5

You’re welcome!

I’d approach your second question similar to the first: don’t worry so much about the effects, but seek to get your general design ideas across as efficiently as possible. I would do this through moderated UX testing in a nominally interactive environment (say something created in Balsamiq for early-development designs or JustInMind for something that is already more fleshed out). Doing this in person is ideal, but remote testing is also an option.

3 Likes
#6

This is a tricky one. I think for initial testing, as Doug says, the effects are not important. Really you are just testing that the copy motivates people to “add to box” and then proceed to checkout, and that all happens smoothly. At some point you would need to communicate animations to other stakeholders though.

In an ideal world, you’ll be working with talented front-end developers who are passionate about this stuff and will put the time in to making it happen. But the reality is sometimes a little different. I don’t work with devs - development is put to tender and outsourced to dev teams in ‘developing’ countries. To achieve something like the Simply Chocolate site would require a lot of documentation for devs (and the client for approval) and I’d need to mock the animations up. For such scenarios like this I use Adobe animate, or create an animated gif in photoshop.

Love the site, something to aspire to - thanks for sharing!

5 Likes
#7

TIL @tim0 is more dilligent than me :slight_smile:

1 Like
#8

Doug, I’m only as diligent as I need to be!

2 Likes
#9

Awesome. I am amazed by the great responses.

2 Likes
#10

Thanks! This is really helpful!

2 Likes