AquaBee

UI/UX Design

AquaBee

UI/UX Design

Aquabee Hero Image
Aquabee Hero Image

Year

2018

Overview & Problem

New ways to own a modern aquarium with minimal care by Aquabee's systematic sensor detection of ph levels, feeding time, temperature, and filtration spd. For this project I designed a fusion of traditional fish tank with modern day technology to help solve the daunting tasks that fish hobbyist goes through on daily routines.

Year

2018

Overview & Problem

New ways to own a modern aquarium with minimal care by Aquabee's systematic sensor detection of ph levels, feeding time, temperature, and filtration spd. For this project I designed a fusion of traditional fish tank with modern day technology to help solve the daunting tasks that fish hobbyist goes through on daily routines.

Competitors

Discovering potential threats and competitors of AquaBee helped me quickly figure out different insights of potential probelms, oppoturnities, improvements, and design for my app, website, and product line.

Competitors

Discovering potential threats and competitors of AquaBee helped me quickly figure out different insights of potential probelms, oppoturnities, improvements, and design for my app, website, and product line.

Insight

The first approach was to figure out my target audience and the goal of Aquabee's product to give a clear vision of who I'm designing for.

Target Audience

Age: 25 - 65
Region: World Wide
Who: Young adults, parents, elderly, hobbyist, and fish owners.

Success

The success of this product design would rely on its quality user experience, convience, and accessibility. The whole goal of this product is to minimalize time spent working on the aquarium on a daily routine.

Insight

The first approach was to figure out my target audience and the goal of Aquabee's product to give a clear vision of who I'm designing for.

Target Audience

Age: 25 - 65
Region: World Wide
Who: Young adults, parents, elderly, hobbyist, and fish owners.

Success

The success of this product design would rely on its quality user experience, convience, and accessibility. The whole goal of this product is to minimalize time spent working on the aquarium on a daily routine.

SWOT Analysis

The SWOT analysis helps define the problem, solution, and opportunities for Aquabee's product line, app, and website.

Strength

Aqua Bee's aquarium would be very beneficial for clients who has a constant busy life, enjoys high end technology, modern sleek design, and interfaces that are user friendly.

Weakness

The weakness to AquaBee's product would be users who isn't as knowledge about technology and apps.

Opportunities

Aqua bee will definitely have greater opportunities with the implementation of sensors, automatic systems, and high end technology components that serves users live data and information.

Threats

Great threats to AquaBee, would be new startup and established companies coming up with new technology implementation on their line of aquarium products.

SWOT Analysis

The SWOT analysis helps define the problem, solution, and opportunities for Aquabee's product line, app, and website.

Strength

Aqua Bee's aquarium would be very beneficial for clients who has a constant busy life, enjoys high end technology, modern sleek design, and interfaces that are user friendly.

Weakness

The weakness to AquaBee's product would be users who isn't as knowledge about technology and apps.

Opportunities

Aqua bee will definitely have greater opportunities with the implementation of sensors, automatic systems, and high end technology components that serves users live data and information.

Threats

Great threats to AquaBee, would be new startup and established companies coming up with new technology implementation on their line of aquarium products.

Personas

I developed personas to quickly investigate potential user clients and behavior. The personas I've created will help guide me through the product design decisions of the Aquabee's app and website design.

Brian Larson

Age 35, working in the financing industry. He owns a couple of fishes and constantly struggles to balance between caring for the aquarium, social life, and work. He finds it extremely hard to do both but makes every attempt and effort to do so on a daily basis.

Persona image one

Coleen Janes

Age 38, a mother of two childs that works as a nurse. Her daily work shift varies from day to day, but she enjoys spending time with her family after work. She enjoys reading eBooks online and constantly uses her phone to stay in contact with her friends.

Persona image two

Personas

I developed personas to quickly investigate potential user clients and behavior. The personas I've created will help guide me through the product design decisions of the Aquabee's app and website design.

Brian Larson

