UX- Webflow

Penny Pang
2 min readJul 20, 2018

--

After doing the userflow, the boss was actually looking more of a “workflow”. I was still a little bit confused but my colleague explained to me that it was just screenshots of the webpage and showing the flow of how to use the website. According to my research, this is called a webflow but normally “wireflow” using wireframes instead of an actual screenshot. I guess what was difficult about this was because I am doing “reverse UX”. These flows should have been done from the beginning before re-designing the website, not after. The thing is, I came into this job after the website’s functionality and usability were completed by front-end and back-end engineers :/ and my role was just to do user interface (UI) but seriously, to design UI, you must know the UX of it first so I know who I am designing for and what its functionality is.

Using the screenshot of the completed website, I dispersed all the images onto “draw.io” again. The lagging continued and I had a dilemma where I couldn’t save anymore because I was not a member and had to pay for the storage? The problem was solved by just creating a new account.

Taking an example again from any webflow design, the challenge was probably numbering the steps. I knew page 1 is home page but there were so many options to go to next from the homepage. So I just randomly number the options. Each number was then linked to a paragraph where thorough explanation of the flow are explained. I haven’t really seen much of the example that shows the screenshot of the live webpage actually. Maybe I am searching it wrong?

webflow I did for the IAR testing website
webflow sample

--

--

Penny Pang
Penny Pang

Written by Penny Pang

Full-time UX/UI Designer, Part-time online entrepreneur, Casual food blogger and innovation advocate

No responses yet