product-demo-video.gif
Screenshot 2018-06-18 17.38.50.png
SS.png
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



Hey! Thank you for stopping by


Let’s talk about design for a second since that’s why you’re here :) I believe that Product Design is one of the biggest opportunities
for businesses to grow organically. Users that have a great experience using a product will not only come back many times,
they will recommend it to their friends for free. It’s a much more effective investment than compromising on the user experience and spending your dollars on advertising. I am pretty passionate about this topic, so I wrote this article here

Enjoy looking through my work and feel free to reach out if you’d like to see more!

Screenshot 2018-06-18 17.38.50.png

NEATLY


EMAIL REINVENTED

NEATLY


EMAIL REINVENTED

A new kind of communication tool


Here is one of my favorite side projects from 2016/17. I tried to tackle the question - How can we solve email overload?
It has been a personal pain point and research showed that employees spend about 1/3 of their week on email.

So I started to conduct interviews with employees that use email at work and later on also with freelancers. I also
posted several Google Surveys and later on tested my first prototypes with over 25 people in person.


PAIN POINTS

The top pain points of email users I found at the time, were:
#1 overloaded with too many emails,
#2 that email was not an efficient collaboration tool,
#3 that users had a hard time finding emails, attachments and links.


Competitive Analysis

Inspired to create a better tool for communication than email, I looked at various communication tools - from
Whatsapp to twitter to email and one interesting finding was that writing a full email takes 6 steps versus a tweet only takes 3 steps.
So I decided to design a tool that would have an email address but work like a modern, instant communication tool.


Idea & UX

Working with 2 developers, we created a tool that can be used for instant communication using your email address
and also grouping email threads together like in Whatsapp. The below interface organized things more “Neatly” in terms
of finding emails, attachments and links faster.

New Message Baseline@2x.png
Attachments - Filters@2x.png
Links - Show - All@2x.png

 

 

USER INTERFACE DESIGN

My goal for the visual experience was a clean, modern chat-like interface that makes users feel like they are chatting
not emailing which makes the experience feel less like work.

Massage Baseline 7 topics@2x.png
Business Emailnew@2x.png
Links@2x.png
SS.png

ELEVATOR9


BRANDING - SERVICE DESIGN - UX/UI

ELEVATOR9


BRANDING - SERVICE DESIGN - UX/UI

A startup for leadership technology



Project BACKGROUND

A good friend of mine had just launched his new startup and asked me to create a “quick” branding
and website in a limited amount of time. So I worked with the co-founders and hosted a few workshops.

Screenshot 2019-07-06 18.41.51.png


SERVICE BLUEPRINT

To get a better understanding of the current service, I hosted a quick workshop and created a service blueprint.
This would come in handy later to help the team identify opportunities for improvements and brainstorm iterations
based on customer feedback.



Branding Platform


I also hosted a few workshops with the team to define a branding platform, including personality traits of the future brand:

Screenshot 2019-07-06 18.34.14.png



LOGO AND VISUAL IDENTITY

To define the visual identity, I first created a mood board in collaboration with the team and chose
a “design persona” to create a cohesive brand experience that feels human.

5.jpg






BRANDING AND LOGO

I incorporated a triangle element to represent “elevation” (Elevating Leadership) and also choosing
a rounded font to bring in the human side of the brand as well as making it feel modern.

LogoE9-01.jpg
LogoE9-02.jpg



VISUAL STYLE

For designing the visual style, I used our design persona “Michelle Obama” as inspiration as well as the mood board.
We wanted to create a very human brand since the startup is all about people/leadership. It should feel modern and
the style elements support the idea of being “in motion” when making progress and feeling great.

new.jpg








WEBSITE design

By defining the service clearly first and understanding the business’ priorities, I built out the UX/UI below.
Here 2 example screens of a bigger website to be launched soon:

12x.jpg
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

Please note: the visual style was already defined and not possible to enhance at that time. My focus was on
user interviews and building out a useful product that would best support therapists.

 
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