Hurrybee

Hurrybee is a responsive web application designed to keep users on track and on time for the morning schedules. This final project was made with a partner for two classes: Design 1 and Dynamic Content Design. It used more advanced back-end JavaScript logic and utilized Local Storage to store user preferences.

ClientBCIT Term 2Year2017Tools UsedAdobe Illustrator, HTML, CSS, JavaScript, Bootstrap, GitHubLinkhurrybee.alynnaalcira.ca

My Role

  • Conducted primary and secondary research to produce user personas
  • Created a style guide for Hurrybee branding
  • Created web assets such as the main game design and challenge icons
  • Animated the game using CSS and SVGs
  • Used JavaScript to create interactions on the challenges page
  • Created a usability testing script and report based on the findings

UX/UI Strategy & Branding

After applying primary and secondary research, I gathered some variables to better determine which characteristics would be most representative for a primary and secondary persona based on lifestyles, motivations, and relationship to technology. The following personas were created to help determine the different types of morning routines each person in our target audience will have.

The wireframes below were made during the initial version of the application. After we started development, we implemented many changes to emphasize better usability and lower the scope of development due to time constraints. For the main form page, we wanted users to have the ability to rearrange each activity, so we did not continue with the icon arrangement (as seen below). We decided to use this layout for the challenges page instead to create more interactivity.

When coming up with the branding guidelines, we wanted to bring out a positive and motivational tone that aligns with our mission to make our users’ morning routines easier and more productive. Our colour palette has a lot of yellow tones to emphasize a bright and sunny morning.

Process

Based on our research findings, we discovered that users are more likely to use their mobile phones and/or tablets in their morning routine. We decided that this application will be best suited for mobile and tablet.

I used Adobe Illustrator and SVG’s to create the main game design. I created two versions per activity: portrait for mobile and landscape for tablet. Since we are planning to animate the game using CSS, making sure that the layers were properly named and organized was key. We used a flat design aesthetic to ensure that the SVG’s will not be too complex; this can result in a slower load time and be a drastic downfall with user experience. In addition to the game design, I also created several of the web assets, which included icons and backgrounds.

I was in charge of animating the game using CSS. This was my first time working with several SVG’s and it was a very difficult process because they needed very specific components to ensure the animations will work. Although it was a challenge, I had a lot of fun experimenting with the CSS animations. I used a lot with the transformation and opacity animation settings and also played around with the animating the stroke. The timing of each animation also played a large role.

In addition to the game animation, I was in charge of the challenges page. If a user has extra time in the morning, they have the option to partake in some challenges. Utilizing Bootstrap’s grid system helped a lot with the front-end development. Through this, I was able to easily create the offset honeycomb appearance with the challenge icons. After clicking an icon, a modal pops up which reveals the challenge and gives the user the option to skip or complete. The completed challenges are then stored in an array, and using local storage, this array will be shown in the results page.

Usability Testing

Our web app was at a minimum viable product stage when we began testing. The main objective was to allow participants to demo the completed pages in order to identify problem spots for usability, potential glitches, and areas of tension or confusion. Our secondary objective was to gather insight into potential further development opportunities for additional functionality.

The usability testing study provided an opportunity to gain a different perspective from using the Hurrybee web application. It was a helpful process that showed which aspects of the web application worked and which needs improvement. The majority of the users liked the app’s concept, game animations, and graphics. However, they also found major errors and minor bugs and suggested ways to improve user experience. After the usability testing, we were able to improve our application based on our findings.

Final Thoughts

Working on this application definitely tested my patience in regards to the development side of things. The need to use more advanced logic with JavaScript and also testing out the different animations with CSS/SVG’s were a challenge. However, I am very impressed with how this application turned out! During our final presentation, our instructor even mentioned that it had the most potential for an investor! I also ended up using this application for a completely different purpose: practicing a presentation with different teammates and ensuring that we are all within the time limit. I love how we were able to build an application that is flexible enough to be used for entirely different settings!