UX / UI & CREATIVE PROBLEM SOLVING
UX / UI & CREATIVE PROBLEM SOLVING
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.
When I started at Codestream, my first task at CodeStream was to design
the logo and branding.
We decided for a shape that was a combination of the "Git commit" icon
plus two shapes coming together to symbolize collaboration.
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.
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.
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
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.
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.
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.
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.
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.
The global location page and city pages needed to be redesigned as the company was expanding globally.
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.
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.
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
48 HOUR COMPETITIONS
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.
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.
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)
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.
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.
While building out the patterns library, we continuously tested and iterated.