Start Simple
App Redesign
Start Simple, is a nutrition based app that focuses on helping consumers track their meals and discover new ones. However this app was in need of a redesign, that would easier to navigate and more engaging with its users.
Research
The app is currently lacking in both its layout and design, as well as some features. With the redesign of this app I want to add new features that make the app personal and shareable with friends.
Adding a feature where you can share your recipes and comment on others recipe posts will make it accessible for people to see what they are interested in making, and what others they already know have made and liked or disliked.
I also wanted to incorporate personalized profile and grocery lists. This can be good for anyone looking to try out a new meal plan or just looking for new things to make. The grocery list feature will help with organizing what one needs to buy. The users will also be able to search for meals they can make with ingredients they already own.
Current Display Layout
Site Mapping
Information architecture is very important. IA focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. To do this, you need to understand how the pieces fit together to create the larger picture, how items relate to each other within the system.
After that I created 5 potential user flows for the Start Simple app. User flows are diagrams that display the complete path a user takes when using a product. The user flow lays out the user’s movement through the product, mapping out each and every step the user takes—from entry point right through to the final interaction.
Wireframes and User Testing
Wireframes connect the site’s information architecture to its visual design by showing the paths between pages.
As designers wireframes help visualize the overall structure and layout of the app. They outline the placement of various elements, such as buttons, forms, menus, and content sections. They are helpful in planning the user flow and navigation within the app. Which can be seen in the images below. Below there are 5 different user flows that can be completed through my app.
User Testing is also a very important step in the design process as it helps the designers grain feedback. Early stages of user testing can be done through the use of wireframes.
Through user testing I was able to see which parts of my app did not make sense, and which parts needed to be changed to be understood more clearly. When designing we often miss these things as we are the ones creating the app so it makes sense to us but might not make sense to an outside party. This is crucial because it can save so much time when designing, if you are able to get out and mistakes before even really starting.
User Flow 1: Upload a Photo to your page
User Flow 3: Create a custom shopping list
User Flow 5: Save a recipe
User Flow 2: Add a new friend
User Flow 4: Add a recipe to my meal plan
Designing Assets
Now that we have completed all the research, wireframes and user testing we are able to bring out design to life.
When creating anything I like to start with making a brand board that can serve as a reference for colors, typefaces and in the case of designing an app special assets that are repeated such as buttons, navigation, etc.
Here is the brand board I used as a reference when designing this app. Green is usually a color that is associated with health, which is why I chose to make that the main color throughout the navigation and buttons in the app.
After that I then designed a logo that could be used throughout the app, as well as custom icons that could be used for each page of the app and the navigation.
UI and Prototyping
I then took my assets that I have created and started designing my app. Since I had done all this work before creating buttons and drawing out wireframes it was easy to know where to start as I had a very good reference.
After designing the pages it was time to start prototyping.
Prototyping is so important because we are finally able to see how our app will actually function and are able to click through everything.
From the image below this use flow is showing someone making a post to their feed. In prototyping I need to make sure all the buttons work and bring the user to the correct next pages, as well as making it so they can upload their own photo, type in a caption and scroll through their feed with a fixed navigation.
These user flows and their prototyping can be shown through the video link below, or you can click through yourself using the XD Link.
Start Simple App Mockup
Watch the prototyped video or click through the site yourself using the links below!
