Heidi (Wren) Peak

FINZ Your Ultimate Dive Buddy Ever find yourself underwater, surrounded by the mesmerizing dance of marine life, and then, just as you surface, you’re hit with the chaos of juggling multiple apps for planning? What went wrong? Well, those days are officially behind you! Streamlined Planning, Maximum Fun: No more app-hopping. No more toggling between screens. Finz is the culmination of the wish-list of every avid diver out there. Imagine one space where the weather forecast aligns perfectly with your dive plan. Picture the convenience of having all the essentials for a safe and thrilling dive day consolidated into a single, user-friendly interface. Wren Peak UX DESIGNER PROBLEM STATEMENT POTENTIAL SOLUTION RESEARCH GOALS Dive into the world of scuba, and you quickly realize that planning a day underwater can feel like navigating a sea of apps. From dive sites to weather updates, gear checklists to real-time conditions, the process is fragmented and cumbersome. Finz, needs to consolidate all aspects of dive planning into one intuitive platform, revolutionizing how divers prepare for their underwater journeys. and allows divers to quickly access accurate, comprehensive and easy to understand, weather reports, safety concerns and site-specific features that will help them plan, displayed in real-time, simply, with clear appealing graphics. 1 To understand users’ needs and behaviors for their diving interests. 2 To determine how likely and often users might use a forecast, locator or trip planning online service. Divers need a unified solution that not only simplifies the planning process but elevates it into a seamless, enjoyable experience. We measure success when divers no longer feel the need to switch between multiple apps, finding everything they need within Finz’s user-friendly interface. User satisfaction, retention rates, and positive feedback will be key indicators of Fins triumph in simplifying and enhancing the scuba diving experience and our user membership increases as divers switch to using Finz as their primary dive planning resource. The relevant data will be customizable and organized intuitively by category, depending on a diver’s specific needs, skill level or interests. 3 To discover the pain points users have while using competitors’ online services 4 To gather useful insights on how to display weather and other data concisely. USER RESEARCH In-Depth Exploration: Conducting six interviews and surveying 22 participants, I meticulously explored the diver community’s needs, challenges and pain points. Data Analysis and Affinity Mapping: Analyzing the collected data, I crafted an affinity map to distill key insights, providing a visual roadmap for Finz user-centric design. He checks other sources to get a better view of the actual weather before he decides He checks his forecast to plan the day & location of his dive She needs to check the forecasts to plan her dive site & the best time to go She needs: local hazard Info. visibility/wildlife/ wave heights/& storm front Info He needs to make wise decisions about her gear & what wet suit to bring He dislikes an app that complicates accurate, simple real-time weather & water states He dislikes not being able to verify weather & wildlife sightings via a local app user She dislikes not knowing where the nearest dive spots are located She dislikes not knowing about what sea life she needs to plan for He dislikes not having advanced notice about needing advanced certifications He checks the forecast daily starting one week in advance He needs to know Weather forecasts and water temps so he won’t be disappointed 3 things I need most: She needs to know the wave heights / sea state because she gets sea sick He needs to know real air and water temperatures He dislikes not knowing what gear to bring for a particular location & diving activity He dislikes having to scroll just to see what he needs & wants to eliminate what he doesn’t She dislikes not having a place to learn new skills or refresh herself in app She dislikes confusing graphics or interfaces He dislikes scrolling for info or having to use multiple app to meet her needs. He needs an app that shows where the nearest dive sites are He needs gear recommendations for dive locations & certifications required She needs a monthly weather summary of dive sites to know when to go there & not He needs an easy in-app way to upload his dive log & videos to social media He needs skills & certification recommendations per dive site & activity He dislikes needing 3 apps. just to know the wind, weather & water temps He dislikes inaccurate data, misinformation & wrong forecasts He dislikes missing or poor quality visual references of locations he’s interested in. He dislikes hourly reports like standard phone weather apps He dislikes not knowing critical information for dive sites & activities Air temperature Water temp/ surface/ subsurface, Wind direction & speed USER NEEDS USABILITY Findings Findings 1. 1. 2. 3. 4. Gear Decision Support: Divers rely on weather forecasts, dive types, and locations to make informed decisions about the gear they need. Activity Planning: Decision-making about the best days and locations for dive activities hinges on accurate weather forecasts. Temperature Guidance: Divers require real-feel air temperature and water temperature information to dress appropriately for boat trips and understand expected temperatures at planned dive depths. Continuous Learning: Divers seek opportunities to acquire new skills, certifications, and receive recommendations for an enhanced diving experience. Insights 1. Offer personalized tips on the best gear and wetsuits based on factors like water temperature, dive depth, user preferences, and real-time site conditions, considering elements such as currents, wind direction, sea state, pollution, and shark sightings. 2. Offer real-time location suggestions on the best dive sites for the day, factoring in various dynamic conditions and provide advice on locations depending on skill levels, interests and available location features, ensuring divers are well-informed for their underwater adventures. 3. Feature an integrated e-learning and certification portal, allowing users to conveniently sign up and participate directly within the app. This empowers divers to continuously enhance their skills and certifications, contributing to a more enjoyable and fulfilling diving experience. 2. 3. Information Simplicity: Divers seek accurate and straightforward information consolidated in one accessible place that is easy to navigate to meet their goals with minimal effort. Customizable Weather Views: Divers desire the ability to choose specific weather variables without the need for endless scrolling. Regular Forecast Checks: Divers have a habit of checking forecasts regularly, particularly a few days in advance. Insights 1. Offer high-quality imagery and HD webcam streaming for a visually immersive experience that accurately represents what will be found at that location. 2. Offer balanced forecast presentations that emphasizes precise short-range data while offering glimpses of long-range patterns for far-off travel planning. 3. Offer user-centric customization that empowers users by allowing customization of weather information based on their preferences for a personalized and efficient dive experience. USER PERSONAS USER PERSONA 1 #seriousdiver #curiouslearner #adventurer #wanderer Vajai #funlover #youngatheart #oceanenthusiast #energeticpowerhouse CAREER DIVER “I need the Now Cast, not the ABOUT MOTIVATIONS Vajai is a very successful PADI Specialty Diver, Instructor and Boat Captain, who lives in Florida, dives daily and runs a very busy, successful dive and tour boat business. He wants his customers to enjoy themselves so they will return, so he plans very thoroughly. • • • GOALS & NEEDS Forecast, so I won’t loose • • Needs reliable data in one place business from inaccurate • Needs features to assist his students Needs easy uploading dive log/ assets to social media for promotion weather, I check 3 apps” DAILY ACTIVITIES AGE: 56 JOB: PADI Specialty Instructor / Boat Captain STATUS: LOCATION: Single Key West, Florida INTRESTS: Travel / Salt Water Fishing / Diving • • • Checks 3 apps for weather Prepares boat for dive classes Instructs/certifies specialty divers Enjoying a day out on tropical water Teaching others his dive passion Going to new locations for adventure FRUSTRATIONS • • Having to go to 3 apps for his needs Inconvenience of finding out about new locations for his classes/clients DEVICES & INTERNET USEAGE Desktop Mobile Social Media Tech Know-how SITE MAP Following user flows, the focus shifted to information architecture. Conducting a digital card sorting test with 6 participants using OptimalSort by Optimal Workshop, valuable findings emerged. These insights sculpted the map structure below, where I made some changes to ensure a streamlined and user-centric navigation experience. Splash Screen Main Menu My Diving My Profile Buddy Contacts Dive Card & Certifications Dive Log Dive Computer Connect Send Dive Log to Instructor/ Buddy Help Upload To Social Media Certifications & Learning Center Dive Certifier Online Learning • My Social Connections My Locator Payment Center FAQs My Settings Historical Document Research Contact Us Sign Up & Save Log * Real Time Weather Station • Customizable • News Feed • Promote Wall Features & Bottom Topograph Libraries Local National My Favorites Google Maps Hazards & Wild Life Gear Tips & More Real Time Dive Trip Planner Dive Location Finder Research Shipwrecks Ship Manifests FINZ Network * • My Weather Station Long Term & Monthly Weather Summaries Search & See Videos Dive Packages Booking Center & Agents MEDIUM-FIDELITY WIREFRAMES Armed with comprehensive insights, I transitioned into the development phase, constructing a clickable prototype in Adobe XD. The journey unfolded from initial sketches, progressing through mid-fidelity explorations to refined high-level wireframes. These served as the foundation for high-fidelity iterations, meticulously prepared for upcoming usability tests. A glimpse into this evolution includes the Onboarding process and the search location - weather forecast screens, representing the culmination of thoughtful design and user-centric refinement. FLOW 1 G LO G A O Intro Page / Splash Screen with animated logo. E IM G A E IM IM AG E Sign up / Login 1: User has the option to skip and view as a guest or to sign up / login or to participate in the Onboarding process. Onboarding 2: How to use the search filters to find location weather forecasts nearby or across the world. Onboarding 3: Custom forecast view that shows how to set up your weather station to suit your needs. Onboarding 4: Safety advice, gear tips and wild life reports available per location and current weather conditions. Onboarding 5: Users can either set up their preferences for custom app functionality or skip it and return later when they are ready to do so. Onboarding 6: Users can tap any feature and a fly out menu appears with that features options to turn on or off. Home 7: Users set up what info. they want to appear here. Many choose their dive log, others want the news feed or their social media. Weather Search Screen 2: User can search for a specific location or check nearby suggestions and popular locations for weather and other data. Location forecast screen 3: From previous screen, chosen locations are displayed with 8 day weather vertically, hourly slide to the right. User can rearrange location of choice forecasts: wind, wave and temps as they wish. Tips and hazards info can be accessed here from top buttons. Gear Tips 5: All manner of Gear advices based on location, current weather and skill levels or interests are featured here. Onboarding 5: Users can either set up their preferences for custom app functionality or skip it and return later when they are ready to do so. Onboarding 6: Users can tap any feature and a fly out menu appears with that features options to turn on or off. Home 7: Users set up what info. they want to appear here. Many choose their dive log, others want the news feed or their social media. FLOW 2 Home 1: Users can tap the weather icon on the bottom Nav to go to the weather search filter screen AFFINITY MAP FROM USABILITY TESTS Utilizing the Adobe XD prototype, I facilitated a series of usability tests — one in-person and five remote, all conducted within a two-week timeframe. The tests, executed through Lookback, followed a structured Test Script, serving as a reliable guide in navigating the studies and extracting targeted information. The insights gleaned from these tests, noted below, informed the creation of an affinity map. This map became the blueprint for refining designs, prioritizing enhancements based on higher-severity errors revealed during the testing process. The rainbow Spreadsheet can be accessed here. (hyperlink) Test Script here. (hyperlink) Observations Positive Quotes Negative Quotes P1 Nav unclear so got stuck on task 2 & 3 My Activities did not mean locations P1 Real Time Share with Buddies on Task 3, was unclear so user got stuck here P3 Got lost on navigating often & had to ask frequent questions about what to do. Wears glasses and said 20pt type could not be read. I had to hint a lot. P1, P2, P3, P4, P5, P6 Liked Finz graphically, & the top & bottom Nav Bars being wavy-Cool! P4, P5 Liked how the bottom nav was intuitive, with text saying what they were/user friendly P5 Said the icons in general, were self explanatory & did a good job of directing you where you want to go reliably. P1 After credentials were added in T-1, user was expecting login screen & was missing from flow P1 I want to see a scroll bar for info below view on weather & other screens P2, P6 I think the top nav on weather & a few other areas are too much like the lower nav. They need to be secondary so they don’t compete or confuse users & huge. P2, P6 Thought real social media buttons should be used for better clarity P3 Feeling frustrated often in not knowing what to do or where to go, claiming can’t see P5 User is color blind and was feeling confused as some of the nav buttons were incorrectly shaded and it through him off P3 Despite Nav-sight difficulties, had fun taking the test & said she learned a lot. Liked the app. P4 It is cool you can choose what info you want to see on your home screen P2 Said this/Finz is a very intuitive app to me & I like what it offers & would definitely use this app. P2, P6 Welcome to Finz screen seems superfluous, making the user click too much to go anywhere P2 Some fonts seem too large. They are 20points, too big for secondary information. P2 Thought the app needed some pizzazz & suggested a wavy top and bottom nav bar, like the water, not a straight typical edge P3 Skipped Onboarding which would have helped acclimate user to the app. P4, P5 Had no trouble navigating the app, completing tasks, so explored P5 Was feeling happy about the app including a share button, further observation found the app navigation very user friendly P1, P2, P3, P4, P5, P6 I like the layout, how it looks & most places ( except P3)are very intuitive. P4 I really like the eye catching appearance and its interesting buttons, Fun to use. Intuitive. P4, P5 Both use weather apps to figure out water temp at locations & think it’s neat that you can do that in-app & use Google at dive shops for price comparisons P3 White screens are too bright for outdoor use-need a dark mode! P3 I find the wave picture used for some screens to be way too busy & distracting P5 It would like to have a button for my current location, so I know what the weather data is for where I’m at because I may not know where I am. P3 Left me feeling that I must re-work my navigation to make it more clear P4 Had easy ability using & navigating with the provided icons & buttons P5 Last 2 tasks were performed easily & he liked that there were several ways to accomplish tasks to reach intended goals P4 I liked the ability to edit & add in different areas of the app where I would want to do so P4 Liked that you could heart your favorite places & store that info in the app P4, P5 I liked the share button on the dive log for easy hand off of information right from the app. P6 Seems like some screens are duplicated in task-1 & are not needed P6 Some back buttons don’t make sense to me, I am confused by them P6 The bottom nav highlighted buttons are confusing me because the wrong ones are highlighted in a number of places P5, P4 Took his time exploring the app’s offerings & was happy that all of that was in 1 app. P6 Moved through the tasks accomplishing them without difficulty P6 Made numerous suggestion on how to improve the app flows, navigation and presentation of information on many screens. P6 Give more space between your social icons & use current icons so they will be easy to use P6 The set up for profile during onboarding could be simplified with some tasks on top level. P6 These sub-level pages confused me because they have the bottom nav on them when I feel they should not. FINAL SCREENS In the Figma iteration, I conducted User Preference Tests with six users, leading to multiple additional iterations to align with the insights gathered through that investigation. DESKTOP PROTOTYPE Despite the project’s Mobile-First directive from the client, I initiated the development of the desktop version. This proactive approach served two key purposes: to anticipate rapid iteration into this stage and validating the designs for optimal presentation on larger devices. UI ELEMENTS Here is a curated assortment of UI elements employed in Finz. Looking ahead, there’s room for expansion, particularly in the weather icons and other sections earmarked for potential growth. This segment of Finz documentation will also incorporate upcoming animations to enrich the user experience. 01. Color PRIMARY COLOR PALETTE CELTIC BLUE LOGO COLORS SECONDARY COLOR PALETTE COBALT BLUE LOGO OUTER GLOW: This is used when the logo is placed on dark images or backgrounds where it is needed for legibility. HEX: 689AF0 RGB: 104, 154, 240 CMYK: 57, 37, 0, 0 HEX: 4074CC RGB: 64, 116, 204 CMYK: 76, 54, 0, 0 HEX: 2849A3 RGB: 40, 73, 163 CMYK: 94, 82, 0, 0 LOGO LIME LOGO BLACK HEX: DADD51 RGB: 218, 221, 81 CMYK: 18, 2, 83, 0 SEA GREEN BLUE HEX: 001021 RGB: 0, 16, 35 CMYK: 87, 75, 57, 74 TANGELO HEX: 9CC1FF RGB: 156, 193, 255 CMYK: 35, 17, 0, 0 Otherwise, always use the logo without a glow. HEX: BDD3FD RGB: 189, 211, 253 CMYK: 22, 11, 0, 0 LOGO PLACEMENT: A 48 pixel buffer must surround the logo where nothing is closer and when placed in a container, the 48 pixel buffer must be placed around the all sides of the logo within, see example above. 48 px HEX: 2C909C RGB: 44, 144, 156 CMYK: 79, 27, 36, 2 HEX: 98C8CE RGB: 189, 226, 231 CMYK: 24, 1, 8, 0 HEX: E5E881 RGB: 229, 232, 129 CMYK: 12, 0, 63, 0 HEX: F4F7BE RGB: 244, 247, 190 CMYK: 5, 0, 31, 0 COLOR USAGE: HEX: BDE2E7 RGB: 189, 226, 231 CMYK: 24, 1, 8, 0 48 px OUR COLORS We chose our apps colors for their relevant emotional values: Our Warm Black: Because it is softer, easier on the eye for users and it’s friendly appeal. Our Blue Shades: Because they encourage amazement and surprise. Diving embodies both of these emotions. Our Lime Yellow: Because it triggers emotions of ecstasy, joy and serenity. Scuba diving is all about all of these emotions. It also dips into admiration, trust and acceptance which we want our users to feel when using our app. Our Tangelo: For limited use only, warnings and error messages. HEX: 569299 RGB: 86, 146, 153 CMYK: 69, 29, 37, 2 HEX: F6511D RGB: 246, 81, 29 CMYK: 0, 83, 99, 0 Celtic Blue and Logo Lime are used for top and bottom Wave Graphics. Logo Black is used for most default text. It is also used for the fly out menu on the Profile Screen. Medium Sea Green #98C8CE and Logo Lime are used for secondary icon container Wave Graphics along with. Tangelo is used for video icons, Map Locator Icon and Warning Alert icons in the weather sub screens. Cobalt Blue is used for secondary and tertiary icons and Search Locator Titles. Sea Green Blue is used for selected states on the Search Locator Titles and Cards and Buttons of the Profile Screen. Celtic Blue is used for highlighted selected text and Head 1 and 2 Screen Titles. The Secondary Color Palette is used on Secondary and Tertiary Screens to designate specific activities such as gaining additional information or booking hotels, cruises and charter boats. 02. Typography Inter - Regular, Medium, Semi Bold, Bold, Black and Ultra Black Alumni Sans - Semi Bold and Bold Google Fonts Name Heading 1 Font Size/Leading Weight 64 px /46 px Bold Alumni Sans Heading 2 36 px /32 px Semi Bold Alumni Sans Heading 3 32 px /32 px Semi Bold Alumni Sans Heading 4 20 px /Auto Semi Bold Inter Body Text 1 20 px /Auto Bold Body Text 2 18 px /Auto Bold Body Text 3 16 px/Auto Medium-Semi B Sans Serif fonts play a pivotal role in fostering clear and cohesive communication within Finz. Their subtle presence supports the information without being distracting, ensuring a harmonious visual experience. The hierarchy is carefully crafted through variations in sizes and weights, allowing for an intuitive and structured presentation. Where To Use Log in and create Accounts Screens in Celtic Blue. Search Locater Screens in Celtic Blue and Sea Green Blue when selected. Onboarding Screens Titles for Primary Screens. All Cap. Secondary Screens are Upper and Lower case. Book Now Buttons. All Cap. Totals text line on Booking screens. TOTAL All Cap. Buttons. All Cap. Medium: MapQuest Directions, text after a /, Secondary Share Buttons, SB: text on Booking Screens, Bold: on Tertiary Card Screens, Price Screens, Send Buttons All Cap. Black: Added Buddy Names. Regular: text above cards with Bold: Headers. Body Text 4 16 px/Auto Bold-Black Body Text 5 14 px/Auto Regular - Bold Medium: entry fields. Body Text 6 12 px/12 px Medium - Bold Icon Labels & Profile Buttons. Bold: Toggle Buttons. Inter SemiBold: Primary message text Onboarding & Profile. 03. Components NEXT STEPS CONCLUSION Tools Enhance skills in responsive design for desktop and tablet screens. Develop proficiency in interaction, animation, and UI libraries. Deepen familiarity with Google Material and iOS Human Interface guidelines. Strengthen abilities in Figma, AI integration, and time management, aligning with the evolving demands of the industry. Crafting Finz from the ground up was a substantial yet thrilling challenge, immersing me in every facet of the UX research and design journey. This endeavor demanded rigorous effort and a shift in perspective, prioritizing design principles centered on the target user rather than personal preferences. Adobe: Photoshop, Illustrator, InDesign and Xd CLIENT CareerFoundry UX Design Graduation Project Mentor Yu Hao Tutor Caitlin Crow UX/UI Design Wren Peak Creative The outcome is a seamless addition to the scuba diver’s lifestyle, eliminating the need for three different apps. Finz addresses pain points, providing easy-to-understand weather, sea-states, bottom topography, hazards, and area features. It empowers divers to plan safe and enjoyable dive adventures. My satisfaction extends beyond the realm of user-centric design. Building Finz enriched my understanding of human behavior, emotions, and motivators. It was an insightful journey through app development, presenting opportunities to acquire new skills and broaden my knowledge base. Figma, Lookback and UsabilityHub, Marvel and MidJourney References Hero Images & opening Screen by Wren Peak Creative in MidJourney App images by Wren Peak Creative in MidJourney Personas & Photography from www.unsplash.com Main Navigation Icons by Wren Peak Creative in MidJourney All other icons by Material Design, Noun Project & www.vecteezy.com Logo: modified icon by Shutterstock