Scopes & Constraints:
This project requires that I utilise the machine learning within the designs, providing a personalised experience for any users based on their interests.
My designs were limited to the pre-established design frameworks such as brand colour and visual identity. This was created by the team before my arrival on the team.
Roles & Responsibilities:
I was part of the UI design team, and I was required to take the already established wireframes and create the onboarding experience as well as design a brand new 'my feed' and 'profile' page.
I was required to use the competitor research and market evaluation done by the team beforehand to make sure that my designs would appeal to the target audience.
Users & Target Audience:
Users aged 21-50 that live in large urban areas within the U.S. People who want to tackle the alienation of urban culture and meet people with similar interests.
Problem:
Take the wireframes from the web design and create an app experience that mirrors the pre-established brand guides.
Overview:
The brief was to design the onboarding experience for an event matchmaking application that uses machine learning to personalise the user experience.
Process:
As at the UI designer, I will utliise the research provided by the team to create my solution:
Benchmarking
Moodboard
User Personas
Site Map
Sketching Ideas
Lo-Fi Wireframes
Style Guide
Design and Iterate
Clickable prototype
Sketch Ideas:
To help the ideation process, I began with sketching multiple iterations of each screen, allowing me to consider the flow of the onboarding. Here, I was not bogged down by design thinking, and able to explore layout through multiple ideations.
Lessons Learned:
I learned a good deal about the overall UX Process, what parts there are to play before the design phase can even happen. This project also allowed me to understand the subtle differences in the UX role, and that there can be specialist parts to a UX/UI Designer.
Moodboard:
Site Map:
The site map provided by the team organises the IA and gives us a base from which to begin our user flow journey.
Wireframes :
After sketching, I created Lo-Fidelity wireframes to help realise my ideas. This phase helps with general placement of elements whilst allowing me to consider user flow without being tied down to brand design and colour.
Style Guide
The style guide, with pre-existing elements from the team, provided a set of principles for me to adhere to. Namely the colour palette and the photographic style. From there I included typography, icons and some small components to help round out the offering
Benchmarking:
With the marketing team having done some competitor research, the team took this information and conducted research into the elements that make our competitors successful.
User Persona:
User personas were created to help drive our thinking, giving us an insight into a ‘typical user’ and how they could possibly behave and think when using the app.
Heat Map Analysis:
In an effort to improve my design ability, I used an AI tool that generates heat maps over screens. This allowed me to discover any weak points in my designs.
From here, I am able to iterate and adapt my designs to improve their engagement capacity, ensuring that attention is drawn to the areas that matter, and in the correct order.
User Flow Diagram:
The next step was to create a typical user flow of the onboarding process. Taking the competitor research and my targets for this, I mapped out what the expected flow would be.
Onboarding:
My Feed:
Profile:
Design & Iteration:
With the onboarding screens, I aimed to create a simple process similar to Meetup’s whilst including the machine learning element with the chance to customise your home screen from the off. Each screen in the onboarding process is designed to help this process through tappable buttons, easy to use search elements and intuitive map that makes location settings easy to manage (the chance to skip included to allow the user full control).
Overview:
The brief was to design the onboarding experience for an event matchmaking application that uses machine learning to personalise the user experience.
Overview:
The brief was to design the onboarding experience for an event matchmaking application that uses machine learning to personalise the user experience.
Problem:
Take the wireframes from the web design and create an app experience that mirrors the pre-established brand guides.
Problem:
Take the wireframes from the web design and create an app experience that mirrors the pre-established brand guides.
Users & Target Audience:
Users aged 21-50 that live in large urban areas within the U.S. People who want to tackle the alienation of urban culture and meet people with similar interests.
Users & Target Audience:
Users aged 21-50 that live in large urban areas within the U.S. People who want to tackle the alienation of urban culture and meet people with similar interests.
Roles & Responsibilities:
I was part of the UI design team, and I was required to take the already established wireframes and create the onboarding experience as well as design a brand new 'my feed' and 'profile' page.
I was required to use the competitor research and market evaluation done by the team beforehand to make sure that my designs would appeal to the target audience.
Roles & Responsibilities:
I was part of the UI design team, and I was required to take the already established wireframes and create the onboarding experience as well as design a brand new 'my feed' and 'profile' page.
I was required to use the competitor research and market evaluation done by the team beforehand to make sure that my designs would appeal to the target audience.
Scope & Constraints:
This project requires that I utilise the machine learning within the designs, providing a personalised experience for any users based on their interests.
My designs were limited to the pre-established design frameworks such as brand colour and visual identity. This was created by the team before my arrival on the team.
Scope & Constraints:
This project requires that I utilise the machine learning within the designs, providing a personalised experience for any users based on their interests.
My designs were limited to the pre-established design frameworks such as brand colour and visual identity. This was created by the team before my arrival on the team.
Process:
As the UI designer, I will utilise the research provided by the team to create my solution:
Benchmarking
Moodboard
User Personas
Site Map
Sketching ideas
Lo-Fi Wireframes
Style Guide
Design and Iterate
Clickable Prototype
e
Process:
As the UI designer, I will utilise the research provided by the team to create my solution:
Benchmarking
Moodboard
User Personas
Site Map
Sketching ideas
Lo-Fi Wireframes
Style Guide
Design and Iterate
Clickable Prototype
Benchmarking:
With the marketing team having done some competitor research, the team took this information and conducted research into the elements that make our competitors successful.
Benchmarking:
With the marketing team having done some competitor research, the team took this information and conducted research into the elements that make our competitors successful.
Moodboard:
Moodboard:
User Persona:
User personas were created to help drive our thinking, giving us an insight into a ‘typical user’ and how they could possibly behave and think when using the app.
User Persona:
User personas were created to help drive our thinking, giving us an insight into a ‘typical user’ and how they could possibly behave and think when using the app.
Site Map:
The site map provided by the team organises the IA and gives us a base from which to begin our user flow journey.
Site Map:
The site map provided by the team organises the IA and gives us a base from which to begin our user flow journey.
User Flow Diagram:
The next step was to create a typical user flow of the onboarding process. Taking the competitor research and my targets for this, I mapped out what the expected flow would be.
User Flow Diagram:
The next step was to create a typical user flow of the onboarding process. Taking the competitor research and my targets for this, I mapped out what the expected flow would be.
Sketch Ideas:
To help the ideation process, I began with sketching multiple iterations of each screen, allowing me to consider the flow of the onboarding. Here, I was not bogged down by design thinking, and able to explore layout through multiple ideations.
Sketch Ideas:
To help the ideation process, I began with sketching multiple iterations of each screen, allowing me to consider the flow of the onboarding. Here, I was not bogged down by design thinking, and able to explore layout through multiple ideations.
Wireframes:
After sketching, I created Lo-Fidelity wireframes to help realise my ideas. This phase helps with general placement of elements whilst allowing me to consider user flow without being tied down to brand design and colour.
Wireframes:
After sketching, I created Lo-Fidelity wireframes to help realise my ideas. This phase helps with general placement of elements whilst allowing me to consider user flow without being tied down to brand design and colour.
Style Guide:
The style guide, with pre-existing elements from the team, provided a set of principles for me to adhere to. Namely the colour palette and the photographic style. From there I included typography, icons and some small components to help round out the offering
Style Guide:
The style guide, with pre-existing elements from the team, provided a set of principles for me to adhere to. Namely the colour palette and the photographic style. From there I included typography, icons and some small components to help round out the offering
Design & Iteration:
With the onboarding screens, I aimed to create a simple process similar to Meetup’s whilst including the machine learning element with the chance to customise your home screen from the off. Each screen in the onboarding process is designed to help this process through tappable buttons, easy to use search elements and intuitive map that makes location settings easy to manage (the chance to skip included to allow the user full control).
Design & Iteration:
With the onboarding screens, I aimed to create a simple process similar to Meetup’s whilst including the machine learning element with the chance to customise your home screen from the off. Each screen in the onboarding process is designed to help this process through tappable buttons, easy to use search elements and intuitive map that makes location settings easy to manage (the chance to skip included to allow the user full control).
Onboarding:
Onboarding:
My Feed:
My Feed:
Profile:
Profile:
Heat Map Analysis:
In an effort to improve my design ability, I used an AI tool that generates heat maps over screens. This allowed me to discover any weak points in my designs.
From here, I am able to iterate and adapt my designs to improve their engagement capacity, ensuring that attention is drawn to the areas that matter, and in the correct order.
Heat Map Analysis:
In an effort to improve my design ability, I used an AI tool that generates heat maps over screens. This allowed me to discover any weak points in my designs.
From here, I am able to iterate and adapt my designs to improve their engagement capacity, ensuring that attention is drawn to the areas that matter, and in the correct order.
Lessons Learned:
I learned more about the specific duties of a UI designer, how teamwork can go a long way to helping the process. I also learned to use any and all tools at my disposal, including AI to help improve my designs.
Lessons Learned:
I learned more about the specific duties of a UI designer, how teamwork can go a long way to helping the process. I also learned to use any and all tools at my disposal, including AI to help improve my designs.
Back to UI/UX Design
All rights reserved. Designs by LBK Draws.