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. Customers that have an emotional experience using a product will not only come back, they will also talk about it with their friends.

General Assembly

General Assembly

Location Pages

As General Assembly was expanding globally, we needed to redesign the global locationpage 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 astheir districts, which caused confusion.

First, I created Prototype 1 + Prototype 2 to test quick layouts with 10 of their students. The main differencewas 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

global pagE:VISUAL DESIGN

For the visual design, I used our newly designed patterns library. My goal was to let the user focuson 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

GA Hackathons

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

PROBLEM

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

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.

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.

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.

DESIGN

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

Pattern Library in Action

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

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

quick mockup

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.

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.

VISUAL DESIGN

My visual design goal was to make the design feel uplifting, friendly and easy to use - since Talkspace usersstruggle 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 offthe 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

THERAPIST APP

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.