CRVNGS Website Design
CRVNGS is a website for foodies to track and share their cravings.
Introduction
Design challenge: develop an app/website
My initial challenge statement was to design a web platform that allows users to both share and track their cravings over time. There would be a social element in which users can follow their friends or other users, and comment or reply to others’ posted cravings to offer recommendations for recipes or restaurants. A secondary feature of the website would include the ability to produce statistics from the submitted information.
​
My target user is someone who often has cravings, female, between the ages of 17-35, medium or high earner, with a typical 9-5 office job. The user is likely a foodie, enjoys cooking and/or dining out, and keeps up with the food scene. She may be hoping to better manage her cravings through posting and tracking them and also enjoys socializing around the topic of food. She is most often using the platform during work hours, and thus, why I decided to design a website, which can be used on her work computer, vs. a phone app.
Name: Annlin
Age: 26
Occupation: Software Developer
​
Annlin is a foodie who loves trying new restaurants as well as new recipes in her kitchen. While she likes many types of food, she finds herself craving Chinese or Taiwanese food as that is what she grew up with. As a developer, she is on the computer for an entire workday and a site like CRVNGS is a good platform to keep up with the local food scene as the posts are location-based, and interact with her friends regarding a common passion.
​
Research
As my intended purpose for the website is for users to share and track cravings in a social way, I needed to gather information that would validate a demand for this platform beyond just the likes of my circle of friends. While cravings may derive from both physical and psychological factors, they are most often learned responses, related to “emotion, memory and reward” (Matteo, 2018). They have to do with cultural associations and personal histories. For example, the food I personally crave the most is pizza. Besides the fact that it is delicious, loved by all, and ubiquitous in the US where I’m from, my desire to eat pizza is probably more linked to my family’s tradition of ordering pizza when we are too lazy to cook at home (consequently, not needing to prepare, cook, or clean much). While this is not a unique practice by any means, it differs from person to person – one of my friends who is participating in my data collection of cravings regularly craves fried chicken because her household’s default “lazy food” is fried chicken; in fact, this is a “conditioned response” that is prompted on Fridays when she’s expecting that they would order it (Brown, 2019).
While there is a generally negative perception of cravings due to the emotional, impulsive, and over eating that may be triggered from having them, experts propose acknowledging our cravings rather than outright denying them. When we are too restrictive with the way we eat, we may become more deprived: “studies suggest that avoiding certain foods altogether often makes them irresistible” (Mee, 2006). It is important to manage our cravings by being mindful of the role they play in our lives (Cassetty, 2019). By tracking our food cravings, we can understand more about ourselves by discerning what signals the cravings, whether it is physical hunger or emotional causes such as stress or joy. With the information, we can build better habits and reform our reward mindset for eating. My goal in designing the platform is not necessarily to promote better health practices, but rather to gain better awareness of our cravings with the potential to manage them.
Process
I came up with a name for my site, "CRVNGS", which is just "cravings" spelled without the vowels, as it sounded trendy and was well-received by the people I pitched it to. After cementing my purpose for the platform, I proceeded to study the usability of other websites that had features that would fit well for the site.
For user research, I explored those websites further, and noted more specific aspects of the sites’ UX. I then gathered these features and mapped it out in a simple chart (see image below, left). I contacted a few friends to conduct in-depth user interviews, and asked them for feedback on the flow of the website. I gathered the insights and drew a simple sitemap (see image below, right).
I then elaborated on the functions, and then began creating some loose wireframe sketches that would require refining, like that of the image shown below. I showed it to the same friends I did the user interviews with and reorganized certain parts of the UI and the navigation flow according to their feedback.
I decided that my prototype would be best presented by creating a video showing how the site works, from the sign-up process to using the main features. The wireframe storyboard I created gave the best overview for using the site, as my prototype doesn't include a live link to everything as a real site would.
I simultaneously researched and referenced existing websites for branding/styling throughout the design process, to be implemented during the prototyping phase. I saw that illustrations and hand-lettered logos were trending, so I decided to have my branding centered around a hand-drawn, loosely illustrated style. I used my own handwriting to write out "CRVNGS" as the text part of the logo and decided to use a partially bitten cookie for the image part. I chose a set of bright colors, mostly warm ones which are regularly associated with food marketing, along with one cool one for contrast, for the color guide. I wanted the branding to follow current UI trends of illustrations and lively colors
Logo Variations
Color Guide
Typography
At the prototyping phase, I decided to use Adobe XD since I'm already well-versed with other Adobe software and thought it would be a good introduction to prototyping programs. For the most part, it was quite intuitive but I thought it lacked certain features that would have made it much more user-friendly. I am looking forward to trying other prototyping tools like InVision, Sketch, and Axure to see which one is the best fit for me.
​
According to the feedback from our cohort after presenting my progress early on in prototyping the site, I tried to combine the text and image parts of logo together, but really didn't like how it looked on the main sign up/log in page. I wanted to do something where the text "CRVNGS" would be combined with the cookie logo, which I used as a link to the homepage, but the text would disappear when the user scrolled down (see example and try scrolling down). Unfortunately, I wasn't able to figure out how to achieve that on Adobe XD.
​
I followed my rough wireframe sketches to create the prototype, and made UI changes as I referenced other sites. I found it difficult to keep the different pages consistent with the color changes for different pages.
In creating the "data reports," I referenced Spotify, Apple Health, and a few other sites/services that use personalization.
​
​
To add to the branding, I illustrated all of the icons used on the site, such as the "home" button and the magnifying glass in the search bar for a fully customized look.
.png)
I also added additional food illustrations to the background of certain pages.
I conducted user testing with those same friends by having them try the prototype with only a few hints of what actions to aim for. Then, I made changes in response to comments like "things are too oversized for the example speech bubble posts" and "I'd rather see how recent a post is than the time it was posted for the ones on my feed."
Before
After
Finally, I recorded the overview video showing the website's main features and added background music for the prototype deliverable.
Reflection
My biggest takeaway from the project was definitely going through the UI/UX design process and prototyping using Adobe XD. Due to time constraints, I felt the video was the best way to showcase the site and was happy with the turnout. IIn addressing accessibility, I created the site's look to be somewhat minimal (compared to Facebook) so that a user could use keys to navigate easily, but could have considered many other aspects. would like to return to the project and continue to develop it for my portfolio. I want to go through a few more iterations with user testing, perhaps with different people this time, and also consider other aspects of web accessibility standards.
References
Ball, J. (2019) The Double Diamond: A universally accepted depiction of the design process. The Design Council. Available at: https://www.designcouncil.org.uk/news-opinion/double-diamond-universally-accepted-depiction-design-process. [Accessed 7 October 2019]
Brown, J. (2019) Why you shouldn’t trust your food cravings. BBC Future. Available at: https://www.bbc.com/future/article/20190524-food-cravings-are-they-a-sign-of-nutritional-deficit .[Accessed 12 October 2019]
Cassetty, S. (2019) Why we have food cravings and what to do about them. NBC News. Available at: https://www.nbcnews.com/better/lifestyle/why-we-have-food-cravings-what-do-about-them-ncna985606. [Accessed 12 October 2019]
Korkishko, I. (2018) The UX design pyramid with the user needs. Syndicode. Available at: https://syndicode.com/2018/12/26/the-ux-design-pyramid-with-the-user-needs/. [Accessed 26 October 2019]
Korkishko, I. (2019) UI/UX design guide with terms, explanations, tips and trends. Medium. Available at: https://medium.com/swlh/ui-ux-design-guide-with-terms-explanations-tips-and-trends-754b9356d914. [Accessed 7 October 2019]
Kurtuldu, M. Basics of UX. Google Developers. Available at: https://developers.google.com/web/fundamentals/design-and-ux/ux-basics. [Accessed 8 October 2019]
Matteo, A. (2018) Food cravings: they’re all in your brain. Learning English. Available at: https://learningenglish.voanews.com/a/health-lifestyle-food-cravings/4184716.html. [Accessed 15 October 2019]
Mee, P. (2006) Sometimes it’s better to acknowledge your cravings. The Irish Times. Available at: https://www.irishtimes.com/news/health/sometimes-it-s-better-to-acknowledge-your-cravings-1.1018587. [Accessed 12 October 2019]
Pawar, S. (2018) 8 Principles of Good Website Design. Astra. Available at: https://wpastra.com/good-website-design/. [Accessed 2 November 2019]