Camille Zapata

Tag: prototyping

Project Summary

A project brief from a client lead to a proposal to transform their business into a service-oriented experience instead of focusing only on consumer products.

Our team designed an omni-channel experience that could differentiate itself from other skincare brands in the industry. We wanted to give women confidence by building trust between them and a luxury beauty brand brand through a freshly integrated online and offline experience. The online content was geared towards guiding customers to understand skincare and encourage them towards booking consultations with Beauty Consultants in retail stores and counters, while building trust as they use SK-II’s beauty products.

 

My Role

As the product designer in the team, I assisted in various phases:

The first phase was the vision phase, in which I did some initial research work for the team members to compare how some brands have been evolving, and what new technologies are being used to connect physical and digital experiences.

The second phase was design and development, in which I was part of a UX team with 3 other designers. Our team was responsible for the user flows, initial UI proposals, and overall UX design. I proposed a collaborative workflow for the designers using the Sketch design tool, the Craft plugin, and a library synced over Box and this was used for the project. I was responsible for user flows for certain pages of the site as well as prototyping navigation patterns and interaction designs.

The last phase was future vision work, where I designed and created a chatbot prototype for an internal client event, where stakeholders and attendees were able to access rich content by talking with a Facebook chatbot on their mobile phones.

 

The Problem

How could we convince customers to repurchase our skincare products? 

The skincare market is saturated with options and the products use very similar ingredients, address the same skin concerns of their customers, and with little differentiation from each other. How could our client transform their current customers into lifetime customers?

 

Strategy

Future brand experiences are making themselves present in the life of the consumer at different times both digitally and physically, accompanying them in every step of the way. Our client’s brand experience should go beyond the products they sell and be more involved with the customers’ skincare journey. It’s very important for the brand to educate their customers on proper usage of their products so that the customers could see the results on their skin, which could lead to repurchasing. The client’s data showed that customers who repurchase have a very high probability of becoming lifetime customers which is the brand’s overall goal.

A customer's journey

One of the channels in which our customers start their journey is the brand website or social apps (WeChat) and for this project the team focused on the web channel.

 

Process

Research: looking at the landscape and understanding customers

We looked at how brands are transforming their businesses and I did some research to assist the business and strategy teams. I identified trends and technologies from other brands in various industries and listed down companies that have evolved or expanded their product experiences.

Research notes
Research notes

 

Once the design process started, I first wanted to understand our customers. I identified the types of people visiting the site based on their knowledge on skincare, modified it based on our client’s target market, and then mapped out their journeys in a diagram:

The Novice's Journey
The Novice’s Journey

 

The Beauty Enthusiast's Journey
The Beauty Enthusiast’s Journey

 

I wanted to dig into the emotions of people who had experienced the skincare consultation from the brand’s counters before and use that to guide the intent for each page. I looked at blogs to get some quotes and feedback about their experiences, collected those in a document, and mapped out their emotional journey in a table:

Customer emotions as they go through different pages
Customer emotions as they go through different pages

 

Design: navigation framework

The team shared various ideas for the pages of the site but we were assigned to own specific pages. We first started with the overall sitemap, followed by the navigational structure for the site.

We were inspired by bottom navigation commonly found in apps and gesture-based interactions. It’s becoming more common to see web sites adapting UI usually seen on apps. People are now spending more time on apps compared to the web browser that their mental models have been shaped by various apps. The website would be accessed by customers in Japan who were more likely to view it on their phones rather than on desktop so we proposed ideas with a distinctive mobile experience.

The ideas were exported into Invision as clickable prototypes for quick proofs of concepts.

Idea: Fixed bottom navigation
Idea: Fixed bottom navigation
Idea: Cards
Idea: Cards

 

Gestures would revert to scroll interactions when viewed on the desktop so that navigating through pages would be comfortable and convenient contextually. Because Invision lacked the capability to develop gesture-based prototypes and animations, further iterations on the navigation patterns were made on Framer.

By working together with the UX team, we went through more iterations on the navigation framework. We discussed which ideas could scale and weighed in some reservations of the client when it came to patterns that they were unfamiliar with. We looked for a sweet spot that leveraged what people are used to while introducing swipes or bottom navigation elements to categories and product detail pages.

