An End-To-End Application
Project Goals and Overview
This project is one I’m very invested in, aiming to deliver an outstanding End-To-End experience. User-centricity is a top priority in UX/UI design, but maintaining objectivity throughout the process is crucial to prioritize user needs.
My core goals are user comfort and extensive customization. Many user-friendly apps lack features like basic editing and categorized customization. To address this, I want to implement a robust filtering system that allows for cross-categorization. This empowers users to organize content in a way that reflects their unique preferences. Ultimately, this application prioritizes the user experience by placing them at the center of content creation and organization.
The Design Process
Research
Crafting a user-centered design requires significant dedication. Primary research, the initial legwork, involves numerous hours and demands meticulousness to ensure personal biases don’t cloud the findings. Accurate information is crucial and basing your app on outdated knowledge would be detrimental.
Secondary research, encompassing surveys and competitor analysis, then takes center stage. Here, you identify patterns and successful features within the market, informing your own product development. This research supplements the groundwork laid in the initial phase and continues to offer valuable insights.
Methodologies
The research methods that I will be conducting are:
1. User Interviews – Interviewing three participants who like to cook. Then, I will conduct reviews of the gathered information and take out key elements from their opinions, and use that for my affinity mapping.
2. Affinity Mapping – Separate the user interview information into sections to best understand the research data, and further conduct research if necessary. If no more research is necessary, I will then move onto the next design step.
3. Competitive Analysis – Conduct some research through the basis of competitive analysis. Setting similar apps up against each other will help me gauge how to move about my own app and its features.
Competitive Analysis
To ensure my recipe organizer app stands out, I conducted a broad competitive analysis that encompassed both recipe apps and note-taking apps, as users often leverage the latter for recipe organization. This analysis unearthed valuable features like filtering, sharing, dedicated recipe browsing, and social interaction through ratings and uploads. Most importantly, user interviews clarified the app’s focus as organization, not just browsing, allowing me to pinpoint competitor gaps and tailor my prototype to effectively address these unmet needs.
Participants
Participants: 3 (ages 22-56, unmarried)
Occupation: 2 work, 1 student
Cooking Habits:
– All cook for necessity, 2 for enjoyment
– Use recipes & cookbooks (1 mostly cooks by heart)
Desired Features:
– Recipe organization (folders, tags, filters – dietary restrictions)
– Photo/video support (1 participant prefers no videos)
Cooking Frequency:
-2 cook for themselves
– 1 cooks for self & others
AI Usage:
– None currently, open to trying the app’s recommendations
– App Testing: All open to testing the finished app
Click below to read my interview script, answer some questions, and see where you fit into the interviewees’ answers!
Next step: Personas
I really enjoyed making these personas.
I hand crafted them based on the knowledge I have gathered over the course of my research. These personas aren’t real people, but in the case of creating an app to best suit our users, I created some “users” to refer back to when I need to remember some integral research information (like pain points, and solutions suggested). They are a handy summary of a lot of the research conducted, and I enjoy this part of my project every time I create new personas.
Below you can find the Figma file where I constructed “Jennifer” and “Angela’s” profiles.
Jennifer
Angela
How Might We...
How might we provide our users with a responsive experience that best suits their needs and allows for a smooth user journey?
These are 3 questions I ask myself to better hone in on what the users will need throughout their “stay” in my recipe app. the key with “How Might We” questions (HMWs), is to be specific.
How might we help the user find their favorite recipes fast?
How might we help the user go about saving their images/recipes?
How might we help the user feel that the app is personalized to them?
I will add multiple filter options and tags so the user can save and search through those.
Easily customizable sections (for example: ingredients, time cooking etc.)
When saving an image, options such as tagging, and mandatory naming come up.
Prototype Prep
I like to call this part of my projects “Prototype Prep”. It is not separate from research per-se, but I like to separate it because the research portion that is collecting data, is different in my mind than the putting together of the prototype foundations such as Sitemaps, Task and User Flows, Branding, and the UI Kit.
Task Flows
Task flows, my favorite design tool, helped me visualize the steps users would take to complete key tasks within the app. These flows, like creating and saving a recipe, informed the creation of essential screens within my prototype. While just one formal flow was required, I experimented by combining elements from multiple flows to explore user interactions more broadly. For future projects, I’m eager to create a wider range of task flows to empower users to explore the app’s full potential.
Food And Recipe App Referenced Mood Boards
As this app is entirely conceptual, I relied on references and color palettes to craft a compelling visual representation for the potential client. This initial design phase focused on selecting colors, fonts, and UI elements inspired by successful competitor features. Essentially, competitor research served as a springboard for informed design decisions.
User feedback informed key design decisions: filters were incorporated based on user requests for easier recipe browsing, and a green color palette was chosen due to its positive association with food. Manjari font was selected for its welcoming and friendly feel.
FoodFolio
Logo Explained
The final logo for “FoodFolio” depicts a steaming pot cleverly formed by two interlocking “F”s. User research informed the green color palette, symbolizing organic food, while the steam remains white to avoid unintended connotations of green. This design offers versatility across various formats.
Branding and UI Kit
Over the years, YouTube has had a variety of logos, but never made major changes to the original design. It started out more shaded and 3D, but as time went on, it became more flat and 2D.
Main Color #1
#07CD03
Lighter for highlights
#AADEA1
Accent Color
#3B8BC6
Neutral #1
#FCFCFC
Neutral #2
#F9E2C1
Dark Neutral #1
#2A1401
Dark Neutral #2
#552903
#07CD03
#AADEA1
#3B8BC6
#FCFCFC
#F9E2C1
#552903
#2A1401
Main Color #1
Lighter for highlights
Accent Color
Neutral #1
Neutral #2
Dark Neutral #2
Dark Neutral #1
Wireframing
Low-fidelity wireframes, created quickly from hand-drawn sketches and informed by user research, served as the foundation for this project. These initial screens prioritized user experience and customization, with a focus on task flow clarity. While exceeding the required five screens, this approach aimed to comprehensively illustrate the application’s overall flow for the client.
While mid-fidelity wireframes are common in UX/UI design, they were an optional step in this project. This allowed me to move straight to high-fidelity wireframes, the final stage.
Leveraging all the branding, research, and prior wireframe work, I poured my heart into crafting these high-fidelity wireframes. The result? Some of my most visually stunning work to date. The intricate connections within these 57 screens meticulously depict the entire recipe creation process. This accomplishment, representing over 40 hours of dedicated effort, fills me with immense pride.
High Fidelity Wireframes: Design Choices
Despite investing over 8 hours finalizing the high-fidelity prototypes, a critical issue emerged during testing: the “Create New Recipe” icon and footer were missing. After troubleshooting and consulting a mentor, the solution remained elusive. Fortunately, a UX designer friend identified the culprit – a lack of Auto Layout frames. She provided a refresher on Auto Layout, emphasizing the importance of creating frames around each app section and allowing content to expand beyond the footer without obstruction.
So now that I know what is wrong, I can apply those critiques right? Wrong.
I tried to create the grid in simplicity since I didn’t have the time to go back and work from scratch to create every frame like that, so I tried my best to create the bottoms of the screens so that the footer and icon can be fixed and that’ll be it. So trying that, I realized, you cannot do that, without creating it in Auto Layout and frames – the way my friend explained to me. She said I should be able to, and she was even unsure why those steps didn’t work on their own. However for now, I didn’t have the time to find that out.
So, I moved onto the user testing, as that’s all I could do to fix the errors occuring.
User Testing
Main User Task Flow
To ensure a smooth testing experience for participants, I developed a detailed script outlining each step. This not only prevented confusion and frustration for testers, but also facilitated a productive session by keeping the user flow clear and maximizing the value of their time.
Usability Testing Results
Things that went right:
– Everything in the first two task flows were great!
Things that went wrong:
– Text was a bit hard to read since it’s small text
– The (third task flow – issues came up before user testing that were anticipated) bottom navigation and plus sign did not show up for her to press.
How I’d fix them:
– Creating the final wireframes in the way my friend taught me – from scratch. I’d have to start with framed and “Auto Layout” sections so the issues don’t happen, and work up from the foundations to make sure it is “fixed” and shows up.
– I wouldn’t create bigger text, but I’d do more testing with younger and older audiences together so I know whether it’s an issue with the eye-sight of the viewer, or whether I have to review the app in accordance to industry standards.
Personal Project Overview
1. I absolutely loved being able to make design choices based on a currently existing brand. It was a great challenge, and I think I was able to find what makes iPhones AND YouTube’s platforms so beautiful and aesthetically pleasing, and create something cohesive for that.
2. Accustom myself better with the industry’s methods, Figma features, and avenues of design so I can know and choose better even when I think I “know best” what the site needs. I am constantly reminding myself that UX/UI Design is not fully about my decisions as a designer, but a culmination of research, industry standard, and critique to make it the best it can be.
3. I am proud of the progress I made in this short amount of time, and look forward to getting better and better as time goes on in m y career trajectory.
4. When moving forward with the tweaks for the final prototype, I would be changing the formatting to best accommodate the developers getting the handoff – as my friend reminded me that developers work in their own ways, and the way she taught me to use Figma with “Auto Layout”, will help not only my designs, but also when it comes to the handoffs with the developers.
Somethings I want to learn how to do:
1. Learn to better my cohesive skills when it comes to my site, different categories, and how people will interact with the aesthetic changes – creating a more consistent design for my site overall when moving around as a viewer.