calculator app

SAMANTHA VIEHWEG | ART 337R | FINAL PROCESS BOOK

brainstorm
calculator app
Overview Calculator Ideas
1. Pregnancy due date
Research 2. Traditional mathematical
3. Days to grow plants
4. How much wood needed
Testing 5. Cost of project
6. Star in region of sky
7. Fish in region of sea
Presentation 8. BMI
9. Days to lose weight
10. Pounds to reach BMI
11. How many flowers in an area
12. Daily calorie intake
13. Square footage
14. Circumference
15. Waist to hip ratio
16. Yard space for dogs
17. Expected fetus growth
18. Retirement age, income-based
19. How long to dry paint
20. Recipe weight conversion
21. Days to next full moon
22. Days to next menstrual cycle
23. Distance to destination
24. Breakdown of book reading
25. Water for pasta
26. Water for rice
27. How long to bake a pie
28. Daily water intake
29. Daily vegetable intake
30. Daily vitamin intake
31. Daily exercises to reach goal
32. Time to next haircut
33. How long to rest dough
34. Times to water plants
35. How much to feed cats
36. How much to feed fish
37. Size of tank for fish
38. Size of pot for plant
39. Aperture based on sunlight
40. Length of necktie
41. Fabric for sewing project
42. Paint needed for art project
43. Skin type calculator
44. Hair type calculator
45. How long to thaw food
46. How much money to save
47. Steps based on distance
48. Calories burned by distance
49. Calories burned by reps
50. Zodiac sign calculator
Calculator App Concept
Samantha Viehweg | Art 377R | Fall 2020 | Project 01 2
brainstorm
calculator app

Overview Final Idea - Zodiac Calculator

I decided to create a zodiac sign calculator because

Research there are not many apps out there that provide this
function, and I know many people interested in
knowing their zodiac who do not have the time to
Testing chart it themselves, and do not keep it memorized. In
addition, this calculator would calculate information
related to the zodiac sign, such as elemental asso-
Presentation ciations, and astrological star signs. As the natural
remedies and lifestyles become more popular within
society, information related to zodiac signs become
more relevant. It is also rather difficult to calculate all
the information related to the zodiac without doing
extensive research, and therefore this calculator app
would serve an important purpose for its users. If they
forget their information, they can easily come back
to the app and input their identities to retrieve the
information. My design will be for a vertical (portrait)
orientation on an iPhone XS.

Chinese Zodiac Illustration

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 3

the issues
calculator app

Overview Competitor Apps What My App Will Solve

While researching competitor apps for similar con-

Research Birthday Input - Competitor App Login - Competitor App cepts that calculate horoscopes. I noticed a few is-
sues that my app plans to solve. The first is that many
of the popular zodiac apps give information for all
Testing the signs right away, and the information inputs are
confusing to find and use. In my app, I plan to make
the calculation portion simple and easy to navigate.
Presentation I also want the results for the calculation to autopop-
ulate for the user to take away any guesswork. The
results will be detailed but simple. In addition, the
competitor apps focus on personalization and logins
while my app will have the ability to remain anony-
mous and calculate new results quickly and with ease.

Astrological Star Chart

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 4

target audience
calculator app
Overview
Research
Testing
Presentation
Persona 01
Lizzy Harmon - Energy Specialist
Lizzy is in her late twenties. She has
been working for a few years as an
energy healer at a reiki clinic. It is im-
portant for her to have an accurate idea
of the zodiac signs that influence her cli-
ents in order to recommend treatments.
This app allows for fast, confidential
access to information.
Persona 02
Rue Gavin - Artisan/Entreprenuer
Rue recently begun studying at a
university in a metropolitan city. He
makes his living selling artisan crafts and
providing Tarot readings. Rue keeps in
touch with his own zodiac influences in
order to provide accurate readings. Rue
can use the app daily to check minute
changes in his alignments.
Samantha Viehweg | Art 377R | Fall 2020 | Project 01
Persona 03
Adrian Martinez - Physical Therapist
During his time as a physical therapist,
Adrian has learned the importance of
understanding the psycological needs
of his clients. Knowing their astrological
personas helps him identify their areas
of stress. This app allows clients fast
access to metaphysical questions during
therapy sessions.
5
scenarios
calculator app

