banner2x.jpg
pexels-photo-844923.jpg
talkspace.png
Screenshot 2018-06-13 16.41.00.png
banner2x.jpg

product design


UX / UI & CREATIVE PROBLEM SOLVING

 

SCROLL DOWN

product design


UX / UI & CREATIVE PROBLEM SOLVING

 


CODESTREAM

CodeStream lets developers collaborate inside their IDE. 
The CodeStream team was part of the Y-Combinator Winter Batch 2018, so we had
about 3 months to create a brand, a marketing website and launch the product.
 

 

1 // LOGO EXPLORATION

When I started at Codestream, my first task at CodeStream was to design
the logo and branding.

logos.jpg
 

2 // FINAL ICON

We decided for a shape that was a combination of the "Git commit" icon
plus two shapes coming together to symbolize collaboration.

Artboard Copy 12.jpg

 


 

3 // FINAL logo

The dark look was inspired by the popular dark mode of IDE's,
combined with a techie light blue that pops and makes the brand feel modern and fun.

hor_ondark_RGB Copy 2@2x.png
hor_ondark_RGB Copy@2x.png

 


 

Marketing Website 

The next step was to quickly design the first version of our responsive landing page,
just in time for the launch of our first product.

landingpage2x_smaller.png
pexels-photo-844923.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

 

VISUAL DESIGN

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.

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

 

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
Screenshot 2018-06-13 16.41.00.png

General Assembly


CODING SCHOOL

General Assembly


CODING SCHOOL

Location Pages 

The global location page and city pages needed to be redesigned as the company was expanding globally.

 



global pagE: EXPLORATION

One of the UX problems I saw was that some cities and their districts were visually treated the same way, 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 filter the 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
 

static1.squarespace-3.jpg
 
Ga-hackathon2.jpg

HACKATHONS!

48 HOUR COMPETITIONS





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.

Artboard@2x-2.jpg
 

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-3.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.

static1.squarespace-8.jpg
static1.squarespace.gif
 

Pattern Library in Action

While building out the patterns library, we continuously tested and iterated.

Artboard@2x-7.jpg