Company: Leading Courses is an international community-driven reviews and bookings platform in the golf industry that have gathered data of more than 25,000 golf clubs worldwide.
My role: Senior UX/UI Designer, experienced in applying 'design thinking' as a UX process.
In my role at Leading Courses I am responsible for the design of their native app (IOS & Android) and responsive web.
Process:
▪ Stakeholder interviews
▪ Value proposition mapping
▪ Concept sketching
▪ Individual in-depth interviews
▪ Competitive research
▪ Creating user personas
▪ Creating user stories
▪ Storyboarding
▪ Sketching
▪ Creating wireframes
▪ Creating prototypes
▪ Creating design specifications
▪ Creating design systems
Main projects:
▪ User testing of the ‘write a review flow’
▪ Optimisation of the ‘booking flow’
▪ Introducing a shopping cart to the ‘booking flow’
▪ Optimisation of the ‘login/create account flow’
▪ Social media features creation
▪ Optimisation of the ‘map view flow’
▪ Design development of a bucket list feature (lists creation)
▪ Design development of a social ‘buddies’ feature (social feature)
▪ Design of both ‘write a review’ and ‘upload a photo’ dashboards
▪ Integration of a weather and yearly temperatures features
▪ Design of banners, newsletter, social media templates and branding assets or marketing purposes
▪ Illustrations for automation emails and brand content
I’ve performed user testing for both the reviews and bookings flow, from where I’ve gathered user research insights that led me to better understand the user ‘pains’ through the flows and better design prototypes using UX design principles that helped improve the user experience and convince stakeholders of my design decisions.
Optimisation of the ‘booking flow’ by running two different flows (old booking flow) and a newly designed flow to A/B test and quantify which flow is more successful.
After A/B testing the ‘booking flow’, I’ve made slight changes to make it more user-friendly and designed a shopping cart feature that will facilitate the user into making several bookings at the same time.
To help our users to make a decision when to best make a golf booking, I’ve designed a weather feature positioned at the golf club details page and a 12 months temperature forecast prediction positioned in the region pages.
As the Senior Designer at Leading Courses I’ve also designed illustrations to be featured into automation emails, newsletter template, social media templates, banners and other marketing materials.
Client: Outlier
Brief: Design the branding and develop the UI design for Kaddabra's heat map that shows the current sales territory to its users
Process: I've worked alongside a Senior UX designer that designed the wireframes based on the research supplied by the client. We’ve worked together as a team and had weekly meetings with the client to show the progress, then we iterate the wireframes and design based on the client’s feedback. The project is now being built and we’ve been liaising with the developers.
Software: Figma, Illustrator, Photoshop
Timeline: 30 days
Client: Outlier
Brief: Define the UI for the client’s website
Process: Visual competitive analysis, Moodboard, Colour palette, Typography, Navigation system
Software: Illustrator, Photoshop
Timeline: 30 days
Outlier is a Data Science small consultancy that contacted me to come up with a look and feel that illustrates their one-to-one bespoke approach to business. They had defined prior to contacting me the Sitemap and User Flow for the product, and I was assigned to develop the UI. I suggested a bold and friendly typography style, a colour palette divided between functional colours, accent colours and complementary pastels. They are very human-focused and like to work closely to their clients, so I suggested the usage of illustrations to help clarify complex expressions. This project is now live and can be seen here
GIVE A DAMN - EDITORIAL DESKTOP PROJECT
Brief: For the 4th week of the Ironhack course I was challenged to come up with an Editorial digital magazine
Process:
• Research: Persona, Visual identity competitive analysis
• Ideate: Moodboard, Brand identity, Style guide
• Prototype: Lo-fi & Hi-fi wireframes, Responsive design, Animations
Software: Figma, Illustrator, Photoshop
Timeline: 4 days design sprint
The focus of this project was to train our UI skills, so we were given a persona to work as our main target focus.
Research
I’ve picked ‘Elaine, a 35 years-old Eco-Friendly researcher’ who enjoys to read magazines such as National Geographic, The Broadly section from Vice and New York Times Magazine.
I’ve started by writting my How Might We’s, to help me start defining the content of my project tailored to my persona needs.
So my main ‘HMW’ would be:’To create an online Editorial publication that shares sustainable current subjects regarding every life facets without having a ‘tree-hugger-aesthetics’.
After this I’ve done a website competitive analysis of the main magazines that Elaine reads, plus extra ones that would fit the profile and would be considered competitors of my publication.
My next step was to do a Visual Competitors Analysis to have an idea of the look & feel of the magazines that are my competitors to make sure I’d come up with a solution that offers a Unique Selling Point.
Ideation
Straightt after, I’ve looked for inspiration for my project and started building my modboard, trying to compose an approximate idea of how the colours, photography, iconographic language, grid and other UI elements should look.
In summary, the competitors all have a very clean look and a super simple grid system.
To help me pinpoint better my user, I’ve built a customer journey for Elaine and in a sentence she wants to be able to read and save articles for later, so she can start building up a library of articles that she can share with other people.
Design
After this process I’ve started to focus on a name for my magazine, thought of a tagline that helps me once again to explain further about the user and on the idea of how the logo should look.
From the moodboard I’ve started sketching low-fi wireframes and after that I jumped into mid-fi wireframes.
I’ve done a layout grid with 4 columns, 16 gutter taking inspiration n the way the pinning platform Pinterest works.
When I was happy with the grid and layout, I started composing the Style guides in high-fi UI so I could start composing my hi-fi wireframes for the final prototype.
I’ve also tested the layout on mobile.
Outcome
Doing a Visual Competitive Analysis gave me inspiration of what to do and also of what not to do on my project in terms of visual styling. Also, it pays off to use components and start defining a style guide from an early stage, even if you feel you need to make changes to it, because then all you need to change is one single element.
HANDL - WELLNESS APP PROJECT
Brief: For the 5th week of the Ironhack course I was challenged to come up with a wellness app
Process:
• Research: Survey, interviews, Persona, User Journey, Affinity Map, Moscow Feature Prioritization, Visual identity competitive analysis
• Ideate: Sitemap, User Flow, Moodboard, Brand identity, Style guide
• Prototype: Lo-fi & Hi-fi wireframes, Responsive design, Animations
Software: Figma, Illustrator, Photoshop
Timeline: 9 days design sprint
Handl is an app that helps to ease anxiety symptoms offering the user a custom library of science-based articles, podcasts, relaxing games, a goals tracking system to boost self-confidence and access to a community of like-minded people.
Research
I’ve started the project by doing a survey and collecting every bit of information that I could to find about how people deal with anxiety disorders and found out that everyone suffers or has felt some level of anxiety in their lives. Through user interviews, I’ve confirmed that men and women have different ways to express it.
My research led me to my problem statement: Men need to find a way to embrace their vulnerability in asking for help in order to heal their anxiety disorders.
Ideation
I then worked on doing an Affinity Map to help me cluster the information that I’ve gathered in the quantitative and qualitative research in one board, so it would help me create my user persona lifestyle profile and goals.
Joe Goddard is a 32 years old, financial analyst, who would like to learn mechanisms that would help him to control his anxiety better, to feel healthier and manage his time better - he summarises the research findings in one person.
After creating Joe, I’ve traced his emotional trajectory (User Journey) while using the current apps in the market that offer anxiety-relief methodologies and this helped me target the opportunities and touch-points to create my unique selling point.
The next step taken was to do market research on the features and look & feel of existing apps that offer help with anxiety. This helped me to get inspiration for what to include and not to include in my design iterations. By using the Moscow method I was able to define an hierarchy of the features that I wanted to include on my app wireframes before jumping on defining the sitemap and sketching my mid-fi’s.
The next natural step for me was to start sketching the wireframes flow and defining what should be the user journey. After getting my first iterations, I’ve tested it with a couple users to see if the flow made sense and jumped again on the drawing board, by changing it according to the user feedback that I’ve received. I’ve repeat this process a couple times before feeling that it was time to jump on the hi-fi’s.
Design
For the naming and branding of my project I wanted it to be a simple word that would translate into a ‘helpful, friendly hand from a friend you could trust and confide’. Handl seemed perfectly appropriate and, to help explain better the message I’ve illustrated a man with a ‘burden cloud’ above his head’, using a color palette that is widely associated with feelings of anxiety. For the logo I’ve used the typeface Frontage and designed it with wide space between the letters to convey the idea of ‘breathing space’. The color palette is simple and focused on a single color with different tones.
After designing the logo and selected the color palette I started designing my Hi-Fi wireframes and, at the same time, the atomic style guide. Through this process I did A/B testing to see how the look & feel of the app was regarded and made minor changes on the final prototype.
Part of the assignment was also to iterate on a desktop and android version of my application. I’ve followed the Material design principles to come up with the android version, but kept all the same color, font and style guide principles in both android and desktop versions.
Outcome
Following the UX design process led me to a product that fit my target goals expectations and thanks to usability testing and feedback I’ve made changes, added additional features and improvements to my application.
In the video demo below you can see the final outcome!
WORK BUDDIES - BUSINESS APP PROJECT
Brief: For the 7th week of the Ironhack course I was challenged to come up with an app of my choice.
Process:
• Research: Survey, interviews, Persona, User Journey, Affinity Map, Moscow Feature Prioritization, Visual identity competitive analysis
• Ideate: Sitemap, User Flow, Moodboard, Brand identity, Style guide
• Prototype: Lo-fi & Hi-fi wireframes, Responsive design, Animations
Software: Figma, Illustrator, Photoshop
Timeline: 9 days design sprint
Work Buddies is an app aimed at people who want to find someone to either start a business with, to collaborate with, or share/swap skills with.
Research
I’ve started the project by doing a survey and collecting every bit of information that I could to find more about how people feel about using an app to meet people with professional intentions. Through user interviews, I’ve confirmed that people are keen to use and app to meet potential business partners, but need to understand the other person’s core values and to be able to see an in-depth professional profile.
My research led me to my problem statement: Users find it hard to understand if someone would be a good match to start a business with based solely on their current profiles.
Ideation
I then worked on doing an Affinity Map to help me cluster the information that I’ve gathered in the quantitative and qualitative research in one board, so it would help me create my user personas lifestyle profile and goals.
Filipa Drewry is my primary persona and she has over 10 years experience working for top fashion houses and has great business ideas, but is too afraid to venture on a business on her own because she feels that she’s great on the creative side, but lacks knowledge in the general management side of a business. She would like to meet someone with relevant professional experience that could mentor and even invest on her project.
On the other side, we have Ivan Groberz, our secondary persona, that works as a Senior Analyst in Corporate Finance and would like to invest in the creative industry, but most of his social connections don’t work in the creative industry, so it’s hard to get referrals from his social circle.
After creating my personas, I’ve traced their emotional trajectory (User Journey) while using the current apps in the market that offer meet up professional services and this helped me target the opportunities and touch-points to create my unique selling point.
The next step taken was to do market research on the features and look & feel of existing apps that offer showcase professional users matches . This helped me to get inspiration for what to include and not to include in my design iterations. By using the Moscow method I was able to define an hierarchy of the features that I wanted to include on my app wireframes before jumping on defining the sitemap and sketching my mid-fi’s.
Design
For the naming and branding of my project I wanted it to be friendly and colourful and also representative of different skillsets from the sea of different professionals. I’ve used geometric shapes to illustrate the different skills of the professionals and two main colors for the brand, on one spectrum we have an orange to express creativity and the blue, widely associated with the corporate world - my mixing this two colors I’ve achieved the “fun but professional” look & feel I wanted to achieve.
After designing the logo and selected the color palette I started designing my Hi-Fi wireframes and, at the same time, the atomic style guide. Through this process I did A/B testing to see how the look & feel of the app was regarded and made minor changes on the final prototype.
Outcome
Following the UX design process led me to a product that fit my target goals expectations and thanks to usability testing and feedback I’ve made changes, added additional features and improvements to my application.
In the video demo below you can see the final outcome!
