Atomic

 

Here's a collection of some of my design work during my time at Atomic:

Notification center

A centralised notification center where users could be informed of any activity relating to their account. This could include being added or removed from a project, being invited into a team, someone archiving work you're collaborating on, being tagged in comments etc.

See an early prototype/exploration of this here.

Notification center in the hub

Notification settings in Account Settings

Earlier exploration of notification center including empty states and working through different user goals and scenarios.


Comment notification emails

Exploration of email template design when someone leaves a comment on your prototype, as well as when someone tags you. There were a few different scenarios that had to be explored including:

  • Comments left on multiple pages
  • Many comments left on one page
  • A few comments left on one page
  • A comment left on one page

Multiple comments left on the same page

A few comments left on the same page

You've been tagged in a comment


Tagging others in comments

The design of a tagging system in the comments section of Atomic to allow you to tag other team members or collaborators.

See an interactive prototype of this here.

Tagging another user in a comment

Tagging flow


Sketch Plugin landing page

With the release of our Sketch plugin we decided on a landing page to help promote the release and to also be a place where the plugin could be downloaded. 

Sketch plugin page on mobile

Sketch plugin page

Early exploration

Snapshot of Sketch plugin page

Early exploration


Log in and Register screens

Tweaks to the existing log in and register screens to create consistency and clarity throughout, as well as introducing a new 'promotion box'.

Updates to the register screen include button styling, copy writing and placement tweaks

Design to support if there is no image

Design to support if there is an image

Design Life

In November 2015 my friend Charli Prangley and I started our own podcast, Design Life.  We saw a gap in the podcast market for a conversational show about design and the issues young creatives face, that was hosted by two females. So as two creatives balancing a day job with side projects, Design Life is a way for us to discuss our work while helping others.

We needed a website that would serve as the central point for the podcast; a place for us to upload episodes, share information and takeaways and share more about who we are and why we create the show. 

Updated episode page to support takeaways and timestamps

Creative Process

The design of the website has gone through a few iterations over the last year as we come to understand what's valuable on a podcast website. For example, in recent months we added more detailed show notes including takeaways and time stamps. We also realised that it was difficult to browse the site for old episodes, introducing the idea of an easy to browse archive page. 

Home page

Online store

We recently opened up an online store as a way for our community to help support the show. To support this, I designed an online store flow from browsing a product to viewing your cart and walking through the checkout process.

Product page

Cart overlay

Cart overlay states

Checkout page

Checkout flow

The designs in this case study are yet to be developed. The website in the button below is the current state of the site, which is soon to be updated to reflect these designs.

Charged

 

At over 10,000 subscribers, Charged delivers noise-free tech news via a weekly newsletter and podcast. Charged is largely geared towards the tech community. They round up the best technology stories, long reads and top startups for people with little time or just need the hottest scoop.

In mid 2016 Charged was experiencing rapid community growth. They just started a podcast and had begun blogging on Medium. At that time the newsletter, blog and podcast were all on different domains and there was no additional information about the community. It was also at this stage that Charged began to seriously explore sponsorship opportunities. 

Charged needed everything in one, centralised place. Having everything together would not only make the newsletter, blog and podcast easier to find/browse, but also give them a platform that could be grown over time.


Creative Process

Research
Charged opted for something light, clean, modern and sleek. The majority of their community are early adopters of technology and very active online. This means their expectations of the web are high and they have a keen eye for design. 

It was also important for things such as old newsletters and podcast episodes to be easy to find. While search is helpful in this case, so is something like a 'quick find' that quickly takes to to a point in time. I knew that I wanted to have something like this to make it quick and easy for people to find older content.

The main call to action of the Charged site is to convince the viewer to subscribe. To encourage this I decided on having a top, clutter free header that makes it dead easy to register.

Newsletter archives

Website
Charged wanted to get into blogging on their own site instead of a Medium publication. The original site was basic. There were two archives (which created some confusion) and not much space for more info to be added. Not only this but the podcast didn't exist on the site and was on it's own domain. This fragmented the experience of Charged as viewers had to know where to go.

The new site consolidates everything together, introduces a blogging platform, consolidated archives, about, sponsor and more. Company logos were added for social proof.

Logo comparison

Logo
While they didn't want to stray too far from their original branding, Charged knew that their logo needed a bit of a facelift to something a bit more versatile and sophisticated. The old logo was falling a bit flat and starting to lose some appeal as visual design trends have changed. 

