Working in an early-stage startup was an extremely steep learning curve. My goal was to use all I’ve learnt about UI/UX Design in order to create a good interface for the app and
a great user experience. I was looking for a masculine design, but also with a cartoon streak. This is why I opted for clipart as icons.
Early stage product gave me more flexibility, but when I started wireframing, I begun to gel with the requirements. One by one, all steps were successfully fulfilled and the first part of the project was ready for delivery.
***The project is still in progress.***
After the wireframing and prototyping was completed, I recorded a video to demonstrate the project vision and the navigating process to my client.
a great user experience. I was looking for a masculine design, but also with a cartoon streak. This is why I opted for clipart as icons.
Early stage product gave me more flexibility, but when I started wireframing, I begun to gel with the requirements. One by one, all steps were successfully fulfilled and the first part of the project was ready for delivery.
***The project is still in progress.***
After the wireframing and prototyping was completed, I recorded a video to demonstrate the project vision and the navigating process to my client.
2020 Designed by Ella
Project
Background
Background
My Community is a reliable, professional handyman service performing top quality repairs, remodels, and more. If you’re looking for the best handyman service to help you out around the house, look no further than My Community.
Project
Background
Background
Research, Design, Production and Delivery
ROLE
“MY COMMUNITY” (mobile app)
DATE
September 10 - September 19
PROJECT NAME
BUSINESS GOAL
UI/UX Designer
People have got a never-ending list of odd jobs
that need doing around their home.
However, with the demands of work and family, it’s so hard
to find the time to tackle them all. This app is meant to offer
the best solution for their problems.
that need doing around their home.
However, with the demands of work and family, it’s so hard
to find the time to tackle them all. This app is meant to offer
the best solution for their problems.
CLIENT
Founder of “My Community”
Process
MY COMMUNITY
“Nothing is impossible with the right attitude
and a hammer.”
and a hammer.”
3. Persona
Research
1. Understanding the problem - Q&A with the client
2. Brief
3. Persona
4. Create mood board(s)
2. Brief
3. Persona
4. Create mood board(s)
Q: Who is our audience, and what are their goals?
A: We have two kinds of people in our minds: those who want to hire a handyman for different jobs around the house and those who wanted to be hired by potential customers in order to solve their problems. Our goal is satisfaction of our clients from all points of view.
Q: What does success look like for the project?
A: Knowing that our mobile app will be one of a kind in our country, we decided to provide the best for our users. If the app will be easy to access every time they need to, that will be a success for the project.
Q: Which are the main elements/features you want for the website?
A: I’ll attach you a pdf with what I have thinking about.
A: We have two kinds of people in our minds: those who want to hire a handyman for different jobs around the house and those who wanted to be hired by potential customers in order to solve their problems. Our goal is satisfaction of our clients from all points of view.
Q: What does success look like for the project?
A: Knowing that our mobile app will be one of a kind in our country, we decided to provide the best for our users. If the app will be easy to access every time they need to, that will be a success for the project.
Q: Which are the main elements/features you want for the website?
A: I’ll attach you a pdf with what I have thinking about.
Q&A WITH THE CLIENT
Those who use “My Community” mobile app, we’ll be connected with local handyman professionals who can take care of their work. In addition, to freeing up their time for the more important things in life, booking a handyman through the app will give them the security of knowing that things are being handled by an expert. Being the first app entirely dedicated to handyman services in Romania, My Community is ready to help both handymen (to get their jobs) and people who rather leave things to a professional.
2. Brief
4. Create mood board(s)
For this project I created 3 mood boards because I wanted to offer my client the opportunity to choose in which direction he thinks the project should go. Each of them presents similarities, but the small details of the design and colors are quite different.
In the end, we both agreed that the first one suits the best for their needs. It is clean, simple, but beautifully detailed and conveys that sense of security the users will be glad to deal with.
In the end, we both agreed that the first one suits the best for their needs. It is clean, simple, but beautifully detailed and conveys that sense of security the users will be glad to deal with.
Design
Wireframing Process
Reflections
Splash Screen
On Tap
“Product” Page
Prototyping
After wireframing process was successfully completed, I started prototyping in Adobe XD. In this stage, I created the final animations too.
Client’s
Feedback
Feedback
After I finished the wireframing and prototyping process, I tested the app together with my client, looking for his opinion. The first step was to save the project in Creative Cloud, in order to give up the USB cable. After that, I installed Adobe XD on the mobile phone and selected live preview. The animations and different transitions that I’ve used worked perfectly and my client was satisfied with the result.
Development
This was the first time for me to directly communicate with developers. I exported the code in Adobe XD for them using design specs and I also walk through and marked up the necessary assets.
More projects
Roar Bikes
- Website -
Maynooth Furniture
- Website -
My Community project
Q: Is there any existing research data we can use?
A: I will send you periodically the content provided by our team.
A: I will send you periodically the content provided by our team.
I keep in mind this scheme each time I’m starting a new project. From researching and sketching first wireframes to prototypes, I gradually created the entire version of the website/app.
At the discovery phase of my project, I collected some information from the client in order to get a better understanding of the problem. Also, I tried to find out which design suits the most for the project.
Based on the conversation that I had with my client, I started to complete the brief in order to provide him a vision of the project and to help myself to familiarise with it in an efficient manner.
Using the quantitative and qualitative data from interviews and survey results, I defined two target persona profile (Tim, 38 and Steve, 27) to better empathise with my main user groups and prioritise goals according to their needs. This way, I created personas for both categories of user: one for the handyman and one for the costumer.
A very important step for any of my design projects is setting the mood, because it helps me to get on the same page for the visual aspects of the project. So I try to do my best in collecting the images, fonts, interactions, features, icons, and UI elements to communicate the artistic direction of a project. Every mood board is focused on meeting user needs and problem-solving.
For the first time, I created the logo for “My Community”. I was looking for something to symbolise both the community and the handymen jobs, so I chose a lightly coloured house which convey feelings of security and coziness in your own home. Moreover, all the jobs presented by this mobile app take place around or inside the house.
I was the one who searched for the icons too. I wanted some clipart images, because they’re more expressive and can easily catch user’s eye.
I decided the final colors for the website according to the mood board. Blue is often associated with trust, loyalty, wisdom, confidence, intelligence, and imagination and it produces a calming effect. Blue is a masculine color, so a great option for this kind of project. When it’s used together with warm colors like yellow or red, blue can create high-impact, vibrant design, that’s way I used this palette.
I considered that the “Raleway” and “Roboto” fonts were the best alternative and they both look good together.
I was the one who searched for the icons too. I wanted some clipart images, because they’re more expressive and can easily catch user’s eye.
I decided the final colors for the website according to the mood board. Blue is often associated with trust, loyalty, wisdom, confidence, intelligence, and imagination and it produces a calming effect. Blue is a masculine color, so a great option for this kind of project. When it’s used together with warm colors like yellow or red, blue can create high-impact, vibrant design, that’s way I used this palette.
I considered that the “Raleway” and “Roboto” fonts were the best alternative and they both look good together.
Once I decided the fonts and colors, I started designing the first wireframes in Adobe XD according to my client requirements. Categories and subcategories are differentiated by different pages and different types of icons. In order to view all elements, there will be necessary to drag them so I added this option too by selecting the proper prototyping in Adobe XD.
When we’re talking about the splash screen we refer to a screen which is going to be visible for just a couple of seconds before it vanishing so it must have a great impact for the user. I wanted to design the scenario for this one in an elegant and efficient manner. As the splash screen sets the scene for the rest of the app, I intended to invite the users in My Community world and to get their attention.
I set different type of “on tap” marked by blue rectangle (gif 1) or shadows (gif 2) in order to emphasise the section when it’s tapped and to create a better user experience.
View Profile Images
I auto-animated the 3 profile images. This way, they will constantly change without user’s effort, along with the bullets which will colour in green.
1. Understanding the problem
My Community project
1
2
3