Proposed navigation framework on mobile
Proposed navigation framework on mobile

 

We prototyped early to communicate the concept and framework to the team and the client. Due to internal processes and stakeholders, the navigation implemented was replaced by a traditional hamburger menu.

I created wireframes and prototypes; the visual design of the site was owned by the Visual Design team. We worked closely with the copywriting team for the content strategy of the site. As the project progressed, the wireframes used for the prototypes were slowly replaced by the visual designs. The team worked with an outside development company, and the prototypes helped communicate the interactions the design team wanted to execute.

 

Design: pages and user flows

The team split the different user flows among ourselves. One of the pages we had to propose was the user’s account. What could draw customers back into the brand site and use it as a service?

I used Aaron Otani’s four stages of behavioral design as a guide:

4 stages of behavioral design

I went back to the customer’s goals to design a page that could motivate them to come back. Knowing this, we could design the messaging and information we show to the customer in ways that would help them reach their goal.

Customer goals

On a conceptual level, there were a lot of things the brand could build. We split the Account page into 3 phases: Now, Later, Future. This could help the client prioritize based on the features they currently have and the technologies they should be investing in right now, as well as the improvements they can execute in the future.

Clickable prototypes were created at the minimum to communicate user flows to the rest of the team. Module lists and documentation was also created to guide other teams. We discussed pages with other designers, the copywriters, and members of the team so we could quickly identify modules that were missed or business goals that were overlooked.

 

User Testing

The team conducted user testing sessions on the product detail pages to observe and understand how customers purchased skincare products. I assisted another UX designer by listening and taking down notes as he conducted the sessions. Together with the visual design team, we updated our designs through iteration based on the discoveries made during user testing. Some of the changes were visual and simple but the sessions also forced us to pull back on concepts that wouldn’t be built to its best potential due to deadlines and cost.

We synthesized our findings and brought the recommendations back to the Visual Design Team.

 

Evaluation

Overall, I was proud of a number of things:

  1. My contributions towards a collaborative workflow (introducing to the team a Sketch + Craft Library synced online). We had to work around constraints in our tools but overall it made sharing assets easier and sped up our workflow.
  2. Prototypes were created to communicate concepts and to test how well the navigation and interactions feel through actual touch and gestures.
  3. The website experience we proposed was in line with where I believe brand web experiences are headed: with a focus on the mobile experience, influenced by UI from apps.

I learned a lot about working on bigger teams and client-related roadblocks during the 5 months that we were working on this project. This track of work was only one of the many that the brand needs to implement to truly transform itself from a consumer goods company to a service company.

