About me

I use research, strategy and design to create engaging user

experiences.
My identity as a user experience (UX) designer is grounded in a
capacity for cognitive empathy, a deep interest in how people
connect through verbal and visual communication and a
passion for languages and cultures, enriched by years of living
abroad.
I like spending my free time sailing, filmmaking, painting or just
creating things with my hands.

Multiplatform Recruitment Company

CHALLENGE SCOPE

Discoveree is a startup and an online platform that connects job seekers with UX strategy
companies looking to hire. Candidates save time by completing a profile and Adaptative Design
letting interested employers contact them. This takes away the effort of sending Mobile User Interface
out numerous job applications, and allows the job seeker to focus on effectively Prototyping
communicating their own skill set. Employers save time and money because the Branding
candidates are pre-screened by Discoveree to verify relevant work experiences.
However, Google Analytics data showed that many new visitors were leaving Time Span: 6 weeks
without completing a profile. The low conversion rate was attributed to confusion
surrounding the sign-up process.

Goals

Prim ary: Increase candidate profile completion by optimizing the sign-up process

Secondary: Improve the candidate selection experience, resulting in more hires

For this project, I wanted to challenge myself by taking on the UI & visual design/ branding
in addition to the UX Design. Although we weren’t tasked with improving their visual design,
we decided that establishing a clear and consistent style guide would be essential to
achieving our goals.

2
Research

Com petitive/Com parative Analysis

By completing the sign-up process for six online job-search platforms, we were able to
compare positive aspects of each, as well as points that caused confusion or hesitation. Key
features that made the process smoother were clear progress indicators, transparency
in what information would be displayed to the public, and giving the user freedom to
skip optional steps.

Heuristic Analysis

Our first step to optimizing the candidate sign-up flow was analyzing the current design.
Referencing Jakob Neilsen’s usability principles, we identified heuristic violations and
prioritized them based on impact on the user’s ability to successfully create a profile.

Usability Testing

After our own analysis, we conducted five rounds of usability testing with target users who
have looked for project management jobs in the past. To accommodate their schedules, we
conducted some of the testing remotely using screen sharing on Skype. We gave them the
task to complete a candidate profile and ask them to think aloud as they completed the
process.
Using our heuristic analysis and the results from the usability testing, we identified three of
the most frequently encountered problems in the current flow. Many of the issues we
identified overlapped with the user’s comments during testing.

3
Pain Points:

1. Visibility of System Status

Registration: The current progress bar gives little information about the steps required
to complete registration. The status of your account is unknown.
Em pty States: There’s no indication that certain sections are empty or have yet to be
completed by the user. Empty states are a valuable way to onboard new users and
prompt them complete tasks.
Candidate Profile: After submitting your profile, there’s no indication of whether it’s
visible to employers.

2. Consistency & Standards

Inconsistencies in data visualization and UI elements came up throughout the user testing.
Some users appreciated that their career highlights were being displayed visually. Others
however expressed that the placement and visualization of key statistics were unhelpful.

The sidebar containing important information about their work experience is too
hidden.
The different edit options made it overwhelming to fill out missing information. These
vary between buttons labeled ‘Edit’, regular text links, and icons that only appear
upon hover.
The pie chart becomes difficult to interpret when you add more than a few
industries — it requires matching the colors to the labels.

4
 Users liked the bar chart — displaying the statistic directly below the visual means easier
readability.

After speaking with the users, it became clear many of them didn’t have a clear
understanding of what happens after you submit a profile. Unsurprisingly, most expected the
profile to be made available to employers.

W hat do you expect to happen after clicking ‘Subm it Profile’?

“I’m not sure what to expect next”

“My profile has been published and employers can view it”
“My profile should be public now”
“Is my profile saved?”

However, this isn’t the case. What happens next in the process is:
Candidates receive an e-mail from Discoveree prompting them to book a phone call
with a talent specialist via a third party app called Calendly to review their profile.
During the interview, the talent specialist screens the candidate, confirms their work
experience and makes suggestions for their profile.
If the phone call goes smoothly, the candidate’s profile is then published to the
talent database where employers can request interviews.

3. Error Prevention & Recovery