Overview Scenario 02

Home Decorating - Homemaking

Research
The user is a mother trying to redeco-
rate her living space in order to encour-
Testing age her children to study more, and
grow their knowledge. She looks up
their zodiac signs on the app to know
Presentation what colors and shapes will inspire the
pursuit of knowledge based on their
alignments, and incorporates her find-
ings into her home.

Scenario 01 Scenario 03

Decision Making - Life and Success Healing - Medical Session

The user is deciding what to wear to a At a metaphysical reiki appointment,

job interview. The user cannot remem- the user is asked to provide the special-
ber what colors psycologically emphsize ist with their zodiac information in order
their confidence and ambition. They use to obtain a comprehensize healing
the app to determine their star sign is plan. The user quickly calculates their
ruled by fire, and their colors are reds, information on the app and is able to
oranges, and yellows. They then coordi- efficiently provide their detials to the
nate an outfit to land the job. specialist with ease.

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 6

sketches
calculator app

Overview Sketches 01

Research

Testing

Presentation

For my sketches I wanted to make the app as simple as possible with large buttons and user friendly interfaces. My idea was that the se-
quential screens would immediately transition once the selection was made to create a quick calculation process.

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 7

sketches
calculator app

Overview Sketches 02

Research

Testing

Presentation

To keep in line with the other apps out there, I made the results page with options to read the other signs, but the results are emphasized
at the top of the screen.

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 8

user testing 1
calculator app

Overview Suggestions from Users

My first round of users enlightened me on a few

Research major issues with the sketches of my app. The first
was that I did not make navigation buttons. I was
concerned with the app being quick, so I forgot
Testing that users would possibly make mistakes and input
incorrect information. I was also made aware of the
fact that the user could not recalculate results from
Presentation their own login and would have to logout each time
a new user wanted to submit a calculation which is
impractical for client usage at a medical office or tarot
reading. The buttons seemed a bit too large as well.
They need to be more refined for adult users.

User 01 - Amy - “It looks a little too simple. I don’t

understand why the gender buttons are huge sym-
bols with no actual button.”

User 02 - Don - “The start page looks cool, but I

am not sure what the app does just by looking at it.
What am I using?”

User 03 - Emily - “I always love reading my zodi-

ac! This is so exciting! I think the style is cute and
bubbly, but it’s a little plain. Add some fun colors and
shapes!”
Finger Placement on Paper Sketches

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 9

wireframes
calculator app

Overview Wire Frames 01

Research
Page 1 - App Startup Page 2 - Gender Page 3 - Birthday Page 4 - Location Page 5 - Results
8 45 PM

Testing
Gender Selection Birthday Input Location Input

Results
Presentation
Female
Month City Dropdown

Logo Day State Dropdown

Male Year

Results Information

zodiac calculator None

Start Button

These wireframes are just a simple representation of each screen and the goal behind it. I used the purple background color to implement
a touch of the design into the framing. There is a grid pattern for the screens and the navigation is sequential from one input screen to the
next until the results are reached.

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 10

user testing 2
calculator app

Overview

Research

Testing

Presentation

User 01 User 02 User 03

Makayla - Marketing Manager Brittnie - Barista Thomas - Warranty Admin

“I like it. It is easy to use and the color
scheme of purple and yellow would
make sense for this type of app.”
“I like the format, but it could use some “It looks good, but there should be
constellations to spice things up. There clearer next buttons that guide the user
could be more interesting typogra- to the next section.”
phy too, especially for the title. I also
imagine a cute glittering sound when
I press the buttons. Can you add that
somehow?”

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 11

prototype - first draft
calculator app

