Once our team established the requirements that our app would need, we moved on to wireframing. We started with developing our Key Path scenario, which is the most traveled path through our app. We used pen and paper for this part of the process, and continued onto Figma so that we would still able to collaborate while building out each screen. We started this process by individually drawing some screens from the app that would meet our requirements. We decided that this would be a good way to see what each of us were envisioning and it could keep us from groupthink that might occur if we went straight to collaboration.
After we reviewed and talked about our different drawings, we moved on to Figma to block out the screens in a low-fidelity mockup. We realized it was ideal for collaborating because we were able to put screens up very quickly and show each other what we were doing with each screen. From here, we were able to develop a more fleshed out low-fidelity prototype for testing.
Once we had finalized the rough draft of our designs, it was time to bring users back for feedback. We developed a usability test plan to asses our low-fidelity designs before moving on to the final design stage. Since we have two flows through our app, from the Shopper side and the Seller side, we chose to create a test that would allow us to gain insights from both sides of the app.
On the Seller side, we learned that users were having trouble finding out that we offered "tips" for service that would give the user more information. We had no icons or indication to inform the user of this.
On the Shopper side, we learned that there was some surprising confusing between the messaging icon on the upper right, and the reviews section listed right under the store name. We knew we would have to make the meanings of each clearer.
Despite the minor issues we found above, all of the four users described the application as "straightforward," and "easy to use," which helped us to know we were on the right track. With plans to make changes to our designs, we were ready to move on to our final prototyping stage, where we implemented the feedback from our users and developed branding for InStore.
Onboarding was one of the more important features of the application, because we knew that each student was coming into this experience with limited knowledge and experience with business. We didn't want to frontload this part of process and overwhelm users, so we chose to keep it very simple and limited, and let the bulk of the education happen throughout the use of the app.
We wanted to keep the marketplace very simple for the Shopper so that the work of the students would stand out, as our user testing participants complimented the simplicity of the application. The marketplace is the starting point for our Shoppers, so it should be easy to navigate and understand.
Throughout the app, the Seller can find "tips" located in various points as education tools to help them better understand the essentials of their business. This is so the Seller can educate themselves on different aspects of business as they are running theirs.