Leanne Chin
Overview
During the past 11 weeks, I was tasked to design and develop a mobile-based application. I developed
an app allowing steps presenting how to perform simple Yoga poses. Throughout this project I was
introduced to different aspects of HTML and JS that were brand new to me such as learning how to
allow adding the page to the user’s home screen and how to allow the app to work offline.
First, I focused on developing the wireframe to see the bet possible UI for an app that focuses on
Yoga poses and mindfulness. A majority of the weeks were spent in the developmental process
understanding the different tags that allows offline development and CSS design changes for
usability purposes for a mobile application.
The Context and Challenge
Background
For this project, I was given the task to develop a mobile-based web application using HTML, CSS, and JS. There was no limit to what could be created, so I decided to incorporate one of my interests. First, I wanted to create an app that allowed people to learn how to Tap Dance. However, this soon became unfeasible due to the fact that I could not create the videos where I was living. Soon, the idea formed into an application that allows people to quickly learn yoga positions. This project took approximately 12 weeks to complete including Wireframing, Style Tiles, and complete development.
The Problem
The problem that the app seeks to solve is that many people are now using technology for their exercise needs. The best possible way to do this is to incorporate exercise into something that people use every day, phones.
Goals and Objectives
This project will be successful if it is a fully-functioning mobile-based application. Not only that,but the goal is to have a fully functioning app that works entirely offline, making sure that there areno errors when implementing the app onto the user’s home screen in IOS. In addition, hopefully, this app will be used to increase knowledge of the study of yoga and mindfulness.
The Process and Insight
Wireframes/Style Guide/Logo
Both my wireframes and style guide for the app was developed using Adobe Xd. Only one breakpoint was
designed, which was for mobile. My number one concern was trying to develop small sections that
allowed
the user to see the visual of what each position looked like. Next, I needed to ensure that the
buttons
were large enough but small enough to fit into the small sections I created to surround each yoga
position.
The colors I chose were specific to the emotions that I wanted to convey when the user went through
the
app. Orange usually emotes emotions such as energy and refreshment. By performing yoga, you allow
your
entire body to become nice and refreshed, which was what I wanted to convey not only in the concept
but
also in the UI. To accompany the feeling of refreshment, the color purple was added to allow a sense
of
smoothness. The color purple is known in psychology to provide soothing feelings. Finally, yoga is
known
as a very calming practice to pursue. The color corresponding to calmness is the color pink.
For the logo, I decided to incorporate all three colors Purple, Pink, and Orange in order to emote
the
feelings that I previously stated when the user first approaches the app. One problem I found at
first
when I was developing the logo was that once it was on the IOS screen, the logo read as too light.
The
visibility of both the colors and the icon inside was too confusing. The icon inside displayed two
hands
pressed together in namaste, but instead read as a peace sign.
Scrolling
Scrolling When I initially created the wireframes and prototype, I wanted the top portion of the screen to show what type of yoga poses the users would be viewing. However, that interpreted with the user’s usability of the app. Since only half of the screen would scroll, it confused the user and made it more difficult for them to see the different options that they had to learn different poses. This was simply fixed by allowing the entire page to scroll, making sure that the top portion scrolled with the rest of the page.
Video
Initially for my app, when the user clicked onto one of the yoga poses, what would have been presented was a video showing the user how to perform the pose. The video worked perfectly fine when implementing into the JS modal. However, the problem that I had faced was having the video work when the app was offline. Every part of the app worked fine when the app went offline including the text, html, css, and the images that were implemented. However, the only part that wouldn’t load were the videos that were incorporated into the app. Everything was implemented into the cache manifest to allow automatic updates to the app, but unfortunately when trying to debug the problem, I could not solve
Local Storage
When learning new steps to a yoga pose, or any exercise movement in general, it would be best to be able to come back to the step that you left on if you closed out the app. This would increase a better user experience that the user would go through so they wouldn’t forget where they left off as well as picking up at the step they left off. In order to do this, data is collected within a JavaScript file within the app in order to record when the user last leaves off when they click onto a specific pose and the poses’s steps. It also records whether or not you have completed the yoga pose so you won’t continuously refresh the app to the same modal over and over again.
The Solution
New Logo
The logo faced the problem of lack of visibility due to its lack of contrast and readability of the icon. The logo’s colors remained relatively the same. The only changes that were made were in terms of color were that the colors were created to become more saturated and bright in order to allow the user to see it better. In addition, the icon in the middle was replaced by a Lotus Flower. A lotus flower is used in yoga as a symbol of purity, enlightenment, self-regeneration and rebirth and is resembled as that in many different cultures.
Photo of Poses
Due to the problem that I experienced when trying to implement the videos, I had to figure out an alternative to showcase the poses. What I did was to create a JS carousel in order to show the user can do the poses through a series of images. I had a small problem with trying to have the carousel’s arrows in the correct place, but through some CSS styling, I was able to place the arrows accordingly to the image. In order to make the poses more friendly, I edited them using Adobe Illustrator and Photoshop instead of having an image of an actual person. Each photo used was entered into the cache manifest and everything was successfully loaded when the application was used offline.
Scrolling Interface
The scrolling of the UI was changed in order to allow the entire page to scroll instead of the top half to scroll. This was done in order to increase usability. By having only half of the screen scroll, it made usability difficult and readability hard for the user.By allowing the full scroll, the uer now can see several poses at once and can see their variety of different options. This also helps increase screen space for the user to use when they try to click onto the button to allow the modal to pop open for the user to look at the different yoga steps.
Results
This app was successfully developed using JS, HTML, and CSS. The metrics that measure these
successful results are the app’s ability to function when uploaded to the home screen of an iOS
device, ability to work offline, contains JS functionalities that implement local storage, and a
fully designed web-based mobile application.
What I foresee for this project in the future is to possibly implement a video feature that allows the user to follow a series of videos to understand the poses that they are going through. There hopefully would also be different levels of poses besides the Beginner level that is seen within this version of the Final Project. There could also be a feature where you would be able to connect with family and friends in order to work on yoga and mindfulness together if you so do choose to. This option would be up to the user if they want to share with family and friends, or to practice on their own time.