Time Frame
January 2021- September 2021
Project Type
Hypothetical Mobile Application
Team
Myself
My Role
-UX Designer
-User Researcher
-UI Designer
Objective of Application
To provide seamless, intuitive designs that display surf and weather reports for surfers and water connoisseurs around the world.
Case Study- Swello
Design Process
Research
-Background research
-User Stories
-Surveys and interviews
-Competitor Analysis
Ideate
-User Personas
-Mental models
-User journeys
-Task Analysis
-User Flows
-Card Sorting
-Sketches
Create
-Low, Mid, High Fidelity
-Wireframes
Prototyping
Test
-Usability Tests
-A/B Preference Testing
-Peer Feedback
​
​
Finalize
-Grids and Spacing
-Design for Accessibility
-Make necessary changes
Present
-Design Documentation
Homepage Low-Mid-High Fidelity Progression
Location Display Low-Mid-High Fidelity Progression
Testing and Finalizing Designs
​
User testing- I created a test script and chose five people to participate in user testing. I chose a broad group of people to ensure diversity in my tests. Some of them were surfers, some of them were tech savvy and some were not. I received plenty of useful feedback that led me to make the changes that you see above. More details on what I changed and why are in the link provided.
​
A/B Preference Testing- After the user testing I made changes that were necessary. I still ran into tough design decisions and needed more feedback from users. I conduced A/B preference testing to help me to decide what screen was the better option for this application.
​
Grids and IOS Native Platforms- I learned about the importance of grids and I wanted to design my app in the iOS platform, so I made the necessary changes that were needed, and it made a huge difference in my designs.
​
Peer Feedback- Once I had the majority of my designs finalized I wanted more feedback, and shared my prototype with other students attending the bootcamp. Some of the peer feedback I did not think was necessary to change, and others were very helpful and I decided to make more iterations.
​
​
Final Designs
Click here for the Figma prototype link
What I Learned
​
This was my first design project that I worked on from end-to-end, and I learned so much.
I learned how important it is to sketch and create low fidelity prototypes. I also learned the importance of making design decisions that are backed up with user data, because I can never assume anything. Even if I think something looks great, it may not function properly on the user end.
​
If I could change anything I would want to do more interactions and spend more time on the UI portion of the app. I am happy with how this application turned out, and thankful for the learning experience.
Problem Statement
​
Surfers need a way to read and understand the predicted weather conditions because they want to feel safe and prepared before heading out on the water. We will know this to be true when the users can successfully check the surf report and plan accordingly.
​
​
Project Goals
​
Goal 1- Help users feel prepared and safe before they go in the water
​
Goal 2- Display all of the necessary weather information that users need
​
Goal 3- Display the conditions in a way that is simple and easy to understand
​
Goal 4- Give users access to live swell maps
​
​
Research and Ideation
​
Competitive analysis- I conducted a competitive analysis with Surfline and Magicseaweed. This was extremely helpful to understand the competition and get a better understanding as to what was already available to users. I found strengths and weaknesses throughout my insights, that helped me gain an idea of what I wanted to create in my own designs.
​
User Interviews and Results- I conducted user interviews with surfers to gain more knowledge as to what users are looking for while they view surf and weather conditions. I interviewed a total of three people and it helped me to create my user stories and personas.
​
Card Sorting- Once I was able to pin point the basic functions of the application, I conducted a card sorting exercise to help me figure out how users would naturally navigate the application. This helped me to make iterations to my user flows and come up with a more structured sitemap.
​
​
Application Goals
​
Goal 1- Create a search engine to find surf locations
​
Goal 2- Create a way to add favorites and display favorites
​
Goal 3- Create a way to explore a map feature
​
Goal 4- Create an effective and efficient way to display surf conditions
​
​
Sketch and Create
​
I began creating low fidelity prototypes which helped to brainstorm different ideas and solutions for the design problems. I was able to sketch different pages and come up with a rough idea as to what I wanted the app to look like. From there, I created mid fidelity prototypes and tested those in order to create the final high fidelity prototypes.