UXUI
WEBSITE REVIEW by Santi Molina
Findel Education Resources
Some previous considerations. Along these pages, I’m going to try to explain how is my creative process. I think it’s important to know how I face a creative project and speaking about digital, how is my UX Design process, and some of the UI process in the early stages. When you face a new creative project for a client, a catalogue, a new product, a new website, a website review, a new packaging, an app for mobile, a new video, a web app, a digital application for game... Whatever the project will be, the initial stages of the creative process are always the same, always. In all my career I’ve been working in many different creative projects, print, digital, audiovisual, web, interior design.... And always the first stages are similar. So, what is that? It’s all about to know who is your client, which are their goals, which are their products, which are their values and finally and very important, who are their clients. All this initial researching is common in all the creative process and if you don’t spend enough time to do that, you are in a big risk to fail in your final creation or maybe you can complete something that it’s miles away from your client expectations. So, knowledge is everything. These stages take time and need a lot of human resources. Regarding UX/UI Design, I have to involve in this process to the client, to my design and develop team and to my marketing team too. With a good coordination in this initial stage and the add of the ideas of everyone, we will be more prepared to face the rest of the stages of the creative process, it will be easier to make them and the chances to be successful at the end, will be bigger.
3
Great UX is easy understanding and easy to do.
UX Design stages. I try to follow the next guide to complete a good UX Design. The most common stages for a good UX Design are:
1. Company/Brand Attributes (Culture, Voice, Values...).
So, knowing that I don’t have enough time to make a good UX initial stages, I’ll try to make a good approach reflecting what I’m thinking about the review of the Findel Education website.
2. Users of the brand (Who are they and what do they need).
As a first thought, we can’t say that you can go through UI Design without go before to UX Design. Behind a good UI Design there is always a good UX Design.
3. Goals to user’s improvements These three are the Core of the Brand. 4. First Basic Sketch.
Well, for me UX Design has been in the products from the beginning of the days. Any product you are thinking to create, you have to think first in the user, who is this? what are his needs, his goals and what do he need to reach those goals? The best example for that is the Braun products, created in the decade of 50’s, beautiful designed but very well thought-out for the users. You can see very quick how these products work and the path to make them work and useful is easy too. That’s the meaning of their success.
5. Site Audit (Sections old site, competitors, new sections...) 6. Review user needs, maybe you need create user stories. 7. Site map. 8. Wire framing.
A great UX design is something easy to understand and easy to do for the users. And that happens in Digital, Print, Audiovisual, etc.... We have to make our user‘s path easy to make him reach his goals. Then, you’ll have a very loyal user and most importantly, he will come back to you. And if we make that, if we get the user come back to us, we will win the Oscar.
And like I said previously I have to involve in these stages, first of all to the client and then to my team of developers, marketing and designers. All the Core Brand stages, the first three points, they have to be work together with the client also the point 5 and 6. After that, I have to review all the documentation with the team and go through the rest of the points.
4
5
1. Findel Company/ Brand attributes.
3. Goals to user’s improvements.
I have to complete this stage together with the company. I don’t have the chance to make it so let’s pretending that I know the attributes of the brand. I already know how they want to express in the new website, how they want to feel and look the new website.
This is basically, what do you change in the current website to make the user experience better? Like I said, I should work this with the company and then with the creative team. Looking to the current website, there are some basic points to change:
The product is stationery and site services to curriculum and special educational needs resources. Findel is creating these products for over 180 years, their oldest brand dates back to 1817.
2. Users of Findel. Looking the description of the company on their current website, the main users of Findel are: •
Schools.
•
Colleges.
•
Academies.
•
Nurseries.
It’s a B2B e-commerce site with a more than 25,000 resources , divided in a lot of different categories. No B2C users.
6
•
Make the website responsive.
•
Try to make it visually clear and minimalistic.
•
The path to find products for the user, it has to be clear and easier and it has to be design according to the last visual tendencies.
•
Header with logo, search area, maybe with login user ???
•
Sales basket in a highlight area.
•
It has the company social network, facebook, twitter....??
•
Less text and more images. A high percentage of the users of Findel, enters in their website to buy. So, let’s make that experience easy and let’s put the other stuff in other key pages. So, a brief text of introduction to the company and more visual everything. Big CTA with slide show after the header, with maybe some video and all of this ???
•
Could be a good idea to put some main sub brands in a place of the home site???
•
.....
This is like a brain storming with a lot of ideas from the company members and from the creative team, to help the user to reach his goals in the website.
7
04. First Basic Sketch. So after the first three stages, once we know the core of the brand, all their values, the products, the users and what they need, the next thing to do is to build a pretty basic sketch with all these things that we already get from Findel. This sketch has nothing to do with the UI or visual design, it’s just to see if we have all the things that we need in the home from the company, after the previous stages, to make easy the experience to our users. So, if we take a look to the sketch in the left page, we have all this elements for the new home: First element. Header with logo with a possible strap line. Menu in one row in a traditional way or maybe like a mobile option in the right. Also, search area and login customers area. Second element. A Call to Action (CTA) with a images/video slide show with a brief presentation of the company, some products, offers, sub brands, etc... Third element. Product zone, the most important area of the home and from my point of view, it has to be the most visual zone. Here we can have the first visual problem because the CTA maybe has to be in other area and like this, highlight more the product area. This things has to be discussed in next stages. But we need both areas so, by now, let’s leave the elements like that. Fourth element. Area for other stuff like awards or something like that. Fifth element. A contact area. In the current website it’s quite difficult to find the way to contact with the company. Sixth element. A footer with other info, some details maybe.... Like I said, this just an exercise to see which are the important elements in the new website. There’s no visual or UI design here, it’s a way to visualize these key elements and it’s not definitive because it can change along all the creative process.
10
9
05. Site audit.
06. Review user needs.
In this stage of the creative process, we have to take a look to the old site and according to our previous analysis, we need to review the sections and some content. Not the copy which is very very important but the copy will come in next stages of the creative process.
At this point, it’s important to come back and review your users needs. Maybe not in this case, because it’s pretty clear who are the customers or users of Findel but in the case of a B2C business, this exercise could be important. You have to imagine three or four user profiles with his professional occupation, different age, etc...
Regarding the old content in Findel site, the idea with the new content, as we already say, is make it short, fresh, clear and direct. Less is more, in content and in visual.
When you have the user profiles created, it’s important to build a path for this users in your company or site, why they are in my site? Why do they want to do? What they need from us? Help them to reach their goals in the site and finally make them back.
We’ll create a more clean header with the logo of the company and maybe some strap-line. Also we keep the login area. Basket information and search area will appear in the new version but I’m not quite sure if they have to appear in the header.
07. Site map (starting with the UI Design)
Obviously, the product section must be on the most important place in the site. This is a site for buying stuff so, this is the main section. It will be a challenge to make this section visually attractive and at the same time easy to handle for the user. We’ll keep the section of the brands. Some corporate information, which is in the footer, can still be there and some contact information which is in the footer, will be in the contact form area.
Finally, after a lot of meetings with the client and the team in the previous stages, we will be ready to create the site map for the new web. Again, we’ll share this with our client to see if they are happy with our choices.
It’s important at this stage to take a look to the site of some competitors, how do they look and how do they make it.
From here, the UI Design starts his journey but obviously, the UI Team have participated in all the previous stages too.
It’s important to make this stage together with the client too. Like I said, doing meetings with the clients to make them participate of the process is very important. A lot of meetings with big boards full of ideas and post it notes with concepts, etc...
Again I have to say that I didn’t have the proper time to take a deep look to the whole site but these are good ideas for a site map as a starting point. Please take a look to the site map on the next page.
10
11
As you can see, we have more or less a good idea how they must to be the content and sections in the new website. We are thinking it will be a good idea to divide the products by categories and also by brands, in two big sliders. Also we think is a good idea to highlight the awards of the company as a section itself. And another good thing to do, if we have content for that, is making a news/ blog section on the new site too.
08. Wireframing.
Findel Education Resources
BASKET AREA
Maybe some copy about the company
Finally we come to the wire framing stage where the UI team put all the skills and tools at work.
SEARCHING TOOL
I usually wireframe, at the first time, straight to the paper, sketching the ideas and then I’ll go through Illustrator or InDesign to make it more clear. For other projects I can use other software like Balsamiq or Sketch for the mobile apps, the process is pretty similar.
SHOP BY CATEGORY OFFERS SALES SOME RELEVANT NEWS....
Below you can see a previous sketching of my visual ideas for the new website and on the right you can see that, wireframed in Illustrator or InDesign.
SHOP BY BRAND
AWARDS OF THE COMPANY
FEATURING SOME NEWS FROM THE BLOG
CONTACT FORM AND OTHER CONTACT INFO, SOCIAL ICONS
14
FOOTER WITH SOME DETAILS AND THE OTHER CORPORATE MENU
LOGIN
08. Wireframing. Findel Education Resources
BASKET AREA
Maybe some copy about the company
SEARCHING TOOL
SHOP BY CATEGORY OFFERS SALES SOME RELEVANT NEWS.... SHOP BY BRAND
AWARDS OF THE COMPANY
FEATURING SOME NEWS FROM THE BLOG
CONTACT FORM AND OTHER CONTACT INFO
FOOTER WITH SOME DETAILS AND THE OTHER CORPORATE MENU
LOGIN
So this will be more or less the idea of our new home. With the motto of more is less, I tried to reduced the text and the content and make all the home more visual, like the graphic tendencies nowadays. The design is mobile friendly, with big block of pictures and obviously, is responsive. With this idea, the user can see very quick all the elements of the site and what they are, so we can guide him to their goals in a friendly and very nice user experience. So these are the zones of our new home from up to bottom: HEADER. The header contains Findel’s logo, maybe a strap line speaking about the years of the company and in the right side of the header we find the basket information and the login area for registered users. All must be very clean and very visual, with icons on these last areas. SEARCH AREA. CTA AREA. This site is mainly for buying. We can put more information about the company but that doesn’t seems the purpose of this site. If the user wants some information about the company, he can find it in other areas of the website but not here. So, the Call To Action zone must be filled with products information and with offers, sales, maybe some relevant news, etc... This area will be very visual, with a big slide show in the left (two columns size) and with other two slide shows on the right (one column size), one above the other, where we can see some of the products by category and some others by brand. AWARDS AREA. I think is very important for the prestige and strength of the brand, to show the awards in a more relevant way. So, I think we must to have a little row with some of the final awards of the company. NEWS AREA. Maybe with the idea to create a blog of news and always if we’ll have enough content to do it, this area will be reserved to the last news of our blog. CONTACT AREA. With a big form contact and other relevant contact information. Also the social icons must to be here. FOOTER. A footer with other details and a final menu with the rest of corporate info, About Findel, Customer Service and International Customers. This scheme could be the idea for a new home for Findel, with a more visual, easy and friendly experience to the user. From this point there’s still a lot of work to do but is a good starting point after all the UX Design. Let’s see in the next page how it could look the top area of the home after all the UX and Wireframing stages.
17
Final Thoughts. This is just an exercise for Findel and it’s just trying to show in a rough way, how is my creative process in digital, how are the full UX Design stops and how are the initials UI Design stages. Like I said before, there’s no a good UI without a previous UX Design. It’s a long process who involve a lot of people, mainly company and creative team. Speaking about this website, it’s an e-commerce website with a massive range of products, so become the old site in a new responsive, mobile friendly website will take months because from my point of view, there are a lot of changes coming in this reviewing process. Again I would like to say that this a tiny approach because of the time to make it but I think it’s good to get the idea about my creativity, my creative process and what I think about the review of Findel website. Such a challenge!
Sorry again about my bad English spelling and grammar, I’m improving little but little but still learning :D.
20
Findel Education Resources