Age 35, working in the financing industry. He owns a couple of fishes and constantly struggles to balance between caring for the aquarium, social life, and work. He finds it extremely hard to do both but makes every attempt and effort to do so on a daily basis.

Coleen Janes

Age 38, a mother of two childs that works as a nurse. Her daily work shift varies from day to day, but she enjoys spending time with her family after work. She enjoys reading eBooks online and constantly uses her phone to stay in contact with her friends.

Persona image 1 Persona image 2

Sketch

With a given short time frame to develop a full product, website, and app. I quickly went through several different iterations, low fidelity wireframes, brainstorming sessions, and branding to generate several different solutions for the website, app, and product design. Below are few pages of sketches I had done for this project.

Discover

Image of Raymond Shen sketches for brainstorming Aquabee's project.

Product

Image of Raymond Shen sketches for the product design of Aquabee's project.

App

Image of Raymond Shen sketches for the app design of Aquabee's project

Website & Branding

Image of Raymond Shen sketches for both website and branding of Aquabee's project

Sketch

With a given short time frame to develop a full product, website, and app. I quickly went through several different iterations, low fidelity wireframes, brainstorming sessions, and branding to generate several different solutions for the website, app, and product design. Below are few pages of sketches I had done for this project.

Discover

Product

Image of Raymond Shen sketches for brainstorming Aquabee's project. Image of Raymond Shen sketches for the product design of Aquabee's project.

App

Website & Branding

Image of Raymond Shen sketches for the app design of Aquabee's project Image of Raymond Shen sketches for both website and branding of Aquabee's project

Functionality

Below are a list of 3 core functionality that would be designed for AquaBee.

Website

AquaBee's website would be the first inital contact for consumers to get product information, product purchase, contact, and support.

App

AquaBee will have a app designed for both Andriod and Iphone's. The app will allow users to directly connect with AquaBee's aquarium regardless of user distances. With the app, the user can control, manage, and recieve direct live data feedback.

Product

AquaBee's aquarium would be the product for clients and consumers purchase.

Functionality

Below are a list of 3 core functionality that would be designed for AquaBee.

Website

AquaBee's website would be the first inital contact for consumers to get product information, product purchase, contact, and support.

App

AquaBee will have a app designed for both Andriod and Iphone's. The app will allow users to directly connect with AquaBee's aquarium regardless of user distances. With the app, the user can control, manage, and recieve direct live data feedback.

Product

AquaBee's aquarium would be the product for clients and consumers purchase.

Sitemap

When I created the sitemap for both AquaBee's website and app. I informed many of my design decisions for the sitemap based on the information and data I had collected from my inital discovery process.

App

Layout image of the sitemap for Aquabee's app deisgn structure

Website

Layout image of the sitemap for Aquabee's website deisgn structure

Sitemap

When I created the sitemap for both AquaBee's website and app. I informed many of my design decisions for the sitemap based on the information and data I had collected from my inital discovery process.

App

Website

Layout image of the sitemap for Aquabee's app deisgn structure Layout image of the sitemap for Aquabee's website deisgn structure

Wireframe

Having done my user research and creating a sitemap for both Aquabee's website and app. Wireframing was my next process of creating low fidelity wireframes, allowing me to quickly make design iteration and changes.

App

Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee

Website

Raymond shen website wireframe for AquaBee Raymond shen website wireframe for AquaBee
Raymond shen website wireframe for AquaBee Raymond shen website wireframe for AquaBee
Raymond shen website wireframe for AquaBee Raymond shen website wireframe for AquaBee
Raymond shen website wireframe for AquaBee Raymond shen website wireframe for AquaBee

Wireframe

Having done my user research and creating a sitemap for both Aquabee's website and app. Wireframing was my next process of creating low fidelity wireframes, allowing me to quickly make design iteration and changes.

App

Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee Raymond shen app wireframe for AquaBee

Website

