Utrend

UX / UI Design | Web Responsive
Role
UX/UI Design
Tools
Figma
Time
3 weeks
Year
January - February 2020
Team
2 people

About project

The challenge presented to us for this project was to design a responsive web platform for a magazine, newspaper or blog, aimed at satisfying the previously predefined needs and objectives of user personas.

Objective

To design a web responsive, taking into account some of the predefined user profiles, in order to satisfy the needs and objectives, to provide a consistent and attractive brand experience.

Investigation

Problem

The lack of time that our user normally has only allows them to dedicate short segments of time to reading, such as being able to browse fashionable topics and things of interest, while they are traveling on public transport, in waiting areas, or while they are on trips for work.

Research

In this project, we had to understand in depth how people consume digital press. In this case, we had a statistical article from Freeport Press 2018, for which I had a prior understanding in order to continue with the project procedure itself.

On the other hand, we were provided with previously defined user profiles, for which our task was to choose one of them, analyze it and respond to the user's needs.

https://freeportpress.com/print-vs-digital-how-we-really-consume-our-magazines/

To better understand the problem, despite having a statistical article mentioned above, we decided to carry out a brief survey to collect information and find out which way to go.

With the data found, we could observe that people make more reading queries, whether they are news, articles, fashion, amongst others, browsing the internet and through their social networks; hence, we understood what content they were looking for; with the results of the surveys, we found these phrases that were repeated and that were important to them when reading a magazine article.

"The quality of the articles and the advertisements do not bother me too much"

"The content is well organized and the content offered is clear"

"Keep it short, clear and concise"

"Articles of technical quality or critical sense, and good photography and headline"
With the completion of the user journey, what we wanted is to have a better visualization of the process that the user would go through to achieve their goal, and in turn to understand their needs and points of frustration and pain.
For that reason, we carried out user stories to find possible creative solutions that help solve the problem, and therefore are able to reach the user's desired objective.

ANalysis

With the help of user stories, we carried out Crazy 8; hence having 1 minute per quadrant to draw possible solutions on paper, based on the information previously obtained.

IDEAtion

After analyzing the existing references in the current fashion market, we decided to carry out a brand positioning, in order to be able to focus on Utrend as a brand that fuses trendy with the latest technologies, based on the user profile that was previously provided to us at the beginning: the project and the aspects that influence the user.
With previous research, and having several references on the subject that link fashion and technology, we made the minimum viable product, which is the option of saving articles/publications to read them thoroughly. There’s a notification according to geolocation, and image search of outfits stands out, all by using artificial intelligence.
With the MVP already defined, we had greater clarity of what the attributes of the brand would be like, which led us to make a moodboard to be able to project the style and concept that Utrend would have. We collected images, colors as references when presenting the prototype, and in turn, a style guide was adapted where UI elements appear.
Continuing with the ideation part, we made a sitemap and a user flow, which reflected the path that the user takes during their navigation: for example, where they find an article of interest and outfit suggestions that suit their tastes based on previously saved searches. 

PROTOType

Starting from the user flow previously carried out, the hi-fi prototype stage is reached, where it is possible to observe how the process leads to the solution.

In the first flow, the option of being able to save publications and/or articles is observed so that the user can review them later.
Within the second flow, outfit options are recommended through image search, using artificial intelligence.

CONCLUSIONS

There were some challenges presented in this project, but if it were not for the help and support of my coworkers and the teachers, this project could not have been carried out, and despite these difficulties throughout the project, little by little it came to fruition until the desired objective was achieved.

The fashion sector is constantly changing, as is the digital one, which is why the two sectors go hand in hand in a way.

Finding trends through the use of social networks makes it possible for us to know more often what is in fashion. This notion at the same time allows us to promote online shopping, which given the limited hours we often have (either because of working hours, social life, family, among other things) we choose to buy online in order to avoid a trip to a physical store. In addition to the fact that we have a number of sites on the internet, where trends as well as technology are discussed, being the case of artificial intelligence, this allows us to visualize and understand what the product is like before having it in our hands.