Next, I added colour, images and text over the wireframes and made all these mockup pages. I knew from the start I wanted the app to be dominantly white coloured, because it feels welcoming, breathable and not so serious. I also decided to use the Timothy’s blue and red as spot colours in this case, and to divide content. I tried a few different backgrounds with the start of the app to see what worked, and I liked the flat white background. I continued with that style throughout the other pages. In regards to text, I started using Market Deco (Timothy’s logo text) as headers at first, but it looked too serious and I didn’t really like it. I started looking through dafont.com for some fun coffeehouse fonts and found one I liked, and decided to use it as headings for products and promotions. I also started using Helvetica as body text and again didn’t like the look, so I found another font for the app’s body text that went nicely with the new heading font. Everything that came after those decisions came easily because I had ideas of what I wanted content, lists and product promotions to look like. I just went with it. I did continue to look at competitor app’s for inspiration for things such as forms and navigation.
After I finished the pages, I went on to try icons for the app. I started with my original logo with different browns as backgrounds, but I thought they looked ugly and plain. I then decided to try adding some colour, and ended up with the blue-red gradient icon that I chose to use. Ultimately I thought that the Timothy’s O is still recognizable as just that, so making a few minor changes for the sake of the app icon was okay.