2020 Designed by Ella
Project
Background
Background
Project
Background
Background
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.
ROLE
“MAYNOOTH FURNITURE” (mobile app)
DATE
July 20 - August 7
PROJECT NAME
BUSINESS GOAL
UI/UX Designer
To design and prototype a mobile app for “Maynooth”
built around the website visual details in order to help
clients to have a better accessibility of the products.
built around the website visual details in order to help
clients to have a better accessibility of the products.
CLIENT
Founder of “Maynooth Furniture”
Process
MAYNOOTH FURNITURE
“Furniture must have a personality
as well as
be beautiful.”
as well as
be beautiful.”
Maynooth Furniture is a new business selling a ffordable high-end design furniture made in Ireland. Based on Maynooth website concept that I designed before, I had to create and prototype an app for a better accessibility of the shop.
The mobile app project have the same type of persona as the website. So here is Katherine, a persona who’s meant to empathise with the main user groups and prioritise goals according to their needs.
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: What does success look like for the project?
A: I want the app to be a plus for our business. Both app and website should be meant to make people more aware of our brand. We also would like to increase the average value of our orders.
Q: How does the app should look like?
A: It should look as similar as possible to the website.
Q: Which are the main elements/features you want for the mobile app?
A: I want them to be the same as those I sent you for the website.
A: I want the app to be a plus for our business. Both app and website should be meant to make people more aware of our brand. We also would like to increase the average value of our orders.
Q: How does the app should look like?
A: It should look as similar as possible to the website.
Q: Which are the main elements/features you want for the mobile app?
A: I want them to be the same as those I sent you for the website.
Q&A WITH THE CLIENT
All this information helped me to figure out what the problem was and fix it. A mobile app is easier to use, because people can use their phones to access the Maynooth app rather than using a computer. This way, they can view products and place an order anytime and the “Maynooth Furniture” will increase their popularity among clients.
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.
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.
Highlight the emotion of beauty & comfort in the mood board for Maynooth Furniture was my main purpose in creating something to guide me through the wireframing process. These emotions are what people should feel while they’re navigating through the app.
The visual style is how the design should look, the colors I’ve used, the text and photography, all of these meant to catch the viewer’s eye. The quotes, sentences and key words express the concepts of modern, clean, bright and beautiful. A collection of images define the style I want to achieve.
The visual style is how the design should look, the colors I’ve used, the text and photography, all of these meant to catch the viewer’s eye. The quotes, sentences and key words express the concepts of modern, clean, bright and beautiful. A collection of images define the style I want to achieve.
Design
After a conversation with my client, we both agree that the mobile app should follow the same design pattern as the website. I used the same colors and fonts (with adapted sizes).
The wireframing process of Maynooth Furniture app was pretty easy because I already had my mood board and researches done, so all I had to do was to fallow the same path as for the website. However, to adjust all the elements and to see what kind of fonts sizes are properly and suits most is not that easy. Moreover, I had to do my homework about the best practices for mobile design. I also added new elements, like the three circles on top filled with different green hue.
I received a positive feedback for the splash screen animation. When I created it, I was thinking to represent the logo in the dynamic and attractive way and to create a better experience for the user.
I adapted the UI Design according to mobile principles, so I reordered the elements and changed their size in a bigger one. In order to view all products or reviews, there will be necessary to drag them so I added this option too by selecting the proper prototyping in Adobe XD.
Because Maynooth design emphasis shapes, I chose 2 circles to frame the “Sing Up” and “Login” buttons and I animated them. Thus, the user can switch these two very easily.
Depend where he is (“sing up” or “login”) the circle will get bigger and the other one will get smaller and the specific sections for each of them will change. I also chose 2 different colors, green and purple, because I wanted to separate them better. These colors are reflected in their specific sections too (e.g.: when the user want to complete the “e-mail adress” section from “sing up”, the frame will fill with a subtle green gradient and will also change it’s border in the same color).
Depend where he is (“sing up” or “login”) the circle will get bigger and the other one will get smaller and the specific sections for each of them will change. I also chose 2 different colors, green and purple, because I wanted to separate them better. These colors are reflected in their specific sections too (e.g.: when the user want to complete the “e-mail adress” section from “sing up”, the frame will fill with a subtle green gradient and will also change it’s border in the same color).
The “Product” page look quite similar with the website one, but follows the mobile design pattern. As the circle is the key shape for Maynooth mobile app project, it also appears behind the main image of the product and has the same colour as the product presented in the previous artboard (green or purple). I moved the product images under the main one, but I kept the same animation for visualising them.
This time, the “Filter By” section is a separate page which will appear in a slide up transition after select it.
I wanted a popup menu for this project in order to create shortcuts to the pages. However, they are typically used for that.
Prototyping
After wireframing process was successfully completed, I started prototyping in Adobe XD. In this stage, I created the final animations too.
Reflections
With my mood board on hand and researches done from the previous project (Maynooth Furniture website), I started the wireframing process which proved to be quite challenging. I had to integrate the website design into a mobile app, adjust all the elements, create a new ones, establish font sizes etc. Even if the two projects look similar, there are a lot of details and animations that differentiates them, such as splash screen and login page.
All this process helped me to familiarise with the best practices for mobile design and give me the possibility to gain a holistic view of a mobile application in terms of end-to-end experience and product strategies.
After the wireframing and prototyping was completed, I recorded a video to demonstrate the project vision and the navigating process to my client.
All this process helped me to familiarise with the best practices for mobile design and give me the possibility to gain a holistic view of a mobile application in terms of end-to-end experience and product strategies.
After the wireframing and prototyping was completed, I recorded a video to demonstrate the project vision and the navigating process to my client.
More projects
Maynooth Furniture
- Website -
Roar Bikes
- Website -
1. Understanding the problem
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.
Research, Design, Production and Delivery
2. Brief
3. Persona
4. Create mood board(s)
Logo, Colors & Fonts
Wireframing Process
Splash Screen
Sing Up/Login
“Product” Page
View Product Images
Filter By