By combining the Design Thinking and Agile Principles we created a LEAN UX method with our USER’S needs as a main focus throughout the whole project.
Keywords: Problem Definition | Competitor Analysis | Business Requirements | Target Group | User Stories
A first deep dive into the world of seas sports helped in understanding the need of this market for such a webapp but also to state a hypothesis of a possible problem that worked as a initial reference point throughout the project.
1024_2.jpg)
It contributed in finding and improving solutions that already are out in the market and understanding the weaknesses and uniqueness of existing webapps. It started with 20 competitors (weather forecasting webapps in general) and 3 main competitors whose solutions were the closest to our hypothesis (Problem statement) were chosen for further analysis.
All three competitors varied in the approach from open source to a more ‘Pro‘ subscription based membership. The similarities found were the amount of features and their detailed yet not so compatible mapping systems. All of them provide detailed customizing options for the type of forecasting (massive list). Having a more open source character (WINDY.COM) and examples like WINDYAPP were more minimal in their design with reduced steps in their navigation. Furthermore, their user interface could definitely be refined and improved in terms of experience.
“ …the experience in all three competitors’ apps were lacking in ways
of enhancing the learnability of users about weather conditions. “
“...none of the competitors though really helps beginners get an idea on
how to read or make an evaluation out of the features provided. ”
1024_3.jpg)
Even though VELA is a case study I wanted to understand what such a solution can mean for a business. For making the approach more realistic, we created possible business objectives using the S.M.A.R.T Method (UX related). Also, my background in Branding got into action by thinking of possible risks and opportunities and by setting a mission not only for me (the designer) but for all stakeholders.
1024_5.jpg)
1024_1.jpg)
Keywords: UX (Generative) Research | Interviews | Surveys | Affinity Mapping
A combination of qualitative (interviews) and quantitative (surveys) provided data that initially would contribute to confirming whether our initial hypothesis (problem statement) is valid or not. Furthermore, the collected data is meant as the core source of inspiration for the ideation part that comes afterwards.
This was one of the parts I enjoyed the most as connection with real users is created. It is the exciting phase where I ‘dived’ deeper into understanding the feelings and emotions of the users, understanding better the lifestyle or sea sport aficionados. Being Dutch born and raised in Crete so finding people related to seas sports was easy. Five people were interviewed who are related with sea activities (any level) in order to gather information about their needs, goals, frustrations, experiences and any other qualitative data that seemed appropriate for the project. The methods used were a Matrix Wall first and Empathy Maps afterwards.
The surveys (Google Forms) contained 15 questions based on the research goals. This quantitative data provided more clearance regarding our possible users’ needs and a reference point in order to revise and compare with the results of the interviews. The response from the applicants was very positive as all 45 of them answered and completed the survey.
80% of the applicants practice a sea sport all the year through.
Pros use more than one app in order to evaluate the weather.
Simplicity is very much appreciated and helps with evaluating the weather conditions.
There seems to be no app offering information whatsoever about specific locations (geomorphic).
There is great importance in location information provided by other users (locals).
Users did not seem very excited to collaborate with local data scored low though. They must get something in return in order to keep them motivated (?)
The overall experience of current weather apps scores low (baseline).
Both qualitative and quantitative results were compiled by using the Affinity Map Method. The topics, points and other information that was used during this process were chosen based on frequency, urgency and emotional response of the participants. I started intuitively to group and create categories of issues and topics and slowly the insights started appearing.
1024_x.jpg)
Keywords: Design Personas | Journey Map | Task Analysis | User Flows
The insights and information gathered during the research were summed up in three Design Personas. This process helped in gaining clarity by forming an overview of the information surrounding the users’ needs such as characteristics, tasks, context and the users’ profiles. That gave a boost of confidence to define their goals, objective and possible constraints in the form of Journey Maps. The most magical moment came when the features we thought of in the early stages appeared as solutions (almost naturally) that I could break down into User Flows for each task towards them.
Keywords: Site Maps | Card Sorting | Foundation | Wireframes | Prototype | Balsamiq | Adobe XD | Figma
The Personas, Journey Maps and User Flows created a hypothesis that could be put on a test in the form of a high fidelity prototype. The initial step was to see how users understand the content and themes used on our app. For that, Card Sorting Sessions were held that gave us additional insights for the development for the first Site Map of our webapp.
The first site map of our webapp that was challenged through ideation phases on low- and mid-fidelity ideations.
That stage of ideating provided a better understanding of what is possible and feasible until a great milestone was reached: a High Fidelity Prototype (3 basic features) ready for the first usability tests.
Keywords: Evaluative Research | Affinity Mapping | Rainbow Diagram | A/B Preference Testing | Reporting
After creating a High Fidelity Prototype it is time to face a great challenge: Figuring out how and what should be tested. Preparation and accurate communication with the participants, seems to be everything! The task here is to challenge our developed features with respect to our hypothesis. That decision also defined the research goals, objectives and methodology.
The sessions clearly revealed issues. Still, there was an overwhelmness of (qualitative) results that had to be tackled with the use of Affinity Mapping and a Rainbow spreadsheet.
The quantitative confirmation of the results came through a Preference Testing session that was used as a second approach. Its results offered a secured feeling about the prototype to be taken for refinement in the next stages.
Keywords: Gestalt Psychology | Layout | Style Guide | Visual Principles | Peer Review | Accessibility Design
The tested prototype is ready to get a more defined UI. The main challenges here are how color palette, typography and UI elements can be defined by enhancing users’ engagement.
The changes from the Gestalt principles came along with the challenge of how to document our design and its details for communication purposes. In other words, a style guide that can be shared with Developers, Marketing / Branding Specialist and UI designers.
Showing my design to experts for peer reviewing helped even more in refining. I asked three experts (A Senior UX Designer, A Front-End Developer and a UX/UI Designer) for advice and possible improvements based on their experience. There was some positive feedback as well as some points. There have been similar comments (improvements) between the reviewers mainly on UI and stylistic issues such as lack of contrast and text size (readability) and consistency in the style (like e.g. in the iconography used). These were mainly issues of accessibility. And therefore, we upgraded the app and made the corresponding changes based on the rules and principles of Accessibility Design.
The most fascinating part is that such reviews can be a start for a good conversation where tips are shared but also sources of information or material such as stock material and other apps to get inspired from. Overall, the reviewers shared very excited reactions about how interactive a weather app can be!
The main dashboard had its major leaps during usability testing and refinement phase. There have been a variety of concepts during the early stages (low fidelity). Eventually, the idea of the circular scroll stayed throughout till now mainly because it received very exciting feedback during the tests and reviews. The main challenge was to fit all this information that needed to present simultaneously for the users to evaluate the weather. Now, as I look back to the process, I can say that this challenge has mostly affected the position of features such as ‘Saved Locations‘ and ‘Map Settings’ (now placed in the main menu) and the content in text form. Furthermore, for the forecast of the whole day there have been many iterations on presenting with the horizontal scroll being the chosen way so far.
Activity forecast reveals more information about a location based on a specific type of sport. In the beginning, it started as a separate page. Later on, it seemed more reasonable to include it to the main dashboard. That made the sitemap smaller and reduced the steps without affecting the overall experience. Later on, adjustments on grouping took place with the help of visual design principles. There have been changes in the size of the content especially when rules of accessibility were applied to the design.
The first idea behind the onboarding, was to add a question mark option in the main menu as a help. From the tests results it seemed more reasonable to add small popup messages that would inform the user about each feature. However, the final concept was inspired by the Human Interface Design by Apple. There, the information of the features is titled as ‘What’s New‘ and pops up right after the visitors sign in. The topics are being refreshed in every new sign in (think of how slack does it).
As a possible future action I suggest further development of features (Agile) mainly based on testing results. There are three major points that need to be iterated on and tested. Each one of them has its own reasons and hypotheses to be tested so let’s take a look at them separately.
A great experience that helped dig in the meaning and role of UX Design within the Agile process.
The research in the early stages was my favorite part but also the part that defines the flow of the whole design process.
Due to my Product Design background I had an idea about UX design but with the course I managed to get a better understanding of the process and get a feeling of when I can use every methodology.
One of the greatest values of such processes lies on the flexibility to look back and iterate without severe costs.
Let the ideas of your designs be expressed fast yet carefully tested.
As designers, we owe to define the notion of User Experience as it evolves through time. It is one of our greatest missions: to help our customers understand the responsibility and value behind every design decision taken ethically for other humans.
