UX/UI Design
CASE STUDY
OVERVIEW AND CHALLENGE
Provide beautifully displayed and easy to understand wind, wave and weather reports, forecasts and statistics for surfers and any other water sport aficionado. Building a community through visual and interactive elements which are useful to the users and keep them engaged.
PROBLEM STATEMENT
Our user wants to be able to find weather information specific and relevant to their water sport. They would like to get this information and decide before travelling to the location and also have access to further information when they arrive. They want the information displayed in a way that is quick to read and easy to understand. It is important to clearly find out about any potential dangers the weather can create before they partake in their sport. They wish to interact with the App and find other relevant information about their chosen destination.
THE PROCESS
I attended a full time course with Career Foundry, I was tasked with creating an App which answered the brief set out above. By following the Phases in the diagram below I followed the creative process from Research to Testing and ultimately to hand off to a developer. I will run through the whole process to showcase my approach and eventual delivery of the product.
TOOLS
Figma, InVision, Adobe Creative Suite, Pen and Paper
DURATION
April – September 2020, 6 months
ROLE
Researcher, UX and UI Designer
RESEARCH
COMPETITIVE ANALYSIS
I researched and found several competitor Apps and websites, one being a very popular one between surfers – Magic Seaweed. From these studies I analysed what was good, bad, what worked well and what did not and used them as considerations for my App.
INTERVIEWS AND USER SURVEYS
By conducting Interviews and Surveys I set out specific questions to investigate what would users would find useful in the App, what additional features could get added and potentially what could be left out of the structure. I wanted to keep users engaged so this was a big factor in finding this out at this stage. Some of the answers were quite surprising; especially when you feel you have already worked out what should and should not be included in the App !!
USER RESEARCH AND ANALYSIS
The next stage was to further understand the user and to find out how to engage them with the product. I researched the needs of the users, their behaviours, needs and frustrations. By grouping these together through Affinity Mapping I was able to form Insights & Solutions to better understand what the App would be used for
PERSONAS AND USER JOURNEYS
From the research and feedback I had already gathered I created Personas of people from different backgrounds, all with different needs. I needed to understand each Persona. This enabled me to map out some scenarios that would be required from the App and work out goals in the form of User Journeys.
TASK ANALYSIS AND USER FLOWS
Moving forward from the previous exercise, I was able to clearly define the needs of each Persona through Task Analysis. From here I developed User Flows for each task. These flows helped to organise the navigation within the App and ultimately start to shape and finalise the sitemap.
NAVIGATION
I was now in a position to start creating Low-fidelity wireframes to investigate the navigation and UI design of the App. Before doing so I completed a Card Sorting exercise.
I created a set of 15 questions all relating to the content of the App – according to the current sitemap and asked the users to group them as they saw appropriate and to name each group how they would expect to find the specific area within the App.
LOW AND MID-FIDELITY WIREFRAMES
Initially using pencil and paper I was able to start fleshing out the App design. This was a quick and cost effective method and could be updated easily. By creating prototypes I was able to iterate the user needs I had already researched and work out these journeys visually – ensuring they ran smoothly and were easy to accomplish.
HIGH FIDELITY PROTOTYPE
Once satisfied that the App’s content flowed correctly and the navigation was working right it was time to build the High Fidelity Prototype.
USABILITY TESTING
By conducting further Usability Testing I was able to refine my design. I investigated Test Methods, created a Test Script and Plan, applied A/B Preference Testing and reported my findings using an Affinity Map and Rainbow Spreadsheet.
DESIGN SYSTEM
To guide the development process I ensured that my ‘Figma’ file was set up correctly with elements being named in an clear way, measurements were accurate and consistency with elements such as headings, body text, colours and buttons etc were the same throughout the App. To this end I produced a Design Language document to guide the Developer through the implementation of the design. This highlighted logo use, colours, UI elements, Grid system as well as how to display fonts and language.
FINAL THOUGHTS
By working through the process of developing a product from start to finish has been enlightening, challenging and fulfilling. I have used many tools, investigated many techniques and ultimately learnt a lot.
I have looked at the Ethics of design and Emotional Design, where the aim is to engage the user – obviously in an ethical way.
UX Design can be applied to so many things and by breaking down processes and working on them piece by piece we can all surely create great things.