Why prototyping with real data? (Thanks everyone who chimed in for this question!)
Bring design closer to final product
Stress testing the design
Improve the quality of user testing
“More realistic. Especially if you’re doing User Testing. In UT, participants know it’s a prototype. So they get a sense of it being fake. They know they can’t really make mistakes. the more realistic it is, the better feedback you’ll get”
“Realism, but also accuracy. I design for sporting products and using things like real player names or horse names, for example, is really helpful.”
“Designing with the production data”
Use a combination of code and design components to prototype with data
Use React state and async/await to fetch and display data
Prototyping with data is a broad topic. I’ve only scratched the surface in the webinar. There are other important topics such as
Authorization (how to access data when you need to login)
Cross-Origin Resource Sharing (CORS)
Design for latency and errors
Integrate with real time data
Other data sources such as device sensors (heart rate, accelerometers etc.)
In import as rows from “./french.json”, does just mean import everything?
It imports everything that’s exported
If importing from a json file, it’ll import everything. And it’ll create an array or object depending on what’s in the JSON file. The array/object will be stored in a constant called “rows”
Can you show the code for a design component, like RestaurantRow?
Design components are created programatically, so its code isn’t worth much reading. In fact, it looks like below. You can hold the CMD key and click RestaurantRow in the import to open the file.