Screenshots

Hello blog viewers,

Here are a few screenshots of my app. With a few minor updates, I plan to submit it to app store for review before it can be released!

Thanks for reading!

Powerpoint

Hello blog viewers,

I have inserted a link to my presentation below. My app, 'Stress Insights', is in its final stages. I will update the powerpoint with a video demo of the app before my presentation on Saturday, May 7th.

Here is the link:

Stress Insights Presentation

 I'd like to take this opportunity to thank my faculty advisor, Mr. Peacher and Ms Connor for their  advice and tips!

Thank you for your support.

Saif

Week 9 (Apr 11 - Apr 15)

Colors Speak Louder than Words

Hello blog viewers,

Do you know why Japanese train platforms have a blue light installed at their end? I was surprised to learn that it's sole purpose is to prevent people from jumping in front of oncoming trains, and thereby reduce the suicide epidemic in Japan!  

While researching for my project, I was fascinated to learn that color is one of the most powerful tools in the world. Color impacts our psychological state of mind, our perception, our creativity and our cognitive skills. Every color inflicts a different effect on our moods and emotional responses.   

Blue is the most popular color around us, whether in the skies, national flags, our old comfortable jeans or in the icon-world. Its symbolism is complex and paradoxical. While 'feeling blue' implies depression or sadness, the color also evokes feelings of calmness and serenity, and is associated with freedom, imagination and confidence. I've therefore decided that blue will be the perfect background color for my app design.

This week was both challenging and fun, as I had an opportunity to learn a few new skills. I spent some time learning Adobe Photoshop and Adobe Illustrator. These are sophisticated and powerful tools to create professional graphics.  

Besides coding, I watched a few tutorials on how to use photoshop. Once I got the handle of using this tool, I designed a few app icons. The app icon design should portray a person experiencing a stressful event. I have come up with a few designs, and posted the best one (so far) below.

You may have also noticed that the backgrounds of app icons have different shades. For example, the official Apple weather app icon (displayed below) makes use of color gradients.  Using different shades of the same color makes the app design more dynamic. Brighter shades draw our attention, while darker shades help to create more depth and focus. I have used a similar concept of color gradients in different shades of light blue to add an illusion of depth, while maintaining a soothing appearance to the icon.

Here is Apple’s weather app icon:

Here is the draft icon I have designed so far.

I also designed these images for the stress button. Please vote for the best one (1 or 2) in the comments.

1.



2.

I designed an animated background for the first 'stress' tab. When the user is stressed, they can tap the button, which then opens a page view. The series of pages will provide helpful coping tips and strategies. The animated background makes the app feel more dynamic and lively rather than a static white background.   

Next week, the last official week of the SRP, I am excited to wrap up the initial version of the app.

Week 8 (Apr 4 - Apr 8)

Hello blog viewers,

It is a misconception that all stress results in harm.

Did you know there are two types of stress? Distress is negative stress that results in mental and physical problems, while eustress or positive stress can motivate us, and improve our performance and energy. We can often channel stress from negative to positive, by changing our perception and using appropriate coping strategies. With this knowledge in hand, I have decided to add a ‘Coping Strategies’ section to my app.

The eighth week of my SRP has been the most productive and exciting, as I can finally see the app begin to take shape! 

I have added profile, stress, insights and coping icons to the bottom tab bar.

I have set the main icon for the app (which the user can see on his/her homescreen). I may change this as my App progresses, to portray a clear representation of its functions.

I have linked the core data of my first question to the first graph. Now, once the user inputs his/her stress event information, the app will automatically generate the graphs. 

Outside of coding, I enjoyed creating an image that I plan to use for the stress button. As this was my first experience using Adobe Illustrator, it was a bit challenging to create the perfect stress button. Here is my first attempt:

Not to stress too much about it, but this image wasn’t my best effort. After  trying to manually draw the perfect “S” by hand (or mouse?), I found a text tool where I could simply type the letter S and drag it on top of the circle (facepalm)!  So I proceeded to create a new icon below.

A lot better but it still needs some fine tuning before I add it to the app. 

And finally to give you all a summary of the app, its basic function is to allow users to capture their stress events, and link the events to common triggers (ex: homework, examinations, public speaking, etc). We often go through many stressful moments in life, and seldom attempt to capture the specifics of any given stress event. The app will allow us to identify both intrinsic and extrinsic risk factors that may increase a person’s susceptibility to stress. A few examples of intrinsic risk factors are personality traits (ex: introvert or extrovert, perfectionist or complacent etc), while extrinsic factors may include a person’s level of activity, amount of sleep, and time spent on social media.  The app will also allow the user to capture their emotional state, behavior, and physical symptoms during a stress event. Using captured data, the app will be able to generate graphs to visualize patterns over a period of time. This information can then be used by the user and his/her healthcare provider to provide effective individualized management for stress. 

Next week, I plan on adding more questions to the app. I will also try and link them to the core data and create an algorithm which will calculate the user’s stress index.

Thanks for reading,

I hope to see you all in my next blog post!

Week 7 (Mar 28 - Apr 1)

Hello blog viewers,

Did you know that April has been designated as ‘National Stress Awareness Month’? This is a national effort to make people aware of stress and its harmful effects,  correct misconceptions, and provide them with successful coping strategies.

During this week, while researching more about stress, I learned that the origin of stress dates back to the early 1900s.  The word “stress” is derived from the Latin word “stringere” which means ‘to draw tight.’ and it was rats who helped us understand the concept of stress and its effects on the body. 

