The app designed was to enable users to shop in any supermarket and check products for non-vegan ingredients using barcode scanning. The app has the potential to provide new features in the future so that allergy sufferers or indeed anyone with specialist dietary needs could scan a product and be alerted as to whether the chosen product contains unsuitable ingredients.

The project was explored from a UX perspective and consisted of extensive documentation alongside high-fidelity UI designs.

Action & deliverables

  • 1

    The app was designed primarily for the Google Android platform. The rationale for this was based on market research into the usage statistics of smartphone users.

  • 2

    I devised two surveys to collate information from potential users of the app. The first was a printed, small-scale survey and the second was an online survey to attract a much greater number of participants. The questions in the survey gave quantitate and qualitative data which was then presented, where possible, visually in charts.

    The feedback was overwhelming and 418 people responded to the online survey.

  • 3

    Results from the surveys supported and clarified the demographic for the app. The target market had previously been discussed during early documentation but the surveys provided evidence to back it up.

  • 4

    Data collated from the surveys was used to help craft three personas – two primary and one secondary. These helped to describe the app’s typical target users.

  • 5

    User flows were created to convey the major steps taken by a user when interacting with the app.

  • 6

    The original sketches made of the interface screens were drawn on paper with accompanying annotations to explain how a user interacts with them.

    The sketches deemed most successful were then developed into more precise wireframe mock-ups using OmniGraffle Professional.

  • 7

    One primary and one secondary user, chosen from the personas, were used to conduct a cognitive walkthrough. These fictional but realistic people were led through a set of tasks to complete pre-defined objectives, showing how a potential user of the app is likely to interact with the interface. Annotated wireframes explained the steps taken by each user.

  • 8

    Five users were placed in front of a computer, one at a time, for a cognitive walkthrough. They were then asked to read a cover sheet explaining the purpose of the proposed app and how to interact with annotated wireframes on the screen. Each participant was observed and the mouse-click and screen capture software Silverback recorded their actions and comments. After the testing session their performance was analysed.

  • 9

    The app was re-designed until three sets of high-fidelity interface designs were complete. The final designs were detailed, accurate and closely resembled how the developed app should look.

  • 10

    To help evaluate which of the three sets of final designs would be most popular, they were shown to small group of people at a vegan café in London. Five people, three females and two males, were gathered together and given a short presentation to explain the app. The interfaces for each design were then shown to the participants and they were asked to for feedback.

    The feedback obtained from the discussion group was useful and gave an insight into the design preferences of potential users. A few of the participants also gave suggestions for new features which could be added to the app in the future.


The documentation provided the developer with the design and UX planning, including extensive research and user testing, essential to any successful app. Development can be started with the knowledge that the design has been thoroughly explored. The high-fidelity designs give a clear vision of how the app interface should look.


  • Hardbound documentation book (11,000+ words)
  • CD of high-fidelity designs

What I did:

  • Market research
  • Usage statistics
  • Explored existing solutions
  • Discussed UX approaches
  • Data collection/surveys
  • Personas
  • Cognitive walkthrough
  • User flows
  • Wireframes and prototypes
  • Usability testing
  • Re-design and development
  • Extensive documentation

Leave a Reply

Your email address will not be published. Required fields are marked *