UI & UX design, Information architecture, prototyping, content strategy, art direction, branding and Production
Research - Use of personas during the development of the website
It was part of the user experience design research to create and develop five personas as a tool, and there were three personas selected.
Purpose
Deeper insight and understanding of the product and target user.
The purpose of the five personas created was to have a deep understanding of the company’s target audience and gave me the tools to develop a website that satisfy the user’s needs based on these specific users and audience. As well, to develop empathy towards the user giving me a clear concept of how users interact with the product and website.
Since the product is very specific, its demographic was very specific as well.
*This step should be done before jumping into the design and branding.
Resolution
I was able to point out what are the goals and characteristics of the users (in a larger scale).
I found out that the majority of the users that visit the site are pregnant women that have already had children. Also, most of the users are brought to the website from social media as most of these users are digitally connected and run a blog or they are overall active on social media.
The following three personas are the ones selected ↓
Information architecture and flowchart - purpose, development and considerations
Part of my UX research was to develop a user flow and some simple information architecture work.
Following the organization of the information of the previous website, I reorganized the information and categories. This step went very smooth since the online store carries a total of twelve products.
One of the first inconveniences for the user that I noticed during this process was that there were more categories than products in the product section.
I did a basic card sorting with three other participants and the results were collected. The results allowed me to reorganize the content in a logical and efficient structure to facilitate Findability to the user.
Some of the content that I reorganized were: categories, sitemap, and menu and I organized it in a subjective and categorical way.
Usability Testing
To determine that the reorganization of the website was efficient, I conducted few usability testing with a simple prototype that I created. Also, I watched multiple screen recordings of users interacting with the prototype and collected the results and I did few adjustments with the website design.
Evaluation the UX of the old website
The tool that I decided to use to evaluate the old website and also to develop the new one was a journey map. With this tool, I was able to visualize the process that the user goes through in order to accomplish an objective. This included finding more information about a specific product, finding the right garment size for them, or just being able to purchase a product that they saw on social media.
Opposite of marketing, this journey map exposed a deeper insight of the users emotions, actions and thoughts. The result of this is a visualized narrative of the user interacting with the product and website.
Some of the stages found during and at the end of the scenario were purchase, searching, retention, repeat.
Resolution
The journey map gave me the opportunity to understand how the user experience can be optimized, giving me new opportunities and a clear idea of what has to be improved and implemented.
The results can be found in the following journey map ↓
Wireframes - Wireframes are essential for a good web design.
After the research stage was finalized, the website architecture was determined, the journey map was completed, and card sorting session results were collected. Then, I was able to start sketching some wireframes, and later on I created some low-fidelity wireframes.
The only purpose of these wireframes were to put together the site’s structural elements such as site features, navigation areas, and size. They do not contain any design elements.
The resolution of the wireframe was to give a concrete visual process of the project. For example, connecting the site’s information to a visual 2d design by connecting paths between pages. This shows functionality in the interface and organized the content by determining the space of an item and where it will be located.
Adding an extra colour to the colour palette
During one of our team meetings, it was brought to my attention that the old colour palette looked quite serious. It only had one colour besides black and white. So we considered adding an extra colour to it. For this, I created four different moodboards with a possible extra colour, showcasing what the brand would possibly look like and if it would go well with the current typography.
Content strategy & creation
At this stage, the new website was finally coming to life. However, we were lacking of new content since most of the material that we had available was very outdated.
I faced the challenge to create new content with the old material, which was a very creative process and somehow, it brought out my creativity as I had the old content to build from
During the creation of the new material, I projected the message that the company communicates. In one specific case, I focused on the three main benefits that these garments offer to their users.
Also, most of the content was based on the personas. I created several illustrations that the visitors could appreciate. This was done having in mind, that artistic content always make the viewer feel emotions and I wanted to make them feel the message that Mayana Genevière transmits. A comfortable, useful, yet sexy garment for women in the breastfeeding stage.
Aluxtra section report
From the old website, one of the sections that needed the most attention for improvement was the Aluxtra section. I decided to make an independent and more high level UX study on this specific section.
The main issue for usability was that there were four different sections combined into one which overwhelmed the user. Entering the Aluxtra section would look as if the user would be entering a completely different website with a completely different product.
Here is a brief of some of the issues that this section had and some potential solutions ↓
Final website :)