Hans Selye, an endocrinologist, used different methods to stress the animals, by exposing them to extremes temperature, starving them and making them exercise excessively. When he euthanized the animals, he found that the physical effects were the same regardless of the form of torture to which they were subjected.  This research has provided insight into the effects of stress and the importance of coping strategies.

There are several coping strategies we can adopt to avoid or minimize stress: taking time to unwind,  exercising, engaging with our family and friends, and providing community service. I hope to incorporate these strategies into my app in the next few weeks.

Now onto the work I have achieved in the seventh week of my SRP: I have finally created a graph that will show user’s stress levels; however I have not linked it to the core data yet. I have also decided to include only three tabs in the app: one for stress, one for graphs, and one for the user profile. This will improve the user interface, as the user will not have to keep switching between tabs to find what he/she is looking for.

The graph I have created will map the user’s stress level (from 1 to 5) throughout the past week (Sun through Sat). This task seemed daunting at first, but after reviewing a couple of tutorials, I managed to create a basic graph. There is a bit more work I have to do before the final graph is complete. Here’s a sample image of the weekly graph (The data shown is sample data and is not rendered from the core data yet):

I plan to display the stress event count and average stress level for the given period of time show in the graph (in this case, a week).  For the initial version, I will have multiple graphs that show weekly, monthly and yearly stress level data.

Over the next week, I plan to work on creating a monthly graph and a yearly graph and connecting the core data to all of the graphs.  I will also review the Human Interface Guidelines from Apple as this is a critical component of any mobile app that focuses on UI/UX design of the mobile app.

I hope to see you all in my next blog post!

Week 6 (Mar 21 - Mar 25)

Hello blog viewers,

I have just completed the sixth week of my SRP. During this week, I completed researching causes of stress (which I am in the process of converting into questions for the app) as well as coding more animations which will enhance the user interface.

While researching, I found many sources of stress which I would not have been able to come up with off the top of my head such as marriage; marriage, along with many other happy experiences in people’s lives, can be stressful due to new responsibilities and new environments (such as where a person is living). I also found more obvious sources such as bullying, unsafe environments, and lack of sleep. I have compiled twenty questions (with a few slightly overlapping ideas) and would like to cut down on them until I have roughly ten focused questions which will get key information from the user without wasting his/her time.

On the coding side, I finally got the animation working for the core graphics in the first question (which I discussed more in last week’s blog). "You can see it for yourself in the video below" is what I would say if blogger would allow me to upload the video (which is smaller than the 100 MB limit). Instead, I have just provided a few pictures in a time-lapse fashion and you'll have to imagine the actual animation.

After completing this animation, I added the core data files which I coded in a separate Xcode project to the main project which has the actual visuals and animations. This caused a few issues including the test app build failing to run due to a “Thread 1 signal sigabrt” error (this general error has popped up many times for). I looked over all of my code trying to find the cause for this error. I eventually found code for an unused outlet that I had forgotten about; I deleted the code and the app was running again. After overcoming this hurdle, I connected the user input values to the core data so the app will save answers. This is a key part of the app because if the app can’t remember the user’s answers for each stress event, the app will not be able to do what it’s designed to do: display graphs (using the collected data over a period of time) and present stress patterns to help the user and his/her healthcare professional, thus rendering the app useless.

This next week, I plan on narrowing down my final list of questions, working more on the core data, and adding more animations to the app.

I hope to see you all in my next blog post!

Week 5 (Mar 14 - Mar 18)

Hello blog viewers,

I have just completed the fifth week of my SRP, last week being my spring break. This week, I spent a lot of time on the core data for the app (where all the user’s answers will be stored into the app) and started learning (raywenderlich.com has been a great help again) and working on coding some core graphics. Core graphics are displayed in a UIView. They can be coded to display a visual image, hence the “view” in UIView. For example, I can code a circle image with the line of code:

override func drawRect(rect: CGRect) {  var path = UIBezierPath(ovalInRect: rect)  UIColor.greenColor().setFill()  path.fill() }

Although this code does say “oval”, if I set the view’s width and height equal to each other, then the “oval” will look like a circle. This code also shows how to set a basic color for the circle. Custom colors can coded using UIColor(red: x, green: y, blue: z, alpha: w). I use this website: http://uicolor.xyz/#/hex-to-ui in order to pick a color and get values for x, y, z, and w. An example of this is equalling UIColor(red:0.12, green:0.83, blue:0.88, alpha:1.0). With this simple line of code and a website, I have access to any color I want.

Although coding core graphics is an optional part of this app, I think that it will produce a more dynamic user experience since users will be able to visualize questions and their answers more. For example, I have started working on a moving image that will better visualize when a slider is used.

When the user slides (the slider) left to right, the yellow bar in the UIView (with the 3/4ths circle) will move left to right to show an increase in the stress value along with the number in the center showing the exact value. So far, I have only coded the UIView, but have not been able to make the yellow bar coordinate with the slider proportionally. Coding the core graphics of the UIView required some math in order to code part of the circle and not the whole circle.

I had to code for the “stroke” to have a starting angle of 3π/4 and ending angle of π/4. This results in a 270º angle circle. After that, I coded for the outline (the yellow part) of the 270º circle.

These next few weeks both are exciting and stressful since many colleges are releasing their regular decision admissions. While stressing over college decisions, I will continue to work on core data of the app and working on adding core graphics to more parts of the app, including the main “stressed?” button. I hope to see you all in my next blog post!