UX Designer projects
Front-end Developer projects
Student Project
launch

Role: User researcher, Interaction Designer, Visual Designer, Head of UX

Overview

Project carried out as part of the User Experience Master’s Degree program at the University of LaSalle.

Total redesign of the user experience of a cms platform for the sale of products.

Details

Client: Student work

Job Description: User researcher, Heuristic Analysis, Information architecture, Sketching, Prototyping, Visual designer, User Testing.

Duration: September 2016 / Agust 2017

Tools

UX Designer tools: Trello, Drive, Google analytics, Tawdis (accessibility), Axure, inVision, Validately, Optimal Workshop (Tree testing), Sketch, Paper, Pencil

captura de imagen Student Project

Goals

A meeting was done with the client and questions related to the client’s needs, the user’s needs and the understanding of the product were made.

We mainly had a videoconference with one of the developers in charge of supervising the UX / UI / IxD design of the platform.

Subsequently, through a form, a series of questions were sent to some members of the company to gather information related to the type of user and information related to the product and the company.

  • The redesign of a responsive website that must be adapted to views on desktop and tablet devices.
  • Achieve a perfect combination between the three levels of product management that make up the CMS: Stock management, price management, and sales management.
  • Facilitate the possibility of directing product management in different ways for each of the different international markets to which it is directed.
  • Getting users to clearly perceive the conjunction between market and language, understanding at all times what market they are operating and what language they are using.
  • Simplify the navigation pattern and the tasks to which users submit.
  • As much as possible, automate individual tedious and repetitive tasks.
  • Avoid users perceiving false affordances and loss of orientation.
  • Clearly reflect the difference in processes that occur between the different user profiles that coexist, adapting the platform to them, user in charge of product management, user in charge of managing visual content, and user in charge of management a general level.

Challenge

Improve the architecture information and provide consistency to the components, thus helping users to clearly identify each section and a small part of the site.

Reduce the steps taken by the user to specify objectives and tasks.

Redesign of the visual interface in order to implement a minimalist and functional aesthetic.

CMS dashboard example

captura de imagen Student Project

The solution

Overview

It began with the analysis of the information gathered so far, the kickoff with the client and where the main objectives of the project emerged.

It was necessary to put face and context to these users and that we are all aware of who the product is aimed at and how to make the product live in harmony with users and meet business needs.

Personas

For the creation of the personas users of the platform we rely on the investigation of the different profiles that use the platform and incorporating the objectives and interests pursued by each user.

These are the criteria used by the group to design a persona:

  • That reflect the patterns observed in the investigation – Focus on the current state, not the future
  • Realistic
  • That they describe a design objective
  • Help us understand the needs of users
  • Understand the context in which they move when using the platform
  • Their behaviors, attitudes and motivations

Below is shown as an example, one of the personas and the user journey, their role is Head of marketing of the platform through the content manager. Is responsible for updating the products, perform the analysis of the products that enter the company and the creation of campaigns and management of the marketing department.

Persona 1

captura de imagen Student Project

Content architecture

A new information architecture implemented a hierarchy of the elements in both navigation and in content, it was based on the study of the different platforms of the competition, the needs of the users and the objectives of the client.

captura de imagen Student Project

Wireframes

After iterating with sketches for the architecture of the main sections of the platform, we defined a minimalist architecture, where the main objectives were fulfilled 100%.

Next, the entire architecture of the information and navigation and interaction patterns was defined, based on the research carried out through the findings of the heuristic analysis.

captura de imagen Student Project
captura de imagen Student Project
captura de imagen Student Project
captura de imagen Student Project

Result

The redesign has consisted not only in making a new graphic proposal, but in carrying out an exhaustive analysis of the current CMS platform. Going through all the steps previously explained throughout the report to reach the established objectives and improve the overall quality of the product significantly.

For this purpose, we have analyzed two of the most important processes carried out by the real users of our client, detecting the main problems and, therefore, focusing our decisions and efforts on:

  • Refine the information architecture and navigation patterns so that users are able to navigate comfortably through a simple, clear and usable platform.
  • Unite the experience through different platforms, facilitating the future portability of the responsive components from Desktop to Tablet and Smartphone.
  • Grant the principles of depth and movement to the platform so that interactions and animations are more intuitive and easy to learn.
  • Have scalable components that allow the growth of the platform in terms of data volume, functionalities, and sections.
  • Establish clear hierarchies to achieve the balance between fonts, grids, colors, images and behaviors.
  • Improve the user experience by focusing the designs on the actions performed by the user and their feedback.

captura de imagen Student Project captura de imagen Student Project captura de imagen Student Project captura de imagen Student Project

© 2017 Copyright Pablo Goris