After settling on an initial design system, our team began transforming the rest of our low fidelity screens into high fidelity. Our goal with high-fidelity wireframes is to build a visually representative version of our first prototype that we can use to test with our users. This allows us to more accurately understand whether our users are willing to use our product, and take their feedback to further improve.
Running through our first round of building high fidelity wireframes was a great learning experience for our team because it was a new experience for many of us. In total, it took us ~3 part-time designers and eight weeks to complete. We spent two weeks for visual explorations, two weeks for our initial design system, three weeks for finishing our web+mobile wireframes, and one week for prototyping our wireframes for testing.
Here are key learnings we had from the process.
- Importance of visual explorations - Our team had initially anticipated two weeks to transform our low-fidelity wireframes to high-fidelity, but when we attempted the process, we were unclear as to which direction to take it. We spoke to more experienced designers for advice, and they recommended we look for inspirations to see which styles best match our brand and values.
- Importance of establishing our initial design system - The more experienced designers we spoke to also recommended we build an initial design system as it can help save time as we make changes to our designs. They were right. We made many changes and versions for each page, and our design system allowed us to make changes to only a master component, and have the changes automatically propagate to every other screen that uses that component. Lovely.
- Importance of designing for mobile first - Our team had designed all our screens for web before transforming everything into mobile. When we got to designing our screens for mobile, we quickly learned that we needed to make changes to account for a smaller screen. After making these changes, we then needed to update our web designs. Therefore, moving forward, we will design for mobile first as it is easier to transform mobile designs to web, than it is to transform web designs to mobile.
- Importance of designing test plan in parallel with designs - By designing our test plan in parallel with our designs, we were able to identify the additional screens we would need in order to achieve our desired learnings.
Through these learnings, we hope to improve our process and reduce time needed for future cycles.
Now that we have our high fidelity wireframes for our first prototype, we’re ready for user testing!