The redesign has been launched and is currently live on the Japanese and Singapore markets.

  • Investment Ideas

    Investment Ideas

    Project Summary

    The team designed an online private banking platform for Credit Suisse‘s customers to manage their investments. It also informs clients of opportunities and suggestions the company are giving to improve their portfolios. This was part of an initiative to digitize private banking.

    I joined the team after the project has kicked off, and designed a part of the full experience.

    My Role

    I was part of a team of UX designers and an art director. I was responsible for Investment Ideas, where clients can view suggestions by the bank that could ultimately improve their portfolio’s value. I worked on the content, visual design, and user experience for this segment of the app. We engaged the clients in co-design sessions to better understand their needs and expectations and hosted user testing sessions with their customers to get their client’s perspective.

    I used Sketch for visual design and Axure for prototyping.

    Process

    Unfamiliar with the finance industry, I had to do some personal research on investments and personal banking. Co-design sessions with the clients and customers helped me understand how the bank’s clients think and what their motivations are.

    Apart from user interviews, we used card sorting to identify the information that are essential for the bank’s customers to make decisions regarding products.

    I went through a series of iterations on the visual design, adding and removing elements based on what’s most important for our users to see. Although there were a few compromises due to some technical limitations, the design still focused on important information first.

    The first few designs integrated more images to break the text in the page. However, these images were not helpful for users to achieve their goals and I had to make adjustments.
    Early headers hid critical information at first. This was changed based on our interviews and user testing.
    Cards have been adjusted to show the most relevant information for the client.

     

    The design for the Ideas dashboard changed to accommodate critical information.

    Evaluation

    The platform was initially released for the bank’s Asian clients. The digital app was adopted by 40% of the client’s customers and helped them generate a billion dollars. It has also helped Credit Suisse win awards for their digital banking experience. As a team, we’ve successfully empowered our client’s customers to manage their investments at their convenience and bridge the communication between clients and relationship managers. Due to the results, I consider the project to be a huge success.

  • Email for the right time and right context

    Email for the right time and right context

    Project Summary

    What’s the future of email? Chat apps are now the primary tool for everyday communication with friends and colleagues and email has shifted its purpose. People use it as a todo-list, or part of a security workflow that people need to validate their accounts (think: logging onto Slack). Email seem to have changed into something that validates our identity, or gives you purposeful information: meeting agendas, upcoming lunches, or a bill waiting to be paid.

    The team at Huge designed proposal of an experience that helps people do more by helping people think less.

    My Role

    As UX designer, I was involved in user research through one-on-one interviews, competitive analysis, and designing user flows and wireframes, and user testing. I worked with an art director and visual designer who set the brand guidelines, which I applied onto the rest of the screens for the app. I designed the interactions using Framer.

    Process

    The team engaged the client through a workshop to understand their brand and the goals of their team internally. User interviews and competitive analysis was done prior to the design phase. We interviewed a small group of professionals and narrowed down common use cases for email:

    1. Communication
    2. Planning and Organization
    3. Relationships and Networks
    4. Identity

    Email has gone beyond being a ‘communication tool’. Looking at it from a different perspective, people have been using it to form new habits or accomplish personal and professional goals. Although traditional email as we knew it was changing, it was not necessarily dead. APIs have made the email experience faster and convenient for people.

    The team proposed an experience that can push people towards accomplishing tasks rather than digging for information in their Inbox.

    Design

    Emphasis was put on bottom navigation and gesture-based browsing. Swiping through emails makes it easier to go through important agendas quickly. The screen estate was optimized to show the most relevant information where additional info can be pulled from the top.

    Evaluation

    The team had user testing sessions to evaluate the proposed experience. We implemented some design and content changes following the tests to improve on the usability and clarity of the experience. Icons that were too vague were redesigned to conform to imagery that people were more familiar with.

    The proposal was received well by the client. We had a month for research, design, and prototyping and I was happy with what our team was able to accomplish in a short timeframe. Building the prototype using Framer helped the team bring the experience to the client’s devices especially when we had to present the product remotely.

    If I were to do the project again, I would like to accomplish a few things:

    • Integrate more services into the experience to show email as part of an ecosystem.
    • Demonstrate the impact of personalization and NLP when managing tasks.
  • Developing learning habits in kids through a media platform

    Developing learning habits in kids through a media platform

    Project Summary

    The team worked on a pitch for a media consumption experience that focused on learning for kids.

    My Role

    I was part of a team of two other UX designers and an art director. The user flows were divided among the team and I designed the onboarding and search experiences. I did visual design that followed some design guidelines set by the art director.

    I used Principle to prototype interactions for some of the screens.

    Process

    One of the members of the team conducted user interviews (children aged 3-10). We also conducted a survey among parents from different parts of Asia, UK, and US to understand what their concerns are regarding media content apps (TV shows, e-books) and their kids’ interactions with these products.

    Following our findings, we designed an experience where media consumption for kids doesn’t have to be boxed within their favorite characters. We explored showing videos and books under learning buckets such as maths, music, outdoors, geography, or careers like doctors and dentistry. We also integrated short quizzes to put emphasis on topics and terms that children may learn from.

    Design

    The app was designed for kids. I’ve taken a more visual approach to the experience: more space for thumbnails and images, bigger and readable text, and wide tappable areas. Children should be able to navigate through content without reading.

    I started with wireframes and went through iterations to polish the copy and content.

    Early wireframes of the onboarding experience.

     

    Onboarding with visual design
    Search flow designs

     

    Interactions were done using Principle to demonstrate animations for some screens.


    We wanted to highlight different ways of discovering content by bucketing videos and ebooks under content themes such as ‘Play Outdoors’, or exploring space.