product-demo-video.gif
talkspace.png
pexels-photo-761963.jpg
Screenshot 2018-06-13 16.41.00.png
product-demo-video.gif

Product design


USER EXPERIENCE & USER INTERFACE DESIGN

SCROLL DOWN

Product design


USER EXPERIENCE & USER INTERFACE DESIGN

Hello! Thanks for stopping by.

I believe that Product Design is the most underrated opportunity for any business to grow. Users that have an emotional experience using a product will not only come back, they will also talk about it with their friends.
 

I'm and expert in Design Thinking, Emotional Design and Creative Problem Solving. I have designed native mobile apps, responsive websites, web apps, complex software, design systems and art directed advertising campaigns for global clients.
 

talkspace.png

TALKSPACE


ONLINE THERAPY

TALKSPACE


ONLINE THERAPY

Onboarding

The task was to rethink the onboarding "Intake" where users are being asked questions to get matched to a therapist.
Users had to copy and paste questions into a new message and then answer them below - which was not a good experience. 
The solution was a colorful visual experience the user could go through easily by making selections.
Any inputs the user made prior on the website would be automatically selected.
 

Artboard+3@1X.jpg

 

VISUAL DESIGN

My visual design goal was to make the design feel uplifting, friendly and easy to use - since Talkspace users
struggle with mental health issues. Even the error state should not feel like they did something wrong.

 

Therapist Notes

The goal was to design notes for the Talkspace therapists which they could access from their back office. I kicked off
the project by interviewing our therapists about their usual behavior and then test my designs with them through prototypes.
After a couple of iterations, the final designs were perceived as very helpful.

 

THERAPIST WEBSITE

static1.squarespace.jpg




THERAPIST APP

 
Artboard@2x-1.jpg
 

Pattern Library

One of my bigger projects at Talkspace was to define and design their pattern library for web and iOS.
I started by defining the "Base" (colors, spacings, text sizes...) and then used these to design components
"Atoms" and "Molecules", following the Atomic Design System. 

Universal Kit@2x.png
pexels-photo-761963.jpg

AUDIBLE


AUDIO BOOKS

AUDIBLE


AUDIO BOOKS

Designathon: 1st place 

The task of the design competition was to reimagine the Product Detail Page for the future and redesign it within 48 hours.
I teamed up with another designer and together, we won the competition with the ideas below.

We introduced an AI concierge that helps users find books based on their interests while improving the algorithm for book recommendations, each time it is being used. We added a longer, 10-minute audio sampling  that lets users decide which part of a book they want to listen to while seeing where their friends listened in.  Another idea was to add a sticky wish list to the bottom of the page that would automatically purchase the books a user added with their next credit.

I enjoyed this 2 day challenge so much that I wrote an article about it for Uxdesign.cc


 

CONCEPTING + UX PHASE

51394654.png
Concierge.png


 

quick mockup

Artboard+Copy@1x.jpg
 

Sales Checkout 

The sales-checkout on the web needed a redesign with the goal to differentiate "sales-mode" from the main shopping experience while browsing from page to page. My solution was an expandable tray on the bottom of the screen that follows the user from page to page. To visually differentiate from the usual shopping experience, I introduced a dark theme.

Screenshot 2018-06-13 16.41.00.png

General Assembly


CODING AND BUSINESS COURSES

General Assembly


CODING AND BUSINESS COURSES

Location Pages 

As General Assembly was expanding globally, we needed to redesign the global location
page and also add a new page for each city.




global pagE: EXPLORATION

One of the problems I identified was that some cities looked the same as
their districts, which caused confusion.

First, I created Prototype 1 +  Prototype 2 to test quick layouts with 10 of their students. The main difference
was that Prototype 1 was highlighting the flagship locations with a bigger card. To solve the hierarchy problem,
I listed the districts under their respective cities which would allow to filterthe entire city pages by that district.





global pagE:UX

static1.squarespace-1.jpg
 

global pagE:VISUAL DESIGN 

For the visual design, I used our newly designed patterns library. My goal was to let the user focus
on the photography, so I kept the design clean and simple.

 

 


METRO PAGES: VISUAL DESIGN

The next step was to launch a page for each city that the user could access through the global locations page.
I started the process with an exploration phase and developed the concepts until we arrived at this UX prototype

portfolio2x.jpg
 

GA Hackathons 

48-hour competition to Design and or Code a project of your choice.

Ga-hackathon2.jpg


 

 



PROBLEM

Finding the course you like on GA's website is actually not that easy.  At the time, the course overview page
had a 20% bounce rate, the click through rate was low and the workshop page had a 30% bounce rate.
 

static1.squarespace.png

HOTJAR POLL

The results to the question "How would you improve the website?" got us thinking. 
It seemed like there was a general issue of finding courses and a need for organization/calendar.

 

CONCEPT 1

The first idea was a personalized onboarding experience which GA did not have at the time.
Based on the personas we had identified, the user could first create their profile and select their interests. Then the user could receive courses based on their interests and personality type and saw them in a calendar view -  a feature users have been asking for.

Prototype (start by clicking Login)

homepage+copy@2x.jpg

 



CONCEPT 2

At another hackathon, we wanted to focus on the issue that it was especially hard to find a course on the phone because the product pages were very long and it was really hard to get a quick overview. Our research also showed that receiving a phone call from the Admissions team was overwhelming for our users

The idea was to turn the course search on the phone into a fun texting experience that lets anyone find a course quickly, by simply choosing answers in a chat interface.  Oh and we did not forget the emojis.
 

 

Pattern Library




CHALLENGE

General Assembly has been growing rapidly, so we needed to establish a design system for more visual consistency and to improve team efficiency. We followed an adapted version of the Atomic Design Methodology and designed the "Base", "Atoms", "Molecules" and "Organisms".  You can read more about the process and workflow in my article.
 

Artboard@2x.jpg

Besides the layered design system, we also divided our library into Kits: The “Universal Kit” could be used by all other kits, the “Web Kit” included web specific components, the “Product Kit” was specifically built for the software products.

Artboard Copy 3@2x.jpg


 

DESIGN

Here is a small selection of the variables and components of the pattern library.

static1.squarespace.gif
 

Pattern Library in Action

While building out the patterns library, we continuously tested and iterated the new components on the website.

Artboard@2x-7.jpg