Little Chef – An app for recipes

As part of an Interaction Design class, I created the below mobile application prototype with a project partner. The mobile application was to be built for people who are visually impaired as well as those who are not.

screen-shot-2017-01-09-at-4-04-25-pm_iphone6_silver_portrait

The entire process graduated through 4 phases:

  1. Discover: Understanding the problem definition and conducting research on the kind of target audience, and comprehending the problem itself. This included performing user research, and conducting web analytics and market research.
  2. Define: Clearly identifying the business goals (eg. profits, obtaining and retaining customers, and customer satisfaction) and the user goals (eg., convenience, ease-of-use, and saving time) through Personas. This way, the business goals are clear at the start of the project itself  and the pain points of the users is known well in advance too. This is key in designing a good user experience while also reaping profits.
  3. Plan: Developing a strategy to produce a good and most importantly usable product. The Information Architecture and content is planned out, the branding of the company is taken into account, user stories and journey maps are thoughtfully designed, wireframing and prototyping is done, and usability studies are conducted. All of these lead to ensuring that the final outcome is built with the user in mind.
  4. Launch: Developing and implementing the product. Be it a website or a mobile application, developing a product that is carefully designed with the user in mind, could be quite challenging. The developers need to ensure that the product is developed according to the research, planning and designing done by the UX experts, as every design decision is made after carefully consideration.

Since, it was a design class, we followed through only the first 3 phases.

  1. For the first phase, we read up couple of articles, websites and research papers to understand the customer base for such applications.
  2. This generated ideas, and we designed a user flow for our application (see image below).
screen-shot-2017-01-11-at-4-58-07-pm

User Flow for people without visually impairment

screen-shot-2017-01-11-at-4-58-20-pm

User Flow for people with visual impairment

3. Next, we created a site map (see image below) for the website and prepared a hypothetical usability test plan.

screen-shot-2017-01-11-at-5-05-58-pm

Site Map

Before creating the final prototypes, we created wireframes for each screen (PDFs linked below).

Little Chef: Accessibility wireframes

Little Chef: Wireframe regular users

And finally, we created an interactive prototype (the mock ups of which are below) of the mobile application using Sketch and InVision.

To take a look at the interactive prototype, click the below link:

Little Chef: Interactive Prototype

For the accessible version (primarily for the visually impaired) of our hypothetical mobile app, we created a high-fidelity non-interactive prototype (see PDF linked below).

Little Chef: High-fidelity prototype of app for the visually impaired