WeatherScape (part 1)
Final Prototype and Application in part 2
Project Overview
For this Project, in teams of either 2 or 3, we were free to choose a client and subject matter, real or fictious, for our application.
Our team consisted of 3 people and 3 roles: UX Designer, UX Researcher & Usability Tester and Developer.
My Role was the ‘UX Designer’. My overall responsibilities were…
- Design
- Design Research
- Prototyping
- Presentation
- Blog Article (This one right here!)
Our final application:
- Must provide a useful interactive service to its users
- Must be able to interact with content and store data specific to them
- Must incorporate stunning visuals, imagery and aesthetics
- Must require login access
- Must provide information for non-logged in users, (introduces / advertises the app, its core features)
Conception of Idea
As we were working in a team of 3, our first meeting was brainstorming ideas and potential solutions that met the requirements of the brief.
Our Idea will help with youths problem of stress, anxiety and sleeping. Our aim is to try and provide soothing sounds and calming visuals for those who have trouble with sleeping or anxiety, overall lessening stress and anxiety that students so often feel.
Our Solution will be an Australian based website that allows users to tune in each day and experience a soothing soundscape that mirrors the weather within each Australian state (according to the Bureau of Meteorology in Australia). The user will be able to save environments along with their sounds to be able to listen to the later if they wish.
Our Visuals will change each day. A new day = a new background depicting a different scene that would be seen somewhere around Australia. This “WeatherScape” will have a simplistic vector art form to place more emphasis on the soundscapes provided, while still providing good visual stimulus.
Our Client was Headspace at the beginning of this project. Headspaces’ goals of helping with youths problems with stress were similar to the goals we wished to acheieved, so they became our inspiration. At the end of this project, we decided to just make headspace a partnering company, and let “WeatherScape” be our ficticious client.
Background Research
Our Project Goals
- Create an app that is understandable and easy to use
- Providing the weather information
- Help our user to improve stress level, anxiety, and get better sleep through the use of both audio and visual
- To bring places around Australia closer to you
- To create a comfortable atmosphere
Our Users’ Goals
- Improve sleeping disorder, reduce stress, anxiety and maintan mindfulnes
- To escape from the routine, without having to spend much or travel far
- Help users to relax, relief stress, and have a better sleep
- Setting positive atmosphere at home and bring the ‘nature’ closer
Our Target Audience= Students, specifically 12–25-year-olds.
Design Research
To decide what direction the design should head, I conducted some case studies on different existing websites that are either visually similar or thematically similar to our idea “weatherscape”, as well as looking into come current design trends.
Case Study #1: Pixel Thought was thematically similar to our idea, as it also aimed to reduce stress. The website led the user through a journey, which was very calming. The design has simplistic animation, which created a peaceful and calming atmosphere, but also made the website intriguing. The intent of this website was made clear since the colour scheme was simple and the design was minimalistic.
Case Study #2: Calm’s website was also thematically similar to our idea (their goal is in their name). This website showcases a simplistic and minimalistic design, which contributes to the calming atmosphere and the intended purpose. The simplisity made it easily navigable for unexperienced users and easily readable for stressed or overwhelmed users. The design was very modern and uncluttered which allowed the main purpose of the website to shine through. Its cool tone colour scheme and font choice also contributed to the peaceful aesthetic.
Case Study #3: GlareDB’s website had a design that was visually similar to our envisioned design. The homepage has parallax and foreground animation which was a design trend we were really keen to try to add into our final solution. The micro animations and interactions throughout made this website really appealing. Its on trend and modern, which is what we wished to show in our design.
Case Study #4: Atmos was another website that was visually similar to our intended design. This website has such a cool design; it guides the user through a journey by flying a plane through the ATMOSphere. The sunset and sunrise colour gradients change as you fly through the air adding to the calming and engaging feel. Its minimal menu provided, and the clean layout of the main screen assures no distractions for the user.
Design Trends #1: Frosted Glass creates subtle depth, resulting in a sleek design element. When using this effect on a background, it makes a softer display of colours. This background is a super soft, simple, but effective effect, especially when using cool toned colours, as it emphasises that winter feeling.
A negative with using the frosted glass effect is on small elements like logos. It adds visual complexity which causes the clarity of the overall element to be lost. When designing a logo with a frosted effect applied, shapes that are recognisable and understandable would allow the final product to be the most clear and readable.
Design Trends #2: Minimalism is everywhere in designs at the moment and I personally love it! Minimalistic designs really allow the key features and core purpose of a website to shine through. To be able to strip back a design to the bare essentials really allows for a easy experience for the user. Having little to no distractions in a website also allows the user to be less stressed; a key goal in our idea, making minimalism a perfect design trend to follow.
Features that make a website minimalistic, includes…
- Flat designs
- Limited colour scheme
- Few UI elements
- Use of negative space
- Hidden navigation
- No excess details (transitions, shadows, textures etc)
A pitfall within minimalistic designs is that because the designer has removed unnecessary elements, users may feel like they don’t have functionality or control. Sometimes features are hidden or not there at all to be able to create this clean interface.
Design Trends #3: Parallax is also everywhere in designs and code right now. Parallax is where different elements or layers of a website (foreground and background) move at different speed, giving the sense of depth and movement. Parallax scrolling intrigues, fascinates, and entertains the user. When using parallax in a website design, it not only improves the story telling, but makes the compelling message and purpose very impactful. The more interactions the user has on the website, the longer they will stay, and the more likely they will be to return.
Using parallax in our website would…
- Enhanced storytelling
- Magnetises attention
- Longer session durations
- Increase user return rate
However, we don’t want so many interactions that it overshadows the main message and purpose of our website. This technique should only be used where it can enhance the users experience. And for those who get a bit sea sick (or just sick) from seeing the parallax, we could always add a feature in the settings where the user can turn off the effect.
Check out the examples that were listed above:
