Alyssa Spickermann


INTESTINA



your personal food diary



project focus



BRAND & UI DESIGN AND IMPLEMENTATION



SKILLS

Graphic design, UI design


TOOLS

Adobe Illustrator



​Intestina's mission is to help individuals manage their irritable bowel syndrome (IBS) symptoms by providing different ways to track meals. This project focused on creating a brand design, including typography, logo design, color, and photography assets. Key screens of an app design were created using the designed UI elements and grids.



BACKGROUND



intestina



Intestina aims to help individuals manage their IBS symptoms through various aspects of everyday life, including (but not limited to) eating, shopping, and sleeping. People with IBS benefit from diets that are rich in fibre, low in fat, and contain a lot of fruits and vegetables. The color palette and typography used throughout the brand design are inspired by the foods used in the logo, which are beneficial to people with IBS.



process



REBRANDING



inspiration



I conducted a competitive analysis, surveying existing logos and icons for applications that help users shop and manage their diets. The study revealed a variety of designs that included various foods and tools that are commonly associated with shopping and diets. I decided to sketch concepts that included focuses on meal planning, journalling, coupons, food, and shopping lists.



initial design



I originally used a pretzel, avocado, and strawberry, using foods that I believed were IBS-friendly, and that created a contrasting color palette. I later found out that the avocado is not a low-FODMAP food. Feedback provided a useful insight that the strawberry's stem was too detailed in comparison to the others. The avocado and strawberry were replaced for the final logo design.



logo



I chose to use IBS-friendly foods to create the Intestina logo. The egg and blueberry were chosen to keep the rounded and simple style that I hoped to use. I used dynamic composition, angling the three foods in the logo mark. When the logo is scaled down, the pretzel is used individually.



color palette



The color palette is based off of the logo's design, using colors found in the various foods. The colors create a split-complementary harmony. The blue and yellow create the palette used for the user interface elements.



primary color palette



secondary color palette



typography



Nunito was chosen as the primary typeface because it is sans serif and has rounded edges to create a soft and clean print. The logo's tagline is in Adobe Caslon Pro, chosen because of its serif style and a weight that goes well with Nunito.



brand book reflection



Creating this brand design gave me a clearer insight into brand design. I have previously done a rebrand project similar to this, but it was less in-depth. This project allowed me to create a brand from scratch, and better understand how important feedback is to a design process. Most notably, the outside perspective helped me see the differences in details between foods, resulting in a new logo. The brand book was fully made for the original design, and completely redone to accommodate a logo and color palette redesign.


brand book

UI DESIGN & IMPLEMENTATION



user interface elements



Selected elements have been designed to cover a variety of potential screens in Intestina's application. Rounded edges were used to continue the style from the brand design.



high fidelity mockups



The wireframes were provided to me, as the goal of these prototypes were to implement the design system created with the logo and UI element designs.



REFLECTIONS



next steps



This project demonstrated how important a design system is to ensuring consistency across an app's design. There are two main paths to take this project, given the time. The project came with pre-made wireframes, so it would be interesting to design the user experience from the ground up, researching the user group and designing new and more wireframes based on the research. On the visual side, I would explore building a full set of UI elements to try implementing them into the more thorough set of app screens.



reflection



This project gave me an in-depth experience in brand and UI design, including UI element implementation. The UI portion of the project inspired the redesign of the logo and color palette. Before this project, I always manually duplicated UI elements to maintain consistency. This project gave me hands-on experience using elements multiple times, altering the content as necessary. As someone who enjoys consistency, this project increased both my understanding and interest in UI design.