Designing an Interactive Mobile App Prototype

K Needle
kneedle-porfolio
Published in
4 min readDec 6, 2020
Image (left): “Supermarket” by Open Grid Scheduler / Grid Engine; Image (right): App prototype screenshot.

Background

For a class assignment I chose to create an interactive prototype for a mobile app. My approved proposal was the creation of an improvement of an existing app. I chose to address a unique app providing users with an improved user experience by designing a simplified journey to success. This app will provide users up-to-date pricing on common items being sold at brick and mortar shops located near the user’s location, using a crowd sourcing data model. While my research focused on providing services for shoppers at supermarkets, the functionality could easily be extended to other marketplace vendors. The primary purpose of the app is to provide users a simple way to save money while shopping through “best price x location” correlation — enabling smart comparative shopping affordances that are relevant to fulfilling their shopping lists.

Discovery Phase

UX Research Methods & Techniques

I made use of a systematic approach and conducted all of the research efforts resulting in a testable prototype of a Market Shopper App. My research included:

  • Conducting a Comparative/Competitive Analysis.
  • User Interview Research.
  • User testing of paper prototypes to map the user’s journey to completion of tasks.
  • User testing logic models including architecture needs as well as user card sorting exercises.
  • User testing interactive prototype designs.

Comparative/Competitive Analysis
While performing competitive analysis research (more fully discussed in my project brief that explores the project description, user base, core functionality, operating platforms, competition, and future market opportunities) I found only one similar app existed. I installed the app on my mobile test device and found that it was not particularly user friendly (but it did still offer the user some value). The key problem I identified with this app was that the user, when entering information about an item (particularly new items not currently on their shopping lists/database) could require up to a dozen fields and several process steps to complete. My goal was to simplify this process — which I eventually did — and settled on a design that required only two clicks.

Only two steps needed to enter new items.

User Research
After performing the competitive analysis, I began conducting user research in the form of interviews via informal, but probing, discussions with family, friends and work peers so that I could form a more complete idea of user expectations for such an app. Overall, the people I interviewed were very receptive to adopting an app of this type — if I could deliver one that was easy and fast to use.

For proof of concept I first made use of paper prototypes to map the user’s journey to task completion (doing so minimizes development costs and testing times). I presented an initial “home” screen and a fundamental task to complete. The user would select from one of the options presented on the first screen, then I would present the second screen, corresponding to their selection, that contained “next” or additional options. The user would follow these screens (or “go back” to a previous screen) until they completed their “journey” or decided to quit. Then the next task was presented and testing was continued.

Logic Modeling
Following the information I learned from the previous user testing sessions I began sketching out process flow diagrams and supportive app architecture making use of paper & pencil. I conducted card sorting exercises to guide my app menu architecture focusing on simplicity to succeed at tasks as well as making note to include potential, desirable redundancies. This provided me with a logic foundation needed to begin building my interactive prototype.

Card sort and search logic flows.

Results

Each of the discovery steps above involved multiple iterations and informed my decision making on following development steps, until reaching the final interactive online prototype.

Sample one from iterative process.

Interactive Testing Review
My “Market Shopper” prototype was reviewed by my instructor and fellow classmates and was presented to some of my users for additional testing. The feedback I received was incorporated and I was able to create and deliver a prototype that is intuitive, effective, and easily mastered by my users.

Selected screen shots: App suite, Create shopping list, Shopping list (left to right).

What I learned

Making use of user centered design solutions (within the structure of the “job to be done” UX model), the primary lesson I learned through this exercise was that reliably incorporating UXD best practices, from early research through to functionally testing of prototypes, is not only necessary but well worth the investment. The testing methods I used included multiple micro-tests, simplified prototyping to prove logic models and thorough discussions with users to gain understanding of their requirements and desired outcomes. I worked through several iterations, testing and retesting, in order to advance a design that not only met my expectations, successfully met the assigned project goals, but also those requirements contributed by my testers.

View Project Brief
View Interactive Prototype

--

--