Without inline form validation, users aren’t informed about whether their password
meets the requirements until after they attempt to submit the form. During the user
tests, many of the users were slowed down because they didn’t notice the
requirements. We hypothesized that was in part because of the layout of the
requirements in a single sentence.

5
All five users were also slowed down in the profile submission process. This revealed a major
flaw in the current sign-up flow: candidates didn’t realize that even after completing the
initial sign-up process, they would still have to navigate the dashboard to complete the
remaining information.
When users initially saw the profile page, the first thing they did was dismiss the blue
dialogue box. The blue box informed the candidate that all the information on the
dashboard needed to be complete before submitting the profile. When most users
attempted to submit without completing every section, an error would pop up listing all the
incomplete sections. This proved to be a frustrating process, as there was no indication of
which fields were required or incomplete. Users then struggled to remember which sections
were incomplete.

Affinity Diagram

To synthesize our research data, we grouped key points collected from our analysis and
testing in an affinity diagram exercise. The resulting groups represented areas where users
To summarize, users struggled to understand the term inology used throughout the site,
and found the profile dashboard to be difficult to navigate due to scattered UI elem ents,
the overall layout, and the way inform ation was ordered. After subm itting the
profile, they were unsure of the status of their profile and next steps.

6
User Personas

Luckily, our client was so engaged in the UX process that he conducted his own user
research before approaching us with the brief. Using his findings and our own interviews with
our usability testers, we created a cohesive user persona for the candidate that clearly
defined motivations and pain points. Common pain points were that candidates felt that
many companies didn’t offer fair compensation and lacked transparency in their hiring
process. Using this information, we focused on increasing transparency in the candidate
experience, as well as highlighting how Discoveree would solve the problem of mismatched
salary and job expectations.

Annie graduated from Universidade Tecnica de Lisboa with a

degree in Business. She also recently completed training for
Projects management and earned her certificate (PMI). She is
actively searching for full-time project management jobs in
Lisbon.

Project Manager
Age: 24
7
Lisbon
User Flow

8
Design & Testing

This project was challenging because of the sheer number of forms and user inputs we had
to design for. We tackle this, by designing the smallest elements, such as form fields for
different input types. From there, we began to build all the interactions such as drop-down
menus, search functions and more. For the more complex interactions, we sketched out
ideas and iterated on them as a team until we agreed on a solution.
From there, we began paper prototyping using the user flows we created.

We iterated through a few ideas including a drop-down that only appeared after you
selected an industry. Finally, we decided on an interaction that allows the user to quickly
search for an industry by typing and viewing possible industries in alphabetical order before
entering the number of years. The user can continue to add multiple industries or delete an
industry.

9
User Flow for the app

10
Branding and Visual Design

11
We proposed a new corporate image and branding which was very welcomed from the
company.

As a team, we decided that bringing the designs to high-fidelity would improve the quality
of our usability tests due to the number of form interactions. Being meticulous with the style
guide, down to specifying the padding and margins for every element would help us create
consistent designs between three designers and prevent many frustrations further on.
I aimed to establish a consistent visual hierarchy to make it easier to navigate the
information-dense candidate dashboard. We changed to Reds and Greys for Discoveree
new branding. We selected Source Sans Pro, a versatile sans-serif font with many weights
and slightly rounded edges to convey friendliness. Throughout our designs, we looked for
ways, such as using a conversational light tone in our copy, besides and informal and
joyful feel given off by the new visual identity.

Profile W izard

Informed by our earlier usability tests, we wanted the majority of the information to be
completed by the time the user sees their profile for the first time. This would give the user a
sense of progress and achievement, rather than being overwhelmed by seeing the amount
of work that’s still required to complete the process.

“I want it to prompt me to fill things out in a specific order, it’s too overwhelming” — User
testing feedback

To prevent the candidate from getting hung up on any step, the only things we left out from
the wizard were the resume and professional references, which we assumed might take more
time to obtain or edit.

Onboarding

Empty states are a great way to onboard new candidates by incorporating CTAs so they can
accomplish their goal of receiving interviews faster. They also help the user understand
where things are located on the site.

