top of page
CMS.jpg

In the course TDA335 - Individual Interaction Design Project, Major at Chalmers University of Technology, we got the chance to redesign anything we want in collaboration with a company. We chose a Gothenburg-based company that works with developing interactive display solutions to improve the shopping experience in retail environments.

The project aims at redesigning the current UI of their Content Management System (CMS) to make it easier for each individual stakeholder to independently perform their desired tasks. This was achieved through several interviews with stakeholders, wireframing and testing.

Annie Rehnberg, Danny Lam, Louise Ahnvik & Louise Henriksson

PHASE 1: DISCOVER

discover.JPG

Today, the CMS for digital displays is used by several different parties in several different ways. The portal is not fully adapted to suit that many different stakeholders, which causes confusion for both new and old users. To solve this issue, the project utilized several interaction design methods to design a new and better user interface.

Source: pixabay.com / Aila Images

“There needs to be a good overview of what is available within the portal.”

“There is no way to create new menus within the portal. I would like to do this myself.”

 

The project began with a explorative phase where related theory within the domain were researched and interviews with users were performed. To create a new CMS interface, all stakeholders needed to be reviewed, with the help of the open interviews.

PHASE 2: DEFINE

The affinity diagram resulted in a wall of key words from the interviews on post-its. Each post-its were grouped after appropriate themes, such as Filter, Search and Screen Info. Each post-its was also indicated with a number, representing a specific stakeholder. This facilitates the search for the original interview if needed,  see figure 5.1.


A total of 19 themes were created: Screen Info, Feedback, Store Customer Behaviour, Internal Communication, Overview, Navigation, Stats (Sales), Store Staff, Search, Screen Setup, Error Search, Filter, Status (Online/offline), Readability, Account, Super Admin, Customer Info, Menu and Other.

ad.JPG

Some important requirements.

PHASE 3: DEVELOP

dev.JPG

The requirements turned into sketches using methods such as Crazy 8 and Sketchstorming. The design team started with Crazy 8 in order to put our creative minds into a paper without time to actually think about its functionality and/or design. Different ideas of layouts were the main goal of Crazy 8.

When desirable layouts were chosen, the design team started to sketchstorm.

Thev physical sketches were later converted into digitally wireframes made in Figma.

A low-fidelity prototype made in Figma.

PHASE 4: DELIVER

The project ended with a presentation at the company where the new CMS portal was presented using screenshots and mockups. The CEO joined the presentation through Skype Video Call.

 

The response was positive and they really liked the new design and the new features, especially the new overview and menu creating tool. They also gave useful feedback regarding the structure of the CMS.

dev2.JPG

A high-fidelity prototype made in Figma.

PHASE 5: EVALUATION

The biggest issues discovered during the project were that there are several different stakeholders that are using the same CMS for very different reasons and goals. This meant that the portal needs to be adjustable for different types of users who all requests different features. This resulted in a final user interface which had high customizability as well as different kind of content for different users.

Getting an overview of the portal was one of the requests from the interviewees, but it meant different things to different interviewees. To solve this issue, a new view was created called Overview. The overview view is like a dashboard of widgets, where the user can customize the content to show the information they are most interested in. Such content could include statistics, frequent contacts, status and information about in-store screens. The plus button in the bottom right corner is used to add additional widgets with content of the users’ own choice. Furthermore, this button is used in several other views throughout the application whenever something is to be added.

Do you want to know more?
Contact me on LinkedIn below.

bottom of page