Overview 8 45 PM 8 45 PM 8 45 PM

How do you identify? Enter your birthdate...

Research

myZO
Testing

JANUARY
Presentation

01

1993

zodiac calculator

GET STARTED

Page 1 - App Startup Page 2 - Identity Page 3 - Birthdate

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 12

prototype - first draft
calculator app

Overview 8 45 PM 8 45 PM Refinements

Taking the user testing feedback into ac-

Enter birthplace...
Research count, I created my app design in Adobe
CAPRICORN XD. The pages of the app begin with the
logo and a large “Get Started” button. The
Testing following three screens allow for input of
information such as gender identity, birth-
Aquarius Pisces Aries date, and birthplace, all of which can affect
REXBURG
Presentation the detailed results of a zodiac sign. The
final page shows the calculated results and
ID buttons to click that will take the user to a
Taurus Gemini Cancer
more thorough look at their zodiac calcula-
tions. The idea is to have a single user per
app so that the results can be specific, but
Leo Libra Virgo the app can be used for anonymous users as
well. I wanted to use a complementary color
scheme with purple and yellow to create
the sense of a rich night sky against shining
Scorpio Sagittarius Capricorn
stars. I used illustrations to make the expe-
rience whimsical and spiritual since the app
is meant to calculate the zodiac signs, which
are incorporeal topics.

Page 4 - Birthplace Page 5 - Calculation

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 13

user testing 3
calculator app

Overview

Research

Testing

Presentation

User 01 User 02 User 03

Marie - Insurance Underwriter Erin - Pet Caretaker Lyndsey - Production Specialist

“It looks good! The star in the back-
ground confuses me a little. Is it neces-
sary?”
“The design looks a little empty with
only a color for a background. The infor-
mation is easy to understand though.”
“This app is user-friendly and definitely
has a clear design! It looks amazing!
I would like to see a more intricate
design on the opening page, however.
Maybe add some constellations.”

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 14

prototype - second draft
calculator app

Overview 8 45 PM 8 45 PM 8 45 PM

GENDER BIRTHDATE

Research

myZO
Testing

January
Presentation

01

1993

zodiac calculator

GET STARTED

Page 1 - App Startup Page 2 - Identity Page 3 - Birthdate

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 15

prototype - second draft
calculator app

Overview 8 45 PM 8 45 PM Refinements
BIRTHPLACE RESULTS
After receiving feedback from the class
Research professor and the user testing, I made quite
a few changes. I darkened the background
Capricorn to create more contrast with the text. I also
Testing created more emphasis on the results page
since the entire point of the calculator is
the results section. Including a list of the
Rexburg
Presentation information related to the calculation also
created a more personalized user experi-
ID ence. I changed the background elements
and navigation to adhere to Apple’s official
Moon: Saturn
guidelines as well. This is the same case for
Element: Earth the drop down menus. I used the drop-
Stress Factors: Work/Life Balance, Ambition, Control
Yin: Feminine Energy
down selection boxes from the Apple UI Kit
Cardinal Direction: North available in Adobe XD. I added a few more
Season: Winter
navigation buttons on the bottom, but after
reviewing realize that I need to add a few
CALCULATE RESULTS RECALCULATE more, especially on the gender selection
page. That page in general feels a little out
of sync with the rest of the app. I will work
out these kinks by the time I do a third user
testing. Overall I feel I made the app easier
Page 4 - Birthplace Page 5 - Calculation to use and navigate.

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 16

wireframes - second draft
calculator app

Overview Wire Frames 02

Research
Page 1 - App Startup Page 2 - Gender Page 3 - Birthday Page 4 - Location Page 5 - Results

Testing PAGE TITLE PAGE TITLE PAGE TITLE PAGE TITLE

Results
App Title
Presentation
FEMALE
BUTTON
Month Dropdown City Dropdown
Illustration
Logo Day Dropdown State Dropdown

MALE BUTTON

Detailed Results List

Year Dropdown Country Dropdown

