3. Persona
2020 Designed by Ella
Maynooth Furniture
MAYNOOTH FURNITURE
“Furniture must have a personality
as well as
be beautiful.”
as well as
be beautiful.”
Project
Background
Background
Maynooth Furniture is a new business selling a ffordable high-end design furniture made in Ireland. My primary objective was to build an e-commerce website for people to browse & purchase furniture for home delivery.
Research, Design, Production and Delivery
ROLE
“MAYNOOTH FURNITURE” (website)
DATE
June 29 - July 15
PROJECT NAME
BUSINESS GOAL
UI/UX Designer
To design and prototype a website for “Maynooth”
in order to help the potential users to easily find information
about the product and buy it.
in order to help the potential users to easily find information
about the product and buy it.
CLIENT
Founder of “Maynooth Furniture”
Process
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 your audience, and what are their goals?
A: Our products address to all kinds of people who want to renovate their homes or want to refresh it.
Q: What does success look like for the project?
A: We’d like to make people more aware of our brand. We also would like to increase the average value of our orders.
Q: Which are the main elements/features you want for the website?
A: Our products address to all kinds of people who want to renovate their homes or want to refresh it.
Q: What does success look like for the project?
A: We’d like to make people more aware of our brand. We also would like to increase the average value of our orders.
Q: Which are the main elements/features you want for the website?
Q&A WITH THE CLIENT
This way, I found out that Maynooth Furniture needs a good looking and easy to use website where they can expose their products. It has to be good enough to stand out the competition.
2. Brief
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 website.
Design
For the brand, I wanted to create a refreshing and stylish UI that convey the desire of navigating through it.
Logo, Colors & Fonts
Wireframing Process
“Dashboard” and “Living Room” Pages
Access to the “Living Room” Page
Maynooth Furniture Category Page (e.g.:“Living Room”)
The animated galleries are frequently used in UI/UX Design, especially for e-commerce websites. I wanted to introduce that in Maynooth project, because is the best solution for an easy and interactive experience for users when they view the product images.
Reviews
Contact Us
Prototyping
After wireframing process was successfully completed, I started prototyping in Adobe XD. In this stage, I created the final animations too.
Reflections
It was the very first time for me working as a UI/UX Designer for this project. I was both excited and nervous (excited because I was doing something I love and nervous because I knew this was going to be a challenge). Despite my fear and nervousness, I knew this was the perfect opportunity for me to hone my design skills by making my way through the design process. At first, I enjoyed to create my mood board which was always on my hand during the entire process. This project gave me the opportunity to show what I’ve learnt about UI and UX design and time to practice design flows.
After the wireframing and prototyping was completed, I recorded a video to demonstrate the project vision and the navigating process to my client.
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
- Mobile App -
Roar Bikes
- Website -
Hover
Q: Is there any existing research data we can use?
A: I can tell you about our clients. Many of them are middle-age people whose children grew and just left the house. Therefore they want to make changes in their houses and adapt the furniture and home design to their needs.
Q: Tell me some websites that inspires you.
A: That may be “www.habitat.co.uk” and “www.made.com”.
A: I can tell you about our clients. Many of them are middle-age people whose children grew and just left the house. Therefore they want to make changes in their houses and adapt the furniture and home design to their needs.
Q: Tell me some websites that inspires you.
A: That may be “www.habitat.co.uk” and “www.made.com”.
A:
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.
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.
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 the target persona profile (Katherine, 50) to better empathise with my main user groups and prioritise goals according to their needs.
4. Create mood board(s)
The visual style is how the design should look, the colors I’ve used, the text and photography, all of these are 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.
When I created the logo, I already had the sketches from Maynooth team. What I did was to choose the colors for their logo, so I considered that yellow, turquoise and purple in a gradient version matched perfectly with the concept.
I decided the final colors for the website, starting from the Maynooth’s logo. Green (the colour of life, renewal, nature and energy) is associated with meanings of growth, harmony, freshness, safety, fertility and environment. For the fonts I chose “Source Sans Pro” and “Roboto”.
Once I decided the fonts and colors, I started designing the first wireframes in Adobe XD. I was looking for a fresh and coquettish visual style which may highlight the Maynooth products and raise their popularity.
I wanted that “Dashboard” and “Living Room” pages to look quite similar, but with a few specific details. While I was wireframing them, I paid attention especially to:
the aspect of headings
the integration of main categories in smart combination of collages
the mixture of geometrical shapes
the hover state marked by combination of darker colors and shadows
the integration of main categories in smart combination of collages
the mixture of geometrical shapes
the hover state marked by combination of darker colors and shadows
The access to the “Living Room” page can be made by clicking this section on “Homepage”/“Dashboard” or by menu (where the user has the possibility to go directly to one of the living room collections).
I set a hover marked by purple color for “Collections” section in order to emphasise each of them before they’re clicked and to create a better user experience.
Maynooth Furniture presents 3 categories of products: living room, bedroom, kitchen & dining. Each of them have the same design, so I chose to represent the first one. All living room collections include types of products which can be selected and, after that, a list of wares will appear. According to my client’s request, this page should include a “filter by” section and a “recently viewed” section, so I tried to integrate them both in a pleasant way for the viewer’s eye. Furthermore, there is an option that offer the user the possibility to add their favourite products to a Wishlist.
Product images
I wanted to present reviews in a good looking way, which also include customer’s profile picture, their number of stars and their experience with Maynooth products. As I couldn’t post all of them and load this section too much, I created the “view all” button.
“Contact Us” page was supposed to present information about what possibilities the customers have to contact Maynooth Furniture: online, go to the store or on phone. I framed these in 3 separate boxes and chose proper icons and images for each of them. This way, users can find all the information they’re searching for without scrolling. I also prototyped this page to appear overlay “Homepage” and I opted for a dark background filled with logo shadows.