User Progress
To help users better understand the recruitment process, it’s essential that the platform
updates them on the current status of their profile and shows them exactly what their next
step should be. This was clear from our user testing, when users didn’t realize there were
more steps before their profile was visible to employers.
At each stage, a brief description of the next step and a call-to-action would reduce the
amount of effort and time required to publish a profile.

12
 13
 Outcom e

Working on Discoveree user

experience was an exciting
challenge.
After presenting our findings,
product manager asked which
design choices we felt would make
the biggest, most immediate impact
so he could incorporate them into
the upcoming development sprint.
We agreed that the status banners
on the dashboard and integrating
Calendly with the platform would
significantly reduce friction during
sign-up. Although they weren’t able
to utilize the style guide we created
due to resource constraints, I’m glad
I was able to have the experience of
making one.

After implementing an embedded

Calendly link, and a simple progress
tracker for the candidate profile,
tim e to profile com pletion for
candidates was reduced by
61%. This reduced missed
connections between employers and
potential candidates resulting in
increased revenue for Discoveree.

14
Future considerations + lessons learned
If I had longer than 3 weeks, I would’ve wanted to further refine the user interface, as well as
improve the employer’s search experience.

Although we make our copywriting tone conversational and friendly, I would’ve put additional
thoughts into optimizing the employer’s search process and present a completely different
set of needs and business considerations that would be exciting to explore.

15


ZARA app
Facilitating Conversion

CHALLENGE SOLUTION SCOPE

Solving usability issues brought by analytics Facilitate users goals and improve User Research
team regarding app’s Shopping Cart. conversion. User Testing
Bigcommerce analytics data showed that Redesign of shopping cart experience. Prototyping
many new visitors were leaving without
completing shopping process with an RESULTS INDUSTRY:
abandon cart rate of 48%. Clothing
Heuristic analysis and usability tests (guerrilla Abandon cart rate reduced to 28%.
and lab) led me to discover multiple pain TIME SPAN
points. 3 Weeks

RESEARCH

User Personas
Research around customers, and creation of
personas to cover the hypothesized, largest group
of customers: professionals in their 20s and 30s
and in the middle-upper income bracket.

User Stories
Context definition surrounding the users when
they use the app. Understand their motivation and
desired outcome.

16
Usability Testing

With a better understanding of the user, guerrilla testing was performed at on-shop-goers.
Additionally 3 sets of 5 users selected from company clients database were carefully
screened by telephone. Users was asked to imagine themselves in a specific scenario and to
perform a series of tasks:

-It’s been cold lately and you’re looking for a winter coat. W hat do you
do?
-You see a coat you m ight like. Can you walk m e through how you
would decide whether this is a coat for you?
- You added the coat to your cart, but you realize the size is wrong. How
do you fix that?

Analysis and Problem Definition

Affinity M ap

After reviewing the recordings of the testing-sessions together with stakeholders the
problems and complaints of each user where pinpointed and identified.
Affinity mapping implemented to organize and group pain-points into categories.

2x2 Analysis
Problem prioritization using a 2x2 map helped rank the category of issues by the importance
they have to the business (x-axis) and to the users (y-axis). Assuming that the main business
goal for the app is to drive up mobile revenue, the identification of pain-points around

17
 editing cart items were the most important to the business and users. Those were the issues
targeted in the redesign.

User Testing

Analysis of users’ behavior and patterns related to the

shopping cart in order to come up with solutions.

Editing items in the cart:

Only 1 out of 7 did so without problem
6 out of 7 users tapped the item, which only
brings up a picture.
4 out of 7 users tried swiping left on the item,
which doesn’t bring up the edit option.
2 out of 7 users accidentally deleted their items.
Other issues:
Impossible to edit the size or color of an item
inside the cart.

Ideation & Creation

Lo-Fi UI Sketch .

Mapping potential solutions to each of the pain-

points and creation of rough UI sketches to
encapsulate the solutions.

18
Hi-Fi M ockups

Before prototyping preliminary validation was performed

with another set of users walking through the Lo-Fi UI sketches.

19
Validation and Results

Validation tested 7 users with a working prototype.

