Richard Pascual-User Interface, User Experience, Interaction, Art & Design

MAC IDEA

Company: Magnet Systems
Role: Full-Time Employee - Lead UI/UX Designer
Date: December, 2012 - August, 2017
Tools: Adobe Creative Suite, Sketch, Proto.io

OPERATES IN

UP TO

PROJECT OVERVIEW

As Lead Designer at Magnet Systems, Esteé Lauder came to us for ideas for how to help their organization utilize mobile technology internally using Magnet's mobile app platform. I was the sole designer in all stages of the project which included the brainstorming, sketches, wireframes, design and prototyping of the app.

My Duties

Brainstorming	Sketches/ Wireframing	Visual Design	Prototyping

THE CHALLENGE

The current MAC IDEA management platform established communication with in-store associates but was a desktop only platform. The goals we established for a mobile app were:

- Gather feedback from new and existing product
- Conduct surveys among front-line associates in the field
- Facilitate community among associates
- Accelerate product innovation through creativity

USER RESEARCH

Working with product management and MAC Stakeholders, we first conducted design sprints. As we created initial designs, we used a feedback loop to finalize designs.

The Target User
Our target users were primarily the front-line in-store associates and secondarily the managers of the MAC IDEA platform.

Our UX Strategy
We chose to design the user experience much like other social media apps like Facebook, Instagram, etc... This appproach was designed to generate enthusiasm and community within MAC and establish an ongoing dialogue between executive management and front-line employees.

DESIGN PROCESS

The MAC IDEA app was to include what was already developed for the desktop platform but added additional capability that a mobile platform provided. We started to go about designing each section one at a time while adhering to the feedback loop established at the beginning of the project, with regular design reviews throughout the project.

User Needs

Initial Mockups

Feedback

Feedback from Field Associates

Technical Requirements

Core Technical Requirements

Initial qualitative meetings with MAC Cosmetics project managers allowed us to get started quickly
An established feedback loop with necessary stakeholders and managers was established early in the project
Weekly design reviews and progress reports allowed refinement of the design as we developed

I gathered different feedback from MAC Employees in the field by showing them working prototypes in Proto.io
Overall feedback was curiosity, excitement and feedback included suggestions on additional capabilities like the ability to follow other users

I provided all design specifications, graphic assets to Engineering for all device types we were supporting (ioS and Android)
Align the requirements of the API with our design so that this mobile app could be productized and easily applied for other organizations
Maintained quality assurance of the application by performing QA testing, documenting issues, and working with junior engineers on solutions in JIRA

Surveys

PRODUCT SURVEYS

Management can conduct surveys and gather product feedback instantly through MAC IDEA.

INSTANT FEEDBACK

Associate feedback on products are documented in an open setting and users’ background are communicated through iconography as part of their avatar so the context of the product review is instant

PRODUCT CREATIVITY THROUGH MY ARTISTRY

Associates post the work they perform to show off their skills, get feedback, and learn from others

Feedback

INNOVATION THROUGH TREND SPOTTING

Inspiration on trends can be posted to foster creativity and future product development

TEAM COMMUNICATION

MAC also wanted MAC IDEA to be a one-stop shop for team members to communicate in a secure chat

Feedback

ADMINISTRATIVE TOOLS

I designed all management screens for administration of the app.