#toddlovesprocess

[maddysdesignprocess]

Next, I generated wireframes in Illustrator from my sketches. Throughout this process I kept referring to competitor apps for inspiration and ended up with all these wireframes. These are the main pages in the app, and some of the layouts will be repeated throughout the app.

[maddysdesignprocess]

I started the App Design project by writing down what I wanted the purpose of the app to be. I decided that this app will be used to order and pay for your Timothy’s drinks, as well as collect points and keep up-to-date with promotions and new products. I then looked into competitor’s apps and found that the app layouts are similar, just with different designs, colours, etc. I then did a few sketches of wireframes and potential layouts for pages in the app. I stuck to getting main ideas down, and brought them into Illustrator.

[maddysdesignprocess]

This is the final 8 page annual report. After consultation I made a few changes - I started by shortening the letter from the president and ceo from 2 pages to 1, which made room for more “business at a glance” photos. Next, I found more photos to be used for “business at a glance” and put some in the spaces next to the ceo letter. Then I rearranged the photos on the first spread and moved the mission statement to the second page to give it more room. I also got rid of the table of contents since it was unnecessary. Next, I fixed the line graph under the financial highlights and made the sum jumps more smaller so the graph has some dynamism. Last, I zoomed in on the map on the back page to show the cluster of Timothy’s locations and added text to remind the viewer of the locations in Edmonton and Winnipeg. Voila! I think it looks awesome.

[maddysdesignprocess]

Here is the first draft of the annual layout. I wanted to bring in the blocks from the cover into the inside spreads somehow, so I brought into the first spread and used the blocks to hold photos of products/coffee related content. I also used the blocks to hold text, such as the mission statement and table of contents. For the second spread (Letter from the President and CEO) I kept the background the creme colour with a photo - simple and formal, as should a page that has the President and CEO’s letter on it should be. For the last spread (Financials) I decided to use a chart to organize the financial information, then use a couple graphs to give visuals for that information. I got the financial information from the Second Cup Annual Report, and graph inspiration from the Google.

[maddysdesignprocess]

I decided to start this project off simple and generated some covers as a start. My first cover was typographic and very minimalist, and I liked it, but wanted to explore further. My next cover incorporated the Timothy’s “O” to add something nice to look at, and remained minimalist. My third cover is a stock photo with some transparency boxes and text (it won’t upload right now, will try again later). I liked it as well, but I didn’t feel like it was mine. At this point I was tired of looking at a computer screen so I came back the next day, and generated the last cover. I got the idea when I was searching the internet and found a pop art poster promoting coffee. I brought the idea of coloured boxes into my design and added simple illustrations, some text and the logo. Once I finished it, I knew this is the cover I’m going to use because it felt like my own, and it looks awesome compared to the other ones (in my opinion). 

[maddysdesignprocess]

Here are my initial sketches. I started by reading the project brief and making notes of what content we needed to include in our annual reports. Then I wrote down some quick ideas - what style I wanted, what kind of text and colours. I had a few ideas off the top of my head but I went through the Second Cup annual reports from previous years and got a lot of inspiration from them. I noted layout designs and the placement of photos, then looked into their infographics. I pumped out a lot more ideas once I finished the Second Cup annual reports, and brought these ideas into Illustrator.

[maddysdesignprocess]

Here’s a couple layouts I was considering but did not pursue. I also explored the shapes of the social media logos, but decided to keep them all square because the instagram logo is always a square.

[maddysdesignprocess]

Here is the second and most recent draft of my website design for Timothy’s. Some changes include the illustrations of the types of coffee under the “best sellers” section on the home page, as well as changing the images under the Keurig advertisement. The old illustrations that Timothy current uses on their website didn’t fit well with the newer design of Timothy’s, so I recreated designs to better fit the new look. I kept them simple and to the point.

As for the design of the other 3 pages, I derived inspiration from both Timothy’s and Starbucks’ websites to organize content. I decided to keep big clear images of beverages or coffee at the top of each page to warmly welcome viewers to the new pages, as well as adding colour and interest to the pages.

Also new: for the nav bar, I made the text for the page being viewed the colour red to indicate that it’s the current page. Then I added the webpage bar at the top.

Any feedback would be awesome

*this is the final