The original logo was loud, in your face, rigid and bold. The new logo is a bit softer and plays with a more sophisticated typeface. The brand colour of red remained however was tweaked to something a little friendlier and less-harsh.

Podcast artwork

Charged Podcast
Up until this point the Charged podcast had been running for about 6 months but lacked any distinguishable branding. To give it a life of it's own I introduced a secondary colour to represent the podcast. Having the written content (newsletter + blog) red and the spoken content (blue) helps to divide the two and lets people follow one or the other based on their taste or interests. To support this we also added a seperate sign up form.

I created an episode and featured image template for each podcast episode so that they could easily update them themselves each week by following the guidelines.

Newsletter redesign

Charged Newsletter
Along with the web design and branding updates, Charged also needed a new newsletter template that was consistent with the new visual style. Over time Charged began writing more long form in the newsletter, which the old template wasn't initially designed for. The text was too small and sections were oddly separated with rainbow colours and jolting rules. The sign off at the bottom was often missed by readers even though it sometimes contained important information.

The new template not only introduces the new branding but is also softer and cleaner to red. New sections were introduced such as the sponsor section to support Charged's long terms goals of monetisation. The newsletter now reads more as like a digest, with a summary at the top of what's included as well as a section for Owen to leave any notes or important information that can't be missed.

Amsterdam UX Camp

 

Amsterdam UX Camp is a one-day BarCamp. At the camp, you can share your knowledge and passion about User Experience and related disciplines. The camp is an open participatory event where content is generated by attendees. Contribution is key: whether it’s sharing your knowledge in the form of a presentation, facilitating a workshop, starting a discussion, or volunteering.

Generating excitement for the event
The exciting part about this project was to redesign the whole site from scratch. I decided early on that it was important that the design help generate excitement within the community.

A completely open brief proposed a fun challenged – how to present the information in a fun, exciting and clear way.

Moodboard

Moodboard

Creative Process

Research
In keeping with the theme of playfulness and UX Design, I explored existing combinations of shapes. Even though most of my visual research were quite pastel, pink or child friendly colours, I opted for a more striking and sophisticated colour combination. 

Blog post

Designing a visual identity
To make the event unique and recognisable, we created a visual identity. This consisted of playful colours, patterns, strong type and complimentary toned photography. Combined, these elements helped to communicate the excitement, play and fun of the event.

It was important that the visual elements evoke playfulness and life – while still not overshadowing the content and calls to actions. We developed a set of rustic playful shapes, complemented with a strong colour palette.

The focus pre-event was to encourage tickets sales through visual design. Because of this, I gave clear thought and structure as to where to position call to actions such as ticket purchase.

Full screen footer overlay – see transition in action

Parent Interviews

 

Parent Interviews is a New Zealand based online parent/teacher interview booking system. First created in 2012, Founder Indy Griffiths designed and built the system with what knowledge he had of design from High School. Fast forward 3 years and Indy felt that the Parent booking site of the system needed a fresh new design.

Indy wanted to prepare the website to market it overseas in new markets. To do that, he knew that a fresh, frictionless and responsive design was needed to maintain his competitive advantage. The challenges for this project was to maintain a simple and functional design that was easy and enjoyable to use.

The final design is friendly, easy to use and frictionless. Users are presented with helpful tooltips that don’t cloud the experience but provide just enough hand-holding along the way.

Call to action empty UI states have been implemented to guide the user along and confirmation states ensure that they are aware of their actions. Responsiveness for both tablet and mobile was also designed so parents can book their interviews on the go.

Mobile screens

Creative Process

Early research
Through my research of the existing design, there were immediately a few areas for potential improvement around the user experience. Students couldn’t be edited, the tool tips were quite intrusive and confirmation buttons wouldn’t appear until after something had been selected.

I wanted to keep the experience clear, clean and friendly. To do that, I decided I would instil some friendly personality (eg. Success! or Oh no – that didn’t work).

Log in screen

Visual Design
After creating a visual mood board, I began sketching a lot and considering a new visual language as they existing one lacked some branding identity. While I kept in line with the existing brand guidelines of Parent Interviews (colour, typeface etc), I also decided to bring in some additional secondary colours and icon style.

Book interviews – showing a few different states

User Experience Design
In the old design, once the user logged in they were greeted with the Book Interviews page with no clear action as to what they were required to do.

In the new design, the user is now greeted with an empty state Book Interviews page and a clear call to action to add their student(s). This helps guide the user by giving them a call to action of what to do next.