Raymond shen website wireframe for AquaBee Raymond shen website wireframe for AquaBee
Raymond shen website wireframe for AquaBee Raymond shen website wireframe for AquaBee
Raymond shen website wireframe for AquaBee Raymond shen website wireframe for AquaBee
Raymond shen website wireframe for AquaBee Raymond shen website wireframe for AquaBee

User Testing

Placing both the website and app wireframes in front of users, my findings were intriguing and insightful. Through the testing process I had received several feedbacks and flaws that I had noticed while watching users go through my intial designs. The major issue with the app design was the confusion between product information and control station. While for my website the major flaws were the navigation areas due to the vast amount of subpages I initially had for the design.

User Testing

Placing both the website and app wireframes in front of users, my findings were intriguing and insightful. Through the testing process I had received several feedbacks and flaws that I had noticed while watching users go through my intial designs. The major issue with the app design was the confusion between product information and control station. While for my website the major flaws were the navigation areas due to the vast amount of subpages I initially had for the design.

Branding

Designing the brand for AquaBee was fairly challenging and complicated as I based it off of my target audiences and the type of industry its in. I had to ensure that the branding isn't too vibrant with colors because my target audiences ages from 25 - 65 yrs.

Logo Ideation

Final design options for Aquabee logo idea

Color Studies

Final branding colors for Aquabee

Typography

Helvetica typography used for AquaBee

Iconography

Iconography designed for AquaBee's button and etc

Branding

Designing the brand for AquaBee was fairly challenging and complicated as I based it off of my target audiences and the type of industry its in. I had to ensure that the branding isn't too vibrant with colors because my audience ages from 25 - 65 yrs. The typeface I had chosen was Helvetica due to its modern design and its universal readability.

Logo Ideation

Color Studies

Final design options for Aquabee logo idea Final branding colors for Aquabee

Typography

Iconography

Helvetica typography used for AquaBee Iconography designed for AquaBee's button and etc

Designs

On the final week of delivery day, many different iterations and changes had been made based off of a few quick user testing and feedback I had recieved from the previous week. I had made minor and major changes to several different versions from the low fidelity wireframe regarding the web and app user accessibility. The changes made for the app's redsign was the user flow and sitemap; because users expressed signs of confusion in an attempt to navigate between the product information and control station. While the changes made for the website was the hirearchy and structure of the inital website design. During the experiment, user had shown signs of friction manuvering between its landing and purchasing product page.

Product

Aquabee product prototype design by Raymond Shen Aquabee product prototype design by Raymond Shen
Aquabee product prototype design by Raymond Shen Aquabee product prototype design by Raymond Shen
Aquabee product prototype design by Raymond Shen

Designs

On the final week of delivery day, many different iterations and changes had been made based off of a few quick user testing and feedback I had recieved from the previous week. I had made minor and major changes to several different versions from the low fidelity wireframe regarding the web and app user accessibility. The changes made for the app's redsign was the user flow and sitemap; because users expressed signs of confusion in an attempt to navigate between the product information and control station. While the changes made for the website was the hirearchy and structure of the inital website design. During the experiment, user had shown signs of friction manuvering between its landing and purchasing product page.

Product

Aquabee product prototype design by Raymond Shen Aquabee product prototype design by Raymond Shen
Aquabee product prototype design by Raymond Shen Aquabee product prototype design by Raymond Shen
Aquabee product prototype design by Raymond Shen

Takeaways

Working with the given time of 3 weeks for this class project was challenging. Through this project I’ve learned a lot about design compositions and the importance of typography choices. Some of the other major challenges was gathering information, data, parts, and creating sketches of the product. The overall process of creating branding, website, product, and app design was a huge learning curve for me, it had taught me what it takes to be a product designer.

Takeaways

Working with the given time of 3 weeks for this class project was challenging. Through this project I’ve learned a lot about design compositions and the importance of typography choices. Some of the other major challenges was gathering information, data, parts, and creating sketches of the product. The overall process of creating branding, website, product, and app design was a huge learning curve for me, it had taught me what it takes to be a product designer.