WavePro
Overview
WavePro is a responsive web application designed for water sport enthusiasts to accurately find information and live data on their desired location. WavePro also acts as a community bridge with our chat platform – all whilst on one app. With a comprehensive data base for those who are very particular on weather and water conditions you’ll be sure to find it all on here at no cost.
Context
Finding the right conditions for water sports can be tough, especially when other apps over complicate the simple things that can put anybody to sleep.
Design Thinking Process
I use the design thinking process in order to go back and forth to refine my app. This is especially valuable when it comes down to testing phases. It's never too much of an ask to go back and add/subtract features or designs.
What is the problem?
Possible problems
Problem statement
‘Our users need a way to receive/ access personalised information on their chosen activity/sport so that they can make better informed decisions on how they prepare themselves.'
We will know this to be true when we see more users begin using the web app to find specific content to better facilitate their needs with less friction.
Possible solutions
Competitor Analysis
Purpose
This was an essential step in understanding the current standards of geographical weather apps and how we could differentiate ourselves.
Goal
The goal of this was to identify user pain points and how we could capitalise of this and fill the gaps that were created.
Who are they?
I will be quickly looking at MagicSeaweed, they are leading the market in weather apps designed for the purpose of providing accurate, in depth details on weather and elements.
I conducted one more competitor analysis however for the purpose of this case study I will be using one.
MagicSeaweed:
Learnings
Despite being relatively new on the market (since November 2019) they have amassed over 500,000 downloads. This comes as no surprise however since they are extremely active across all social media platforms and are pumping out content almost on a daily basis. This has massive impact on their goals and reaching audiences far and wide.
Currently MagicSeaweed (MSW) has stiff competition from other big names in the market however due to MSW social media breadth they have numerical advantage in visibility in comparison to some of the other brands in this field. Again if you were search in Google for MSW you will find a well-established website, Facebook page, Instagram page, Twitter page, YouTube channel and even a LinkedIn page. In the news search engine you will find frequent twitter activity.
A huge 474,000 likes on Facebook, a modest 14,000 subscribers on YouTube, 33,000 followers on Twitter and a verified 350,000 followers on Instagram demonstrates it’s punching power. MSW definitely have a far reach for customer targeting.
User Personas
Here I chose one persona of 4 to use for simplicity:
I created user personas to bring the character and information to life. This is an important step in building empathy.
User Journey
Here I demonstrate user journeys using my persona - Jonas Pierre Le Clerc. This important step in the process is building information hierarchy and ensuring logical steps are put in place.
Saving a spot to favourites
Send a message on chat
Wireframes
The first stage of ideation is creating wireframes, I prefer to compile my wireframes on paper. Here I would make many drafts of how I can solve the problems at hand.
Find a spot
Saving a spot
After many iterations I moved onto the mid fidelity quality prototype. Through using these new iterations I was able to start testing them and gather new insights on how to improve the product.
Initial changes from low to mid fidelity included adding a save to favourites feature and scroll bar to include more continents.
Later as we moved forward from mid to high fidelity, I decided to remove the scroll bar, as I didn't see how this would fit with mobile first design.
Saving a spot
I also removed the profile icon as there was already a profile feature displayed on the bottom navigation bar. Later down the road we will take a look at further iterations based upon new learnings.
User Testing
Background:
WavePro is a responsive web application designed for water sport enthusiasts to accurately find information and live data on their desired location. WavePro also acts as a community bridge with our chat platform – all whilst on one app. With a comprehensive database for those who are very particular on weather and water conditions you’ll be sure to find it all on here at no cost.
Goals:
The usability testing will be used to assess the learnability for users who interact for the first time and navigation, how easy is it to find certain features and how fluid do they move from one page to another i.e. finding a spot.
Test objectives:
(1) Determine how easy users can find a spot from the home screen and then add location to their favourites.
(2) Observe how easy users can flow from one page to another in a logical order – can they successfully find what they are looking for?
Once participants were comfortable we moved on to the main test, below is some notes from the test using affinity mapping:
Next we will look at some results using a technique known as the Rainbow Spreadsheet. Originally created by UX Researcher and author Tomer Sharon and since adapted by many designers, is a great way to organise information from usability tests and create visual patterns. I especially found this useful as I consider myself more of a visual person, therefore I was able to effortlessly pick out and notice patterns
With this new found information from participants feedback I was able to collect and make further improvements to my app. I was really excited to chop and change some new features to make this product useful to my audience. This is also a great way to validate/ disprove early hypothesis.
A/B Testing
Next I moved onto A/B testing which consists of giving participants two options where they both share similar screens with only subtle differences to gauge which the majority deems worthy.
Once this step was completed I went back and made the necessary changes to improve my app.
Visual Design
I next created a style guide which is useful when others collaborate making the rules simple for them to follow.
Iterations
As discussed earlier in the design process I like to constantly go back and make iterations to ensure my product is evolving in the right direction. Demonstrated below are screens of development from early drafts to final product screens.
Finding a spot
Chat contacts
After the last step completed of design collaboration where multiple hands are involved in reviewing the testing prototype, the final mockup is made.
Prototype screen shots
Reflections
This project was admittedly a struggle and fun at the same time, for this was my first ever full scale project. I was concerned whether my work made any sense, whether I was actually solving a problem or creating problem for the solution. I found that I enjoyed the process once I actually let go of the internal pressures of creating the perfect product on my first attempt and that seeking perfection can lead to burn out and ultimately failure if not managed properly.
To combat this I reached out to those who are more experienced than myself and gained confidence and realigned myself with the task at hand.
For the project itself, many things went right and not many things went wrong. For example, my research phase went by really well as well as testing and creating the prototype. I really enjoyed creating the prototypes and letting the creative juices to flow, receiving feedback and making changes was really beneficial in gaining confidence and understanding.
The only thing that went wrong was managing the expectations I had placed on myself and creating a portfolio. Where and how to begin was the challenging part however, after gaining inspiration from portfolios on Behance I was able to have a better perspective and approach.
To improve on these areas I would manage my work load more accurately by using a diary and establish a bigger network of designers who I can reach out to and share ideas with. I learned very quickly that doing things on your own is a recipe for disaster if you are not already somewhat established or really experienced. Collaborative work is fun and should be utilised for beginners like myself.
And so WavePro was born.
Below you'll see the final prototype link and interactive prototype
https://xd.adobe.com/view/b265ee7e-23d8-4634-94af-1cdb675cefb4-e736/
Thank you!
