“Enjoy beach days Your way”
As part of my UX course with Career Foundry, I designed a community-driven responsive web app, to provide busy families with hyper-local information about conditions and facilities to curate their days out, the way they need them.
Explore the Baja prototype here:
00 | PROJECT OVERVIEW
The Objective:
To design a responsive web app that provides busy families and individuals with hyper-local information on local beach options wherever they are, according to their needs, with vital weather conditions, and facilities so they can enjoy quality time on the beaches & water safely.
It is important for the Baja users to be able to add up-to-the-minute information on hazards or local conditions, adding a hyper-local element that empowers & informs their beach community.
The Product:
Lots of weather Apps fail to take into account the needs & activities of people using their local beaches, and the role those needs take in decision-making.
The Baja App offers everyone a way to customise the information they need according to their needs – be that a specific water sport & the perfect conditions for their day or if they’re looking for conditions & facilities right for the whole family, so they can enjoy their days out their way.
| The Design Process:
01 | UNDERSTAND
| Competitor research & analysis:
Before talking to potential users for the App and what their needs were I wanted to research what services the competitors in this space provided their users with, what features were offered, how easy they were to navigate and most importantly - I wanted to see where the opportunities were for my App, Baja.
The 3 competitors in this space were Willy Weather, Dark Sky and Weather & Radar:
SWOT analysis of Willy Weather App
All 3 Apps provided extensive, weather information, with lots of very technical information, animated maps and a variety of detail that could be accessed in different ways.
They all felt like they were trying to appeal to people who may have either been working or competing on the water – rather than how they spend their leisure days – often only covering the more popular tourist sites.
When analysing the offers it showed me that there was a real need for more locally sourced, up-to-the-minute information that covered more than just weather.
| Risk & Opportunity:
The risk is the over-saturation of the weather App market, however, because of the differentiation that I intend to offer:
1) The activity-specific filtering
2) Additional information that influences decision-making
3) the ability of users to be able to update hazards and sea/beach conditions bringing a crowd-sourced intelligence element to the App.
There is an opportunity to outrun the competition and become the most relevant web app for local sea & beachgoers. To see a more in-depth analysis of the 2 competitors I honed in on click here.
02 | EMPATHIZE
| User research & analysis:
My first step was doing Qualitative User Interviews with a group of 5 potential users who had a variety of needs – from being family-focused to more competitive sports-oriented – or both. I also made sure I got a mix of locals and visitors to understand a variety of experiences.
My goal was to find out what Apps they had used before if any, and what they liked and didn’t like - to build up a picture of their experiences.
Once I had gathered all the data from these potential end-users and curated it to understand the challenges they face and how they felt an App could make a difference in addressing their pain points and needs.
This informed much of the initial hypothesis of Baja - around what would help them and how they would like to interact with a weather/conditions App.
Quotes from my initial discovery interviews with potential users of my App - Baja.
| Top Takeaways:
Weather:
Wind, Rain; Temperature; Tides, Currents; Water quality; Hazard Warnings; SeaWeed, the rockiness of the shoreline; jellyfish & quicksand. Parking, Access, local facilities & any Rules & Regulations.
Connectivity:
Communicating with friends/family or groups that shared their activities - everyone using FB / FB Messenger /WhatsApp or their phones to plan/share information.
Community:
Sharing community intelligence: All interviewees either shared information with local community groups to varying degrees or checked local resources for real-time local information. Facilities & condition updates E.g - water quality or Beach cleaning.
Local Know-how & Resources:
All the interviewees wanted easy access to local knowledge or tips - E.g: Best beaches to launch from / Safety tips / Facilities or local equipment or cafés through to tips on techniques or what to do in emergencies in the water.
The Tone:
Baja needs to feel like an accessible essential to people's social & everyday lives, with the design & tone of voice need to feel relatable in a family-friendly and accessible way.
| My Primary User
Charlie is a busy mum and a professional who needs to be able to organize herself or her family's time so needs hyper-local information to be quick, easy & relevant to her & her family's activities
She has to take lots of different age-group needs into consideration when planning a day out.
The family experience is important, and as a group, I felt they are under-serviced by weather apps.
Charlie also does more than one activity on the water and is sometimes solo or with her husband, also an experienced SUP Boarder, so thinking about their or her individual needs in these different contexts was also exciting and different to those when she is with her family.
I also created 2 other key personas:
Jordine is an impulsive, impatient & super sociable person, who needs to be able to quickly get weather info & conditions.
The beach community is a big part of their life & they like to be able to share information & organize with their group, not just from a safety p.o.v but also to help with planning.
Matt has a military background, is a super-organised planner, and always checks the weather, needs local weather, safety & facilities information.
He is an avid SUP boarder and also offers lessons, professionally. He would like to be able to have one place where he can get all his info and also communicate with friends or students. To explore the user research in more detail you'll find more here.
Chalie's User persona - my primary design persona
| Understanding the Problem
The Problem - what does Charlie need?
As a busy mum, I want to be able to see (and contribute) to what the weather, local conditions and facilities are like - either at my new holiday spot quickly (or at home where I live by the coast) knowing that it is hyper-local and relevant so I can make quick decisions, on the go - with all the information at my fingertips. I don’t want to have to use 4 apps just to organize my day out.
The Hypothesis statement - how can my App, Baja, provide a solution?
“We believe that by creating a simple web application that allows users to filter weather information that's relevant to their needs while on or in the water in their local area, we will achieve having Charlie be able to successfully plan for time on the water whether it's just her or her whole family."
03 | IDEATE
| User Stories & the User Journey:
Charlie's User Story: As a busy mum, I want to be able to see what the weather & local conditions are at my next holiday spot quickly and save it, so that I can use my spare time to can organize my family.
Here is the Storyboard that helped identify the different features that would help solve Charlie's problems.
Charlie's User Journey / Scenario:
Charlie is travelling with her family for a weekend break, what does she need?
1) to be able to find the best location with the best conditions
2) find a location that also has the right facilities for everyone
3) to be able to SUP Board with her whole family, including her dog
4) Also share the destination with friends she's planning to meet.
Her Goal:
To use Baja to find the beach with the best conditions for their family day out and the best facilities if available and to check on any local hazards.
Charlie's User journey
| Information Architecture:
User flow/tasks breakdown:
Before I began the process of designing screens I looked at the goals that my personas needed to create a User flow diagram to identify the key features within the flows that would best serve the needs of my primary persona.
This User flow diagram would work as the initial plan for which features would be available within the App and which screens I would need to design and how the user would navigate through them.
Charlie's User flow for task 1
My next step was to identify the key features that would be needed for all my user personas for my wireframes in the working hypothesis of Baja:
Each user needed the following features:
1) Quickly identifiable weather conditions at the destinations available on the map
2) Ability to filter by Activity (primary filter)
3) Ability to filter by facilities or services available (secondary filter)
4) Ability to connect - either sharing or chatting with friends to be able to organize & plan.
5) Ability to save places or content to Favourites.
04 | DESIGN
| Low fidelity wireframing
Using my user stories and the resulting user flows, I started to mock up ideas for the key functionalities that would be needed in the App sketching simple wireframe ideas for Charlie to achieve her goals.
The low-fi wireframes were then imported into Marvel to create clickable prototypes that I could then use in my usability tests with my participants.
Charlie's User flow 1: Finding a suitable location with the right weather conditions for her activity and adding it to her Favourites.
Charlie's User flow 2 – Sharing details from a desired location with one of her contacts.
| Usability Testing
Once I had tested my low-fidelity wireframes with 5 users I then started developing mid-fidelity wireframes – and tested those with my usability test participants.
Mide-fidelity wireframe of Charlie's User flow - Finding a suitable location and adding it to her Favourites List
| Moderated Usability Tests of Mid-fi wireframes:
The next steps were testing my low-fidelity wireframes from my initial hypothesis with my group of diverse users:
Scope: Usability testing on 4 tasks of the low-fi initially then the Mid-fidelity prototype of Baja – community-driven Weather App
Schedule: Tests were done in person across 2 weeks in Spring 2021
Sessions: 4 individual sessions with each test participant.
Participants: Philip (CAD Designer) | Abi (student) | Charlie (Artist & Mum) | Laura (designer) Becky (DJ / Mum) & Marie (retailer / mum)
Equipment: Smartphone with the Marvel app and recording using another smartphone, with permission.
What were my Goals?
The goal of the usability test is to assess the learnability and efficiency of new users of Baja, a Community-driven Weather App for the first time on mobile and desktop.
By observing how they use the Baja App's core functions I can assess how Baja works for them. My Usability Test observations and feedback from my participants are here to explore further.
The test Objectives:
1) To determine design inconsistencies & usability problems within the user interface and content areas.
2) Determine how quickly & easily users can Log In to the App and discover a local beach with the right weather conditions.
3) Determine how quickly & easily users can share or save favourite spots.
4) Determine how quickly & easily users can report hazards to their local community using Baja.
My testing methodology:
Moderated in-person testing sessions allowing me to see more of the non-verbal communication
Planning: For a detailed Test Plan follow this link here
Who were the Participants?
The 6 participants between the ages of 22 and 55 are a variety of people who use the beaches and water regularly or who visit occasionally, recruited through both my personal network and social media.
What d'you say?
For a detailed look at the Test Script, including a list of all tasks tested, feel free to explore the complete script here.
I then collated and synthesized all the feedback from my usability interviews into groups so that I could look at errors and edits and which elements I needed to prioritize to iterate the design:
Sorting the feedback from my participants to analyse & prioritize the next steps on the design process.
| Moderated Usability Tests of Mid-fi wireframes:
The next step was fleshing out the low-fi details into mid-fidelity wireframes, adding UI elements like text, initial icon ideas, menus & buttons to show how the functions and interactions work for the user, and then testing the iterations to see what didn’t work and what could be improved.
| IDEATION
Issue 1: Iterations of how the most relevant Map Locations
Issue 2: iterating how the Map filtering function works
Issue 3: Iterating the presentation of the weather
Issue 4: How Charlie shares information with a friend?
| REFINING THE DESIGN
| Bringing the Design to Life in High Fidelity Prototypes:
As part of establishing the brand DNA and the 'style handwriting', it was helpful to create a mood board to curate my ideas and confirm the visual style and tone for the Baja weather App.
This is an initial working idea which I will be refining further - very much in light of the learnings from my UI specialization at Career Foundry.
| Visual Guide: Mood Board
Mood board to set the direction for Baja - UI very mucha work in progress.
| Colour palette
Baja Colour Palette
| Typography:
Typography - initial draft ideas
| UI Elements:
Working UI elements
| Illustrations & Animations:
Illustrations & animation initial direction ideas
| Imagery direction:
Images must be in high resolution with as much clarity to show the beach's best points.
Where there are images that are about activities there must be more focus on primary colours and also making sure diverse audiences are reflected in all imagery.
Baja's visual language must always feel down-to-earth, optimistic and inclusive. A mix of close-up and middle distance.
| Tone of Voice / Copy guidelines:
Baja's tone of voice is human, down to earth with a fun and slightly irreverent tone - always family-friendly.
This app is for when people are planning a fun day out so remind them of that feeling and prioritize content that ensures that their planning is easy and fun.
We want Baja users to feel like the App is happy and helpful - the glass is always half full!
Our weather information must be clear and ensure that people always feel safe but don't use over-technical language, always Straight forward and easy to understand.
We do:
Sound conversational
Have a lot of energy
Have fun with words
Have a light-hearted tone
Speak honestly & directly
Take what we do seriously
Celebrate our community
We Don't:
Sound corporate
Use black and white imagery
Use dark grounds
Condescend or patronise
Sound heavy-handed
Use confusing terms or jargon
Take ourselves too seriously
Alienate anyone
05 | PROTOTYPE
Initial MVP mock-ups - working model:
Explore the Baja prototype here:
Conclusion of my Introduction to UX "Baja" Project
I really enjoyed the process of learning about UX through this project and especially the collaborative nature of how the design evolved, it felt like a very natural process. The discipline of keeping the users in mind at all parts of the design process whilst also thinking about how a design would need to serve a business's needs was also very exciting.
Next Steps
I am continuing to work on the Mobile version of the App and also the Website version, this is to really define the different personas' needs through the different devices that people would use.
This is especially important as I know from my interviews with participants that as this web app will offer content that will help plan, many of the people would like to use it to discover more and would be more likely to do so on a website.
The other part that I'm looking forward to once the design is more evolved is developing the UI side - and how that could help service the functions and hopefully surprise and delight the users.
Thanks for your attention & the time you've taken to check out Baja.
If you'd like to connect, please get in touch via this link or head to "Contact"
