As soon as I had completed the low res wireframes and the design system, I was ready to begin creating the high res Pitchiker prototype. This was the longest and technologically challenging phase of the Pitchiker project.
The first step was to upscale the low res wireframes using elements and components from the Pitchiker design system. In some cases, scaling from low resolution to high resolution only took one attempt, but in others, it took 5 or 6 attempts to get the designs right.
During this process of up scaling the wireframes I found the design system that I made useful since it kept all the designs uniform. Setting the font size and spacing early in the development process speeds up the process greatly.
After I had completed all the screens for both the coach side of the app and the player side, I created separate XD documents and linked them to create a working prototype. The process was much smoother than I anticipated. It may be due to the work I put into planning the low and high resolution screens.
<aside> 👨 Coach app
</aside>
<aside> 🏃♀️ Player app
</aside>