Project

Qurate Engage
Consolidate all your social media interactions in one place.

Qurate Engage
Consolidate all your social media interactions in one place.

Engage – Hero

Role

User Experience   //   User Interface

Background

Engage is a module of Qurate Hub. It allows marketers to manage their social media account from one place. After discussions with some customers it was decided to make a mobile app version of Engage.

Engage – Slider 3

Process

The team for this project was made up of 1 project manager, 1 developer and myself as UI/UX designer. The project was split into the following phases.

  1. Research
  2. Analyse
  3. Ideation
  4. Prototyping
  5. Implementation
Engage – Slider 1

Research

Many users liked to deal with customer issues as soon as possible. This means that they are not always at the desk or near a computer. It seemed a natural fit to extend this module into a mobile app. We validated this hypothesis with some current customers who seemed to echo this idea.

Engage – Detail 1
Engage – Detail 2

Analysis

Up to this point Qurate Hub is purely a desktop app. The Qurate Design System did not yet extend to mobile devices and so this was an excellent opportunity to start creating mobile styles and expanding the current system. It was important that the app would have the same functionality as the desktop version because if it didn’t it would negate its whole purpose.

Engage – Detail 3
Engage – Detail 4

Ideation

With the research and product direction already done this project was more of a visual design exercise. I started by making a list of the functionality the app would need and thinking about potential users flows, which then progressed into wireframe sketches. I planned all the different screens and states. I decided at this point to jump straight into Sketch and start playing around with these ideas.

I used the basics from the current design system, such as colors, type, icons and component styles as the basis of the mobile styles. This worked great, everything transferred really well so I was able to design the components without much problem.

I felt that using some design patterns from existing native apps would encourage new users to make the transition from several apps to just one without too much friction.

Engage – Slider 2

Prototyping

I wanted to create a click through prototype so I thought this would be a good opportunity to try out Figma. Up to this point we had used Sketch exclusively and made use of Sketch and Invision Design System Manager. Figma can import Sketch files so I thought I’d try it’s prototyping capability.

The prototype was really useful for exposing some issues and bringing up questions regarding alternate ways of completing tasks. We would need to test different ways with users. Being able to build this so fast meant we could validate the ideas early.

Results & Findings

Making Engage a stand alone app allowed customers to use it without signing up to the full Qurate Hub suite, opening it up to a potential new user base.

I plan to A/B alternate design patterns as several questions remain, such as do users prefer to see their interactions sorted by type or by their social accounts? Creating the prototype really helped to highlight areas we could optimise.

© Martin Whittaker 2020

© Martin Whittaker 2020

© Martin Whittaker 2020

© Martin Whittaker 2020

🤟

🤟