NONE BUTTON
zodiac calculator

GET STARTED BUTTON NEXT BUTTON NEXT BUTTON CALCULATE RESULTS BUTTON RECALCULATE RESULTS BUTTON

I decide to update the wireframe design because after reworking my app, I realized the old wireframe no longer made sense with the
finalized design. I added new navigation buttons along the bottom and put the back buttons on the top to go along with Apple’s design
conventions. I also added a new dropdown menu for the location page so that users can input their country because I realized that not all
the users would live in the United States and I needed to broaden the scope of my app.

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 17

user testing 4
calculator app

Overview Button Testing

Research

Testing

Presentation

In addition to checking back with my previous users to see how the improvements of the app looked, I conducted some physical button
testing and tested the refined app design with three new users. This is what they had to say:

User 01 - Emma - “Cool. I love that you included a non-binary option. I love the constellation theme, but the final page is a little lackluster.
Can you add the constellation to the results? Also the bottoms of the pages feel heavy compared to the tops.

User 02 - Robert - “It needs the male, female, prefer not to answer labels. I was confused. The colors work well and I like that the results
autopopulate, but I would still like to see an option to read about other signs.”

User 03 - Char - “Wow! I love this and think it is such a cool idea. It all works well except I don’t like the black color behind the genders.”

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 18

prototype - final draft
calculator app

Overview

Research

Testing

Presentation

Page 1 - App Startup Page 2 - Identity Page 3 - Birthdate

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 19

prototype - final draft
calculator app

Overview

Research

Testing

Presentation

Page 4 - Birthplace Page 5 - Calculation Page 6 - More Options

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 20

user testing 5
calculator app

Overview

Research

Testing

Presentation

Page 5 - Results Page 2 - Identity Page 3 - Birthdate

After the last user testing, I updated the design with an even darker background to create further contrast. I changed the button colors on
the identity page to white, I added the ability to read about other signs if desired, and I put explanations for each information input.

User 01 - Ned - “The design elements are great. The yellow buttons against the dark purple background make the app flow well. I think
you have a good start, but I would work on making the app a little more interactive to create the illusion of functionality.”

User 02 - Thomas - “Honestly, I would not give add anything. It does exactly what it needs to do, and you don’t have to hunt down any
extra buttons or functions. The info is displayed correctly on each page.”

User 03 - Danny - “I really like the ease of information and the color scheme.”

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 21

final designs
calculator app

Overview Phone Mockups

Research

Testing

Presentation

The final screen designs placed into phone screen mockups I created using Photoshop.

Refinements

Before creating my finalized protoype, I refined the design a few steps further by adding more interactive elements to the XD prototype.
This included the ability to press some of the buttons on the identity page and initate some of the drop-down menus on the birthdate
page. These interactions are in line with the scenario of a reiki specialist using the app for a female client whose birthday is January 01,
1993, and who was born in Rexburg, ID. In the future of the app, I would plan to add results pages for each type of calculation, and finish
the button functionality for all the genders and drop-down menus. My user testing allowed me some insight as to what is important to a
client when using a protoype such as interactive elements and realism of the app’s functions. This is why scenario and person building is so
crucial to the design aspect of an app.

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 22

mockup
calculator app

Overview Final Notes

Here is a photoshop mockup of

Research the app’s start-up page within the
screen of an iPhone XS.

Testing The experience of creating this app

has shown me the importance of
user testing and refining designs
Presentation and functional elemtents many
times in order to reach a refined
finished product. Small things can
make a difference for a design such
as darker backgrounds, function-
al buttons, and much more. A
calculator app in and of itself is a
great mode in which to teach user
testability of a product due to its
basic function of inputting data and
calculating specific results based on
those entries. The design and look
of the app is equally as important
as the function of the app and
those two concepts need to work
together seamlessly.

Samantha Viehweg | Art 377R | Fall 2020 | Project 01 23

Link to Final App Prototype
Link to Video Presentation