Desktop
Mobile
Product: The website/mobile is a video archive of recipes that people can watch and plan their weekly meals with.
Project duration: 1 month
Understanding the person:
Personas sample:
Problem:
Doyette is retired woman who need to plan her grocery items better to minimize cost and effort in buying groceries whether physically or online.
Goal:
To provide a way of planning their weekly meals in turn saves time and money when doing their grocery shopping with added value of archived of videos and recipes to with the value addition .
User Journey Map
Research was full integration with her life. Reflecting on prepared meals the previous week, in actuality, takes more of a back seat here compared to listing down and purchasing steps were there's more emphasis on "winging" it. Sometimes, preparing a grocery list is during walking around the grocery floor.
This is not very optimal as we know, having a weekly plan of menu can maximize ingredients purchased. For example, to maximize the amount of meat used during the week will entail menu changes that will use less meat. Another example would be using ingredients that will expire sooner, earlier in the week to minimize wastage.
Every grocery trip is maximized, therefore minimizing cost of good and transportation, as well as physical costs of carrying and sorting ingredients in the refrigerator. This is how professional restaurants does it on a periodical basis where monetary, time and effort gains are the main back one of the kitchen.
Site-Map
The site map took multiple reiterations. At first, I concentrated too much on exploring video recipes as in Youtube. I had to reiterate this during the wireframing stage already as it didn't make much sense prioritizing that if solving the user problem was actually still the goal. Realizing this I decided to rethink and scrap the wireframe and initial site map before it goes further. Damage control.
Initial Site map (scrapped)
I fell in love with the idea of showcasing the recipes and went too far from the problem of the user.
Site map that I decided served the users better was simpler and easier to use. My site became less of a recipe website and more of a planner with the value addition of an archive of recipe videos..
Wire Frame
I designed for an iPad the first time. I found this to be the middle ground so I could do a graceful degradation into smaller devices yet easy enough to do progressive enhancement.
I skipped paper wireframes as I felt more comfortable doing it straight in Figma where I can modify, reiterate, redo wireframes without wasting paper.
There were more reiterations as I went by even as I ventured towards a high-fidelity prototype.
Explorative Wireframing for other devices
Low Fidelity Prototype
This turned out to be the most important part of the project. When I did my initial interactions putting frames together, I found a sense of disconnect from the problem. Initially, I checked it off as I felt like I did the process correctly and there was no reason to go back to the previous steps. However, user research showed and confirmed the unshakeable feeling I had. I wasn't solving the problem statement. I put myself into the project rather than making the user the priority. I had to redo everything. I had to.
Not all frames had to be changed. Just where my priorities were supposed to be to begin with. I reordered the frames from important to less important and went from there.
Before:
After:
I put the highlight on the Dashboard and planning pages rather than the exploration page. I also removed the "home" page as hierarchy of featured videos was not that important as being able to quickly explore videos and/or having users search tags for themselves. I stopped trying to be a magazine.
Usability Studies
Parameters
Findings
Refining the Design
The additional navigation menu on the side gave users more options on how to filter and quickly navigate through playlists. This was absent in the first design. The add recipe button is also added and highlighted to make adding recipes to your plans more intuitive.
Mock-ups
Exploration page
Watch recipe page
Adding recipe to dashboard
Dashboard
Mobile version
Take-Aways:
Always put the users problem at the back of m mind. It will help minimize going too far into the design process "blindly". Falling in-love witha certain feature that you had in my mind is always a threat. So, "measure twice, cut once".
Moving forward:
Things to be added in the future that are nice to have:
Integration/collaboration with an online grocery app.
Chromecast application to make it accessible in listening in multiple rooms like a podcast or BG music while cooking.