The 7 users were asked to walkthrough on how would
they edit quantity and size of items in their shopping
cart.
All of the users were able to complete the tasks without
any pain-points.
The new proposed task flow revealed a good success
rate when users try to edit an item in the shopping cart.
Success rate increased from 33% to 100%.

Results and Conclusions

Through usability testing, it could be observed that users were having issues with item
edition after they’ve been added to the shopping cart. Design improvement in the checkout
process made it easy for users to compare and edit items within their cart.
Enhancing user experience for this process through lowering cognitive friction, which in turn
drove conversion rates.
Bigcommerce Analytics showed a decrease on abandon cart rate from 48% to 28%.

20
hhhhhhhhhhh

21
 22
 23
 24
 25
 CHALLENGE SCOPE Client
BNP
Creating a digital story Design research
Product discovery Industry
A storytelling platform for Content strategy Government
exploring National Library’s User experience design
eclectic collection of medical Interface design Time Span
and historical artefacts. Front-end development 12 Months
Digital–first branding
Responsive design

CHALLENGE

The Portuguese National Library and an exhibition space on their site in Lisbon, approached
LabForm with a challenge: could we engage an audience in both the physical space and online.
They were about to open a new space to merge the library material with exhibition material
together, and also wanted to develop their digital presence.

RESEARCH

In the months before our involvement a lot of different ideas were discussed. One, for
example, involved adding a layer of extra information on top of the objects in the exhibition
space, accessible by mobile devices.
In order to sense check the ideas, we kicked off by asking a question designed to focus the
team: what are the outcomes you want to achieve?
We ran a workshop with staff and got them to brainstorm hundreds of desired outcomes.
From a strict prioritization scoring exercise, three strategic objectives emerged:

26
OBJECTIVES

Engage that audience em otionally

Expose the ‘long tail’ of digitized library content

These objectives shifted the focus away from the physical space. The library had been
investing in digitizing assets over the years and exposing these assets became one of the
principle aims. The new product should lead people into a deeper exploration of the library
content. There was also a desire to create a product that led the way in the cultural arena,
and create an example that other institutions would want to emulate.
By saying no to a hybrid physical/digital product, the Library could focus its resources where
they really mattered. The new digital product could still be used in the new physical space
(perhaps on an iPad) and promote the library’s digital content.
Aware that there was a wealth of cultural expertise around the organization, we interviewed
archivists and curators. We learned about the kinds of emotional experience they were trying
to create in an exhibition. They were often trying to get visitors to meditate on the
human condition.

Ideation

We assembled a team of experts (both external and internal) to brainstorm new ideas for the
product. The workshops were designed to tease out ideas from individuals and then mix
them together in teams.
Having presented back the best ideas to stakeholders, we realized there were two possible
directions for the product. The two approaches were mutually exclusive; and it
was impossible to do both.

1- Focused, curated, gallery-like - a ‘zoom in’, crafted experience of a small number

of artefacts.

2- Exploratory, voluminous, library-esque - a broad, shallow exploration of many objects,

stored in a database.

The stakeholders chose option 1. Something crafted and accessible on the surface was more
likely to act as an on-ramp to deeper, more text-based library content.
With this in mind, we developed a concept eventually named ‘Pathways’. Thematic journeys
through a series of objects or moments in history, much like the exhibitions. The pathway
would take a concept, like ‘pain’, and lead the user through a series of objects and stories on

27
that theme. It would have jump-off points to deeper, more academic library content, for
those curious about a particular object.

28
Exploration

Identifying that we were creating a product which revolved around a “story”, we started
exploring patterns and interactions which we could create to help weave in some of the
National Library assets:

1- Galleries: A pattern which would take you away from the narrative to focus on
curated images based on the section of the narrative you were in.
2- Full Bleed Im ages: Use an image to fill the background of the entire screen as a
device to enhance the narrative and immerse the reader into the story.

Collages
Video
Sound, etc.