While in the above use case an empty state can be used to encourage the user to perform a task, it isn’t always necessary to have empty states. When designing the My Timetable section (an area where the parent can see which interviews they have booked and when), I started by including empty states for when Parents didn’t’ have any interviews. For example:

Empty state

However I decided that this was impractical as the empty state doesn’t serve any purpose or have a call to action. It just ends up taking space and causes the parent to scroll more to find the information they’re really looking for. I decided to take these out to avoid confusion and just focus on displaying the information the user really wants to know and making it quick to access.

I decided to add a notification center so that the user would be notified of any updates to their interviews (cancelled, time change etc). Keeping with familiarity, I used the standard alert bell and red notification so that it would be easily identifiable and understood.

To create a consistent feel throughout the site, I explored new UI states as part of the visual language. This included input fields with dropdowns, errors, success and error tooltips as well as button and hover states. I continued exploring the style and trying different layouts of how the UI elements could be applied.

Timetable design exploration

When designing the Book Interview timetable – I went through quite a lot of variations in layout and UX before coming to the final option. There were quite a few challenges in coming up with a design choice that not only supports viewing multiple teachers, but also multiple days, times and students.

Input fields

Style Guide
A style guide including colours, typography and form rules was created to make the development process easier and provide Parent Interviews with some styles that they could apply to other parts of the business if they wish.


Femke got the ball rolling straight away. During each design iteration, we were kept informed and in the loop, and the end result exceeded our expectations. We can’t wait to work with Femke again in the future.
— Indy Griffiths, Founder & CEO of Parent Interviews

MoonMail

 

Caring deeply about the value they provide for their customers – MoonMail is an email marketing tool based in Spain. From creating and designing templates to campaign analysis and performance, MoonMail provides high quality Amazon SES email marketing to their customers.

MoonMail approached me with a challenge to redesign their landing page and blog. The opportunity was to create a modern, aesthetically pleasing design while helping highlight and communicate MoonMail’s value proposition and core benefits. This redesign would coincide with a version 2 of their product which they were planning to release.

To create a new solution I identified areas that needed improvement:

  • Unclear calls to action
  • Language used was sometimes confusing
  • Value proposition wasn’t strongly communicated
  • Hierarchy of features were difficult to glance over
  • Lacking visual elements to show the tool

Snapshot of the pricing section of the new home page

Uncovering the value of MoonMail
Together with MoonMail, I worked through a value uncovering questionnaire to help uncover what their value proposition is. This helped to understand MoonMails strengths, how they differ from competitors and who their customers are. The answers to these questions then became a foundation for what was important and what the goals were of the project.

Questions included:

  1. What does MoonMail do?
  2. Who does MoonMail do it for?
  3. Why did you start Moon Mail?
  4. How do you differ from your competitors?
  5. What are your goals?
  6. What is your value proposition?

Content creation
One of the goals of the project was to ensure that the benefits of MoonMail were strongly communicated and easily understood. Together we worked on improving the copy and choosing messages that helped communicate the benefits of MoonMail.

Interactive price slider

Interactive price slider

Creative Process

Wireframing
Wireframes help to organise the information, structure and hierarchy of the site without being distracting by visual elements. After sketching some on paper, I picked the one that worked best and digitised it. I then identified obvious areas of improvements, making small tweaks and moving elements around to explore how it felt.

Custom illustrations

Visual Design
Visual design is where we give the utmost attention to detail. Hierarchy was of high importance during this phase and was carried out by a combination of balanced typography, scale and colour. I also suggested subtle transitions to help maintain attention of the user and highlight areas where they could interact.

The colour pattern consists of a clean, neutral colour scheme. A combination of green and blue are used as accent colours, where darker and lighter shades are used for balance.

The hero section of the landing page had to communicate the value proposition of MoonMail in a concise way, while also telling the story of MoonMail. The aesthetic design developed for the landing page was also carried through to a blog – a new venture for MoonMail. The blog allows MoonMail to categorise their posts, set feature images and encourages social sharing.

One goal was to include closer aligned visuals. We used illustrations to show the visual interface of MoonMail. These illustrations accompanied the features on the landing page and helped communicate the benefits of using MoonMail.

Button and form styles

Style Guide
As I didn’t work on the technical side of this project, I made sure to create a thorough Style Guide for the developer at MoonMail. This included things such as typography rules, alignment, spacing, colour, states and styles.


We liked working with Femke, who as a designer also understands business and marketing. When marketing and design correlate together, the overall message is twice as strong. She gave her best to understand our product and our users, so she was able to deliver exactly what we needed.
— Ivana Veljovic, Marketing Manager at MoonMail