SWel
september - october 2022
Swel was desiged for beachgoers as an alternative app that combines the familiar interface of contemporary weather apps with the precision of beach weather portals.
Tools used: Figma, Adobe Illustrator and Photoshop.
GOAL
__ Accurate information for surfers and regular beachgoers.
__ More images, less text.
__ Clear icons, intuitive graphics.
Market Analysis and User Research
__ DEFINING KEY FEATURES
Users want easy to understand interfaces.
Set of data that combines regular weather app information with coastal weather.
__ REFERENCING EXISTING APPS AND WEBSITES
Upon analysis and comparison, I found out that scrolling elements, as well as graphs and color coding are very popular among weather apps.
Iconography is another big player when it comes to easy and fast communication.
__ VISUAL INSPIRATION
I asked friends who surf which app they used the most, and it turned out that Surfline, an app that is based on livestreaming the waves in certain beaches, was the most popular.
This was also a turning point to my original idea of creating an app for surfers only. The highly specialized Surfline already has a lot of popularity, and I knew that shifting my audience towards regular beachgoers would expand the possibilities of the app.
Development
.jpg)
__ IDEATION SKETCHING
Exploring the layout and features of the app through quick sketching allowed me to explore different possibilities of layout and interactive elements.
__ DIGITAL EXPLORATION
From paper to screen. Exploring how to fit every element into the screen in the most efficient and effective way possible. How can I show the most relevant information in the most clear ways.
Tables, boxes, and graphs were my chosen communication formats.
__ TYPEFACE
Roboto: Easy to read, modern, and informative, but more friendly than traditional swiss types.
Montserrat: Used exclusively to display the temperature once opening the home page. Wider font creates contrast with the body’s font, drawing attention to the most relevant piece of information of the app.
__ ICONOGRAPHY
I designed simple icons to represent the weather at a given moment, based on existing weather app icons. I went for a style that combines flat shapes with minimal shading for a modern, and intuitive look.
Branding
__ LOGO
Inspired by a swimmer, the logo speaks to the audience and the main purpose of the app.The color palette speaks directly to the visual language of weather apps:
Blue: sea and sky
Yellow: sun
White: wave and swimmer.
Graphic balance was another crucial part of the logo, since it had to fit in a small app display square with rounder corners and still be easily recognizable.
__ FINAL LOGO DESIGN
Left: app icon
Right: Full logo with “Swel” script.
Final Prototype
.png)
conclusion and learning outcomes
Design and test: I realized that by testing as I made changes to the UI as well as the prototyping of the model, the path of actions in the app made more sense and seemed more intuitive.
Letting friends and family test the app and give me feedback was also extremely useful.
Process efficiency: By using components and smart animations, the design process can be significantly streamlined. In future projects I will strive for less, but more effective and well-rounded elements that can be applied to multiple frames.