29
Sketching these out we married them up to the story to see which patterns would best work
with the narrative.
Could we create a set of reusable patterns, which could be rearranged in different ways,
serving different content while still preserving a sense of individuality to each story?
To make something great a base set of reusable patterns won’t always fit and as you explore
ideas and soak in the story other patterns emerge. Our base set of patterns were useful to
create 80% of our storytelling, however at times we had to create bespoke patterns to fulfill
the story’s needs.
Many of our ideas required animation or interaction. We used a variety of techniques
including sketching, cutting paper prototypes and using multiple people to perform
animations with whooshing sounds, however a sketch can only go so far and asks a lot of the
receiver’s imagination. So we would quickly hack prototypes in the browser with placeholder
library assets to show how that interaction combined with their assets can evoke a
powerful reaction.

30
We had determined that each digital story must harmoniously combine three parts:

The narrative
Our base set of patterns
The National Library assets

Raw materials in hand, we ran

workshops for each narrative, identified
what assets worked best to either
represent the content or to evoke the
right atmosphere. With our assets
running alongside our narrative we were
able to look at our pattern-set to see
which ones served us best.
The assets from the library varied widely
from detailed etchings of a leaf to huge,
rich oil paintings. Each story had to be
designed at a high fidelity containing
the right assets to ensure that the flow
of the (visual) story worked.

Delivery

We created and delivered a system for interactive storytelling, which allowed patterns to be
arranged in multiple ways. This system allowed us to build rich and immersive experiences
and allowed any future stories to be built after our involvement in the project.

31
 Google Blogger Redesign Concept

CHALLENGE SCOPE

Implement material design UX Design

system to bring one of Google Information Arch.
products, Blogger back to life. Visual Design
User Interface
Prototyping

Project Brief: The purpose of this project is two fold:

1. Study and understand how an existing design system works — its philosophies,

aesthetics and interaction principles, implemented across various applications; observe
its weak points and challenge its assumptions.

2. Study existing blogging and social media platforms, where they succeed and what is
missing, not just for ardent bloggers but everyday users who explore online content a lot.
Use these observations to reimagine Google’s Blogger (Blogspot) platform.

The goal was to implement material design system to

bring one of Google’s own product, Blogger, back to life.
Blogger has not received any updates in the past few
years. It’s app still has a simple editor interface, with no
way of interaction with other blogs on Blogspot.

The concept is to reimagine Blogger as a new blogging

platform, something that combines the microblogging of
Tumblr, Instagram, Snapchat and Vine along with the long
form content of Medium or Wordpress and the future
form of multimedia (360, VR, Interactive content) without
the noise and distractions we face in places like Facebook,
and with an interface that encourages content discovery
with its ease of use.

32
But this needed to be m ore than a blatant application of a design system or a
sim ple redesign without serving purpose or addressing any need.

Exploration of the UX and design of the following sites — Wordpress, Medium, Tumblr,

Instagram, Flipboard, Google+, Google Arts & Culture, Google Spaces, Google Travels,
Google Inbox, Google Keep, Google Photos, Google Blog, Facebook, Snapchat, Vine,
Pinterest, Twitter— going through their signup and on-boarding process, integration of
social networks, content discovery, profiles, and user engagement as well as their
implementation of Material Design, on mobile and desktop (if available), noting down the
pros, cons, successful design patterns, interactions and visuals.
With all these observations in mind, I began redesigning Google’s Blogger

PRO DUCT ICO N

Blogger has a very simplified logo, an orange background with a white ‘B’ mark on it. I did
not want to detract too much from this very identifiable mark, but update it to the current
style of Material Design. Adhering to Google’s methodology, I started to craft the logo using
paper and arrange the elements with.

After multiple iterations and going through the current Google Apps’ product icons and the
Material Design Guideline on Icon Design, the logo started to come together.
The background of the logo is mimicking a journal or diary — the traditional medium for
writing personal stories. But this needed to be updated for 2016 and beyond.

Content would vary from magazine style articles and audio/visual to 360, interactive content
and even VR in the future.
The logo needed to represent the boldness and power of the everyday user and their story.
Hence, the final logo is the centerfold of an open book and the ‘B’ is not just ink on paper,
but an entity of its own that has left the bounds of the book and rests at a certain elevation.

33
Information Architecture and User Experience Design

The study of various other blogging platforms and social networks, gave insights on how to
arrange the content and information inside the app and define the user journey.
After some iterations as well as discussion with a few active bloggers and social media users,
I came up with the following sketch structure:

1- Home Screen : Will contain the feed of latest posts from user followings. The
content should be fully displayed in form of cards, except for long-form posts. All
posts can be viewed by tapping to open in full. Users can like, share and bookmark
posts, filter them with tags and other criteria.

34
 2-Discover Screen : Content discovery is one of the main goals of the application. It
should be discoverable via various filters, tags, trending topics and more.
Favourites — All posts must allow bookmark, like, share and adding to a collection.

3- Blog Profile :  One of the most important aspects of blogging is individuality.

Each user wants to customize the look and feel of their blog to best suit their style of
storytelling. Wordpress and Blogger both offer various themes to be used. However,
this would not go well with our design philosophy. Hence, we allow profile
customization via cover images and profile pictures, and use the primary and accent
colors to further tailor the look for a profile and make it stand out (explained further
below in the visual designs).

W ireframes

The wireframe prototypes were used to get initial feedback from other designers and
improved upon the designs.

Navigation Bar

The bigger challenge was designing for Desktop. One of the main concerns was how to
utilize space without using a multi-column feed (like we see on Google+). Along with that,
another design pattern that I had in mind was to make the header sticky for every post in a
feed till the entire post is scrolled through (the way it happens on Instagram’s app). This
however is not easily translated onto the desktop design. Sticking the post header to the
app bar looked clunky and awkward. So after a considering a couple of design patterns and
testing them out by sharing GIFs for feedback.

35
This further pushes Material’s concept of “tactile, quantum paper”. We know that
components can elevate and allow others to pass above or below them. But can we
transform Material asymmetrically to improve content viewing?

USER INTERFACE

I wanted the visual design to be more than just UI components put together according to
some guideline. It needed to serve different use cases and create patterns to improve
content discovery and consumption. The wireframes, prototypes and final design push on
those ideas.

Home Page

36
As a user scrolls through their feed, the header for each post lifts up to the same elevation as
the status bar and sticks there until the post is scrolled through, then it goes back down to
join the footer and scrolls off the screen.

A difference to note between desktop and mobile blog post UI cards is that the share icon is
kept under the contextual menu on mobile, while on the desktop it’s kept on the card
footer. This is because we do not want the user to stray away from the app. On desktop, it is
much more acceptable to switch between applications and browser tabs, but on mobile, any
action that can lead the user out of the app will be disengaging. However, we still want to
provide the option if user chooses to use it.

Discover

This section is divided into 3 parts on mobile , Explore, Topics and Blogs.
Each one offers different aspects to content discovery. Explore shows you the trending posts
and editor picks, or just browse through the latest public feed (that will be curated over time
for you the more you use the app). Under Topics, you can look for the latest trending
#hashtags and hot topics, along with the collection of all the topics Blogger offers to be
followed (this will contribute to the curation of your Explore feed). Finally, in the Blogs
section, you can look at the most trending blogs. Search is always available while you are in
Discover mode to find more content.

The Desktop design is slightly different. Instead of dividing the page into tabs, I created a
single page with scrollable sections.

37
Navdrawer, Favourites and Notification screen

38

Blogger Profile

This is one of the most important parts of Blogger. The profiles need to stand out for every
individual. But it still has to be contained within the same platform and not look like an
external website, so consistency of design with the rest of the application is an important
thing to consider.This can be achieved by allowing the user to add their own Profile Picture
and Cover Image. From there, Blogger will select the most prominent color from the Cover
Image using the Palette library, then match it to closest color from Material Design’s color
palette to beused as the primary color.

Conclusion and Next Steps

One of the biggest realizations while working on this project was that Material Design is not
just a visual style but more of a set of rules for digital interface design. It would evolve
overtime and even go away with certain decorative components like the FAB, which doesn’t
always work, maybe even the whole paper-ink concept. But the underlying principles will be
there to stay. Another issue was how tough it is to follow a set design guideline, its keylines
and metrics and other aesthetic rules. It is always easier to design the components first then
assemble the layout, rather than coming up with components during the main UI design
stage. This will also demonstrate that the Designer should think about different pieces and
components of the app beforehand, during the IA stage.

39
 40