Northwoods Roasterie & Coffee Shop

1. Northwoods
Roasterie &
Coffee Shop
App Design

2. Project Intention
The intention of this project is to create a visual design that effectively shows my interests.
I am a designer with a passion for all things technical. In my work, I incorporate my knowledge of
Computer Science and Graphic Design. I am curious about the role computers play in artwork and
how they can contribute to the advancement of creative ideas. My love for digital design work and
problem-solving skills make my designs the best they can be.
Artist Statement

3. Background
This project was originally started in my previous class, Systems Analysis & Design. The idea was to create a
system that could then be programmed. I realized that the system we created in that class would be a great
point to start from with a design perspective.
In my Systems A&D class we didn't actually program or design anything, instead we just planned out how the
system would work using various diagrams. The most important diagram that I used for the app design
process was the Domain Class Diagram.

4. System Design
This is a Domain Class Diagram. The point of this diagram is to
show the architecture of the system and all of the necessary
components that would allow the app to run smoothly.
The main takeaway that can be used from this diagram in the
context of App Design is the Class defined as "App". This shows the
variables that a programmer would use in their code that need to
be present in the design.

5. After examining the system design I was ready to start working on the actual design of the app. Starting with
thumbnails and roughs I made some rough layouts of the pages and ideas that I had.
Design Process

6. Design Process
In addition to making
thumbnails and roughs I created
an inspiration board from which I
wanted to pull ideas from for my
design.

7. After reviewing my inspiration and roughs I had to settle on the branding. I needed to choose my color palette
and typefaces to keep a consistent look.
App Branding

8. App Design
The next step was to actually start designing the app. I chose to design in Adobe XD so that prototyping the
app would be a much easier step. My first round of roughs in Adobe XD were tough and it took a little bit of
time to get the look that I was hoping for. After a while I was able to finally create a look and layout that felt
like it accurately reprsented what I was going for.

9. App Pages
The following are a closer look of the app pages.

10. App Pages
The following are a closer look of the app pages.

11. Final Comments
Ultimately the goal with this project was for me to take my previous system design and turn it into an
actually designed piece. I wanted this app design to show how connected programming and design
work can be and how they rely on each other.