iPad App: Shared Spoon
This was my first UI/UX project, and it was through working on this that I discovered my passion for UI/UX design. I loved thinking about which features to include, how to organize them, which visual style was best suited for the app, and what kind of visual feedback the user needed.
For this project specifically, I was asked to create an iPad application based off of a book of my choice. I chose to reference a Sunset cookbook, and create an app that streamlined the process of planning and cooking shared meals.
My audience was predominately young adults who live with roommates. For instance, my roommates and I share groceries and cook together. It's very cost-effective, but the process is inefficient, and we rely on a variety of apps or software programs for each part of the process: to find new recipes, we use Pinterest; to compile grocery lists, we use the iPhone Notes app; we use Excel to split the receipts; and we keep track of the recipes we choose each week by texting screenshots to our Facebook group message.
I'd been researching this topic for months before I was even given this project. I was trying to find a meal planning app, but I was surprised by how few were available to choose from. I found quite a few apps themed around diets, and the others either used ineffective visual styles or lacked important features, such as the ability to collaborate with roommates or track grocery expenses.
I began my sketching process by listing the main features I thought would be most helpful based on my own experience with meal planning. I began categorizing and grouping different features together, sketching icons for them, and trying out different layouts for each page.
I began studying UI elements and transitions in similar apps, such as Pinterest (for the Recipes page) and Google Keep (for the Grocery List page). These are apps that I'd been using for years, but I'd never consciously looked at the visual language that made the user experiences positive. As I looked at examples to inform my work, I was fascinated by all the details that went into UI/UX design and the patterns that created familiarity for the user.
5. ITERATIONS & PROTOTYPING
My original designs didn't include labels for the recipes, an account feature, or a month view for the calendar. These were things I added after getting feedback from classmates.
I also formatted the search filters (breakfast, lunch, etc.) in a style that looked like a navigation menu. After doing more research, I realized that this was a misleading UI element, and did not allow the user to choose multiple filters. I changed the format to a horizontal list beneath the search bar, since that's a widely-used visual style for that feature.
The first version of my grocery list had a misleading UI element, as well. Because the plus button was beneath the frozen section, it appeared that the user could only add items to that section. In my revised design, I added a plus button to each section. However, this still isn't the best solution, because the user shouldn't have to manually sort their groceries. If I were to revisit this design, I would add an input field at the bottom of the screen; users could enter an item, and the app would sort it for them.
6. FINAL PRODUCT
I received a lot of positive feedback from classmates who said this app would be very helpful for them. They also responded well to the user interface, and were able to navigate through the prototype screens to complete tasks with little difficulty.
As this was my first user interface project, I definitely see room for improvement. If I were to continue working on this project I would increase the contrast of the gray values slightly to improve readability; explore ways I could more clearly label each feature; and try a few different layout designs for the spending section. I would also consider integration options with other apps or AI devices. Overall though, the project was successful in meeting the users' needs by streamlining an inefficient process.