Emma Lucy

Hello there. I'm a freelance UX designer/ architect, with a little Interaction Design, UI Design, and Development thrown in for good measure. I want to make interesting things, work with great people and solve big problems. If you’ve got ideas you want brought to life, take a look here and get in touch.

[emmalucybevanxd]

Agency/ Client: BYND/ Undisclosed Project: SpreadBetting Website & Account

Date: December 2018

Skills: Competitor and heuristic site review, stakeholder and customer interviews, customer usability testing, user journeys, process flow, sitemap, page description diagram, sketching, wireframes, Figma prototype

Project Overview: The re-design of a marketing website and customer account section, following a re-brand for a Spread Betting company. The project had very tight deadlines, and included, within a two month period, research, UX review and competitor analysis, IA, primary category page design, template and component design.

Challenges: Designing pages - the narrative, hierarchy, template and components - without content or an idea of content strategy, as well as working with legacy technology, and an undocumented API, not previously used by the client’s developers.

Goals: Re-design the marketing website, with a focus shift from expert spread betters switching from other providers, to attracting novice users who would be open to learning the skills of betting on the stock markets.

Process: I began by trying to understand a very complex and niche product, conducted a UX expert review and competitor analysis, wrote a short survey, and conducted customer & stakeholder interviews. I created very simple pen portraits, based on potential customers’ experience with the product and wider subject area, and basic User Journeys for each one. I looked at the existing taxonomy/ Information architecture, and  created a brand new IA framework (without an official content strategy) and sitemap. This was to be able to develop a page by page narrative to inform the content hierarchy, based on explaining the concept of Spread Betting to each persona, expanding this to include supporting pages, such as “About us”. I then looked at existing content, with a gap analysis, and began a Page Description Diagram to aid the copywriter in writing content to fill out and refine each of the main landing pages. 

I then re-designed the sign up process to eliminate any unnecessary steps, and allow users to very quickly sign up for a simple account type. This meant a wider audience could be served premium, and more relevant, content to increase their knowledge of SpreadBetting, before committing to the full live account opening process. Users were always offered a primary and secondary action at each step, and could then choose to enter the full live journey, with prior knowledge of what would be required.

I also looked at the account dashboard layout, as well as basic templates and components that could be re-used across the site.

[emmalucybevanxd]

Client: Scrum Genius Project: ScrumGenius platform

Date: September 2018

Skills: Architectural platform review, Sketching

Project Overview: A very quick consultancy for a start up with a platform to manage sprint reporting for distributed teams

Challenges: Understanding the platform, and suggesting helpful improvements in a couple of days to a one team founder/ developer.

Goals: Contribute a number of UX ideas to improve and simplify the onboarding process and reports page, and UI suggestions for the overall cohesion of the platform.

Process: I began by looking at the overall IA of the app to improve the structure of the platform, showing that the primary navigation could be simplified dramatically. I then looked at the onboarding experience from each different connected app, and made suggestions for layout and copy on the set up page. Finally, I looked at the layout for the reports page, designing variations for minimum and maximum number of reports and content.

[emmalucybevanxd]

Client: Personal Project: Logo and branding

Date: August 2018

Skills: logo design, branding

Project Overview: Create a logo and branding elements for my own personal brand and freelance business

Challenges: Following the creative process enough to iterate and come up with something I felt was right for me, and of which I was proud, and stopping at the right point was difficult, but I felt I hit the right balance. I had already developed a logo that I was happy with, at one point, but decided that I could push it further. And I’m glad I did.

Goals: Create a logo and brand look and feel for use on print and digital materials that was in keeping with my brand personality and reflected my business in a professional manner.

Process: After attending a front end development course in June 2018, I decided that I would be marketing my consultancy services as my own personal brand, and beginning to include more UI and branding design, as well as beginning to build HTML/ CSS/ js prototypes as services to clients. 

I needed a personal brand to do this, so began to create shapes based on my signature. I iterated on this idea over and over, using different brushes using the iPad Pro and pencil, removing more and more aspects until I had an abstract shape that was reminiscent of my initials, but looked like a really strong logo stamp. This could then be included with different styled backgrounds and colours to depict different parts of digital or print collateral (or tattooed on my wrist, as I decided to do last minute whilst on holiday in Berlin. Conviction in my creative outputs at last!)

[emmalucybevanxd]

Client: Invoke Recruitment Project: “The Business of You” branding

Date: February 2019

Skills: Branding, Logo design, campaign

Project Overview: I was asked to create a sub-brand for a campaign for Invoke recruitment, a bespoke recruitment consultancy, specialising in Marketing. The campaign was all about looking strategically at one’s career as a business would.

Challenges: The client had to maintain their original brand, that had been quickly put together by the company building their website, but without any main brand documentation, brand values, copy or tone of voice they had decided to brand a campaign in a complementary way.

To add complication, there were differences between colours and fonts used on the website and in the marketing tool used for creating social assets, and even inconsistency in the website itself. With no brand guidelines, I had to investigate all of the differences, and try to create one source of truth for the original brand, as well as the new sub-brand.

Goals: To create a separate, but linked, sub-brand, utilising a supporting colour palette and similar typography, but with a fresh approach

Process: I began by sketching ideas that the campaign title evoked in my mind; celebrating yourself and your career growth. After sending over a few ideas, the client’s representative mentioned that they wanted something a little more traditional and sent over some examples, so the design took quite a different path, and I learned an important lesson on insisting on examples from a client, before starting, when working remotely and direct client meetings aren’t possible.

I based the colour palette on the existing branding in the website, looking at using a complimentary colour to the existing main brand colour, and using that as the sub-brand secondary colour, along with a range of warm greys. I used the same fonts as the main brand, and documented the differences and similarities I found across all of the existing digital assets.

I then took inspiration from the examples sent across, used the concepts from my original ideas around growth and nature, and came up with a few more logos. The client decided on one direction, so I then created all of the variations, and put together Brand Guidelines within their marketing software - Canvaa - as well as some assets and templates for them to use in social media campaigns.

[emmalucybevanxd]

Client: FT/ Nikkei Asian Review Project: Nikkei Asian Review site

Date: December 2017

Skills: running workshops, card sorting, IA/ Taxonomy, sketching and wireframes for templates and component design on the news site and editorial CMS,  and an InVision prototype, UI design

Project Overview: Re-design and re-platforming of the current magazine website for Nikkei Asian Review, including designs for the CMS used by the editorial team.

Challenges: Cultural and language barriers made things a little more difficult, as well as having an external development team. Running workshops with the Editorial Management team proved to be even more difficult. As they were extremely busy, they were frequently unable to be fully engaged and sometimes not able to attend workshops. Feedback was given separately, and frequently didn’t take into account work that their team had undertaken.

Goal: Building out the customer-facing news site, bringing it more in line with the magazine look and feel, to appeal to potential new subscribers, and additionally design the CMS and publishing workflow

Process: I began by conducting a thorough UX and Competitor review of the existing site and presenting the findings to the senior editorial team, participated in interviews with existing, and potential, customers in conjunction with the Research team, and ran IA/ Taxonomy workshops onsite with the client’s Editorial Team. I then took outputs of these tasks and began designing templates and components for the news site, working closely with the UI designer (as well as taking over the final UI design items) and the external development company. I worked on how to map existing content from the old to new IA, and designed layouts for the CMS, based on the publishing CMS product chosen, integrating an updated editorial workflow.

[emmalucybevanxd]

Client: Foxcoast Project: ‘Give Me Some Paw’ branding and Logo

Date: August 2017

Skills: Branding and Logo design

Project Overview: The second project for Foxcoast, was a branding/ logo solution for one of their first projects their building - a pet accessory service.

Challenges: Achieving a brand feel that was both unique and quirky, without being too obvious

Goals: Design a logo, provide a colour palette and some brand assets to the client to build the website and platform for the service.

Process: My design process involved sketching ideas on paper, based on the client’s requirements, the business and brand’s goals, and what the name evoked for me. I then moved to the iPad Pro and Pencil to get explore further with different layouts, ideas and shapes. Occasionally, as happened here, the different brush and pen strokes available on the iPad with the pressure sensitivity, lent something to the overall feel of the design, and usually tend to start suggesting further ways to explore. 

I’ll often think about the types of colours and combinations that evoke the ideas the client has described about the project, and then move to a tool such as Coolors for colour palettes. I use a font tool to see what fonts might work with the sketches I’ve drawn. When I had a rough idea of what worked with the paw design integrated into the word “Paw”, I took the sketches from the iPad into Sketch, traced over them with the pen tool and adjusted each one, until the desired level of fidelity was achieved.

I then used the colour palette to try out different combinations, along with multiple tweaks to the positioning of each element in the logo, before deciding on few to present to the client.

[emmalucybevanxd]

Client: Foxcoast Project: Branding and Logo

Date: July 2017

Skills: Branding and Logo design

Project Overview: This was a logo and branding project for a small agency, just starting out with front end development and design, looking for a traditional English aesthetic, mixed with a West Coast U.S. ambition.

Challenges: Combining two different ideas and aesthetics to work together in harmony was difficult. The client briefed the concept of using a fox to represent a traditional English aesthetic and a surf/ sea aspect to represent the affinity with, and desire the company had to be in, the Californian tech scene

Goals: Capturing the correct feel for the logo, to meet the client’s expectations and create something that blended both ideas well, and didn’t come across as too obvious or cartoon-like.  

Process: My process for branding is similar to that which I use for UX, but involves less structural tools and methodologies, and is more about sketching feelings and thoughts about the words, imagery and ideas on which a client has briefed.

I began by researching visual aids and imagery, then sketched foxes and surf scenes on the iPad pro, to get a feel for creating the objects that could potentially be included in the logo. I looked at different colour palettes that could be used, based on one main fox colour, and one main ocean colour. 

I then created the fox, surfboard and wave shapes in vector format, to begin manipulating them as felt right. I tried different fonts for the logo itself, and once one was selected, I began refining the positioning of all the various items to create a full “Scene”. 

I began refining the logo, stripping back items until it was at it’s very simplest, and could be represented in different sizes and formats, and still be understandable.

For other branding/ logo projects, if it fits the brief, I will also sketch how the brand name or positioning statement can be laid out (sketched/ hand lettering on the iPad), and how different aspects of it can be arranged to suggest priority and hierarchy of brand values, later moving to using actual fonts and see what feels right. Using different brush types on the iPad sometimes suggests new shapes and forms that produce whole new ideas.

[emmalucybevanxd]

Client: FT Project: B2B Knowledge Manager & Syndication Platform

Date: May 2017

Skills:  Workshops, sketching, UI design,

Project Overview: UX/ UI hybrid role to design two B2B products

Challenges: On the KAT project, contributing effectively to a project nearing completion, with lack of documentation, and confusing architecture and functionality. On the Syndication project, lack of support for the need of the product, meant a lack of development resourcing, so having to design solutions to be built and implemented sequentially.

Goals: KAT project - Contributing effectively to, without interrupting or slowing down, development for the MVP phase 1. Looking ahead to phase 2 of the project, introducing solutions to improve UX that were achievable by development, and necessary for customers.

Syndication project - Designing for the correct balance of breaking user stories down to the most basic elements to be built as simple, self-contained units of functionality, but not so simple that they were unusable by customers.

Process: KAT project - I began by sorting out the existing documentation, making simple things such as colour palettes consistent across design files and the code base. I looked at making minimal changes to the existing structure, functionality and layout, and supporting the internal and external development team. I then began on work for phase 2 to introduce new functionality, where users would be able to create sets of related items in different categories. I created diagrams of the relationship between all elements in the system, to enable me to work out how users would best access functionality, depending on which tasks they were trying to complete. I then created wireframes and final UI designs for all new screens.

Syndication project - I facilitated a workshop to review the existing syndication platform, where we looked at every screen in the process and reviewed what worked and what didn’t and how we could make improvements. I then worked with stakeholders for contributing platforms to understand what impact any changes to the Syndication platform would have elsewhere. I then created a series of scamps to illustrate what small, simple things could be built initially, and what additional functionality would be useful and could be backlogged for a second phase, if necessary.

[emmalucybevanxd]

Client: Thryve World Project: Activity search and discovery platform

Date: November 2016

Skills: IA, sketching, wireframing

Project Overview: Thryve is one place to search for adventures and activities, find out where you can do them, how to do them, who can help and what equipment or skills you might need to partake in these activities.

Challenges: Creating simple templates that could cater for different types of category of item, (activity, locations, specialists etc.) allowing for cross activity discovery, regardless from which aspect a user began their journey (e.g. they are looking to go to Cornwall for a holiday, so begin with location and discover Kite Surfing, or maybe they are really in to to Bouldering and look to find the best location to do this,) and a fixed budget and timeline project meant working in waterfall with only a few meetings with the visual designer. Creating a fully responsive site in a short timeline was challenging, but rewarding.

Goals: Produce an IA with sitemap, templates and reusable component wireframes to work for existing content and be flexible enough to enable future growth of the platform.

Process: I began with a content review, and mapped out the current ecosystem, including the relationship between all the parts of the system. I spoke to all stakeholders about locking down the nomenclature for all the different items, as it sometimes got confusing between what was considered an “activity”, and what an “adventure”.

I then looked in to how different types of persona would approach the different aspects of the discovery process - would they want something delightful suggested? Would they know exactly what they wanted? Or somewhere in between? I created a matrix to distinguish the tasks users would undertake depending on if they had a specific activity or location in mind, both specific activity and location, or neither and wanted to be inspired. I looked at the IA, and worked out the best way to organise the different aspects of the site, to allow for future platform growth.

[emmalucybevanxd]

Agency/ Client: Beyond/ Girl Effect Project: Internal tools dashboard

Date: May 2016

Skills:  Sketching, wireframing, client presentation

Project Overview: Designing a dashboard for internal tools and communication activities for the distributed teams at the charity Girl Effect.

Challenges: UI Design or Development resourcing wasn’t fully available until after the UX stage had been completed, due to this being a fixed price, waterfall project, so it was difficult to work without a full set of technical requirements

Goals: create a browser home page dashboard for staff in distributed teams across several offices, globally, with quick access to frequently used tools and communication software.

Process: I worked on requirements with the client for what activities and tasks staff were required to undertake, how frequently they did them, and which process would be covered by third party tools or require custom-built elements. I created a loose framework for the dashboard, based around a two-dimensional matrix to make decisions on where to locate different tools. This was based on three categories of tasks - “find”, “share” and “understand”- and the frequency/ importance of task - immediate/ frequently undertaken, day-to-day tasks and longer-term/ project-based work. For each “region” of the dashboard, where these categories and frequency met, a software/ tool to match was located.

[emmalucybevanxd]

Agency/Client: DigitasLBi / AstraZeneca Project: Trace Patient platform

Date: November 2015

Skills: IA/ Taxonomy, Dashboard design, Complex Web App

Project Overview: Designing a dashboard and upgrade to pages in a content management and publication platform for the creation of patient-facing materials (print & web) in multi-strand clinical trials.

Challenges: Understanding the breadth and depth of a complex product and project in a short space of time. 

Goals: Creating page layouts and structural diagrams, and deciding what was appropriate and able to be built for MVP. Working closely with the dev team, to ensure multiple variations (such as translation, and drug combinations) could be added in to the material creation process, and a dashboard to track the progress of these materials was built.

Process: The Digital Innovation Group (DIG) at DLBi had already built a content editing and publishing platform, which allowed an administrator to create content, schedules and clinical procedure descriptions, in order to produce printed and online materials for individuals taking part in clinical trials. It was being used successfully for one clinical trial, but through user testing and the request to use the platform for multiple clinical trials, additional functionality was identified.

This project was three weeks holiday cover, so that the project didn’t stall due to tight deadlines. The main aim was to overcome some of the UX challenges involved in building out a platform that would take one entity - a single trial master content object, (with the ability of the platform to publish it as a self-contained, patient-accessible website, or printed as a personalised booklet for trial participants) itself consisting of a large amount of content - and create multiple instances for content variations. Across one trial these could be multiple branches due to variants such as different drug combinations, several language translations, cultural specificities and approval boards, while all the while allowing an admin to manage, track, and edit each entity instance in it’s various stages of completion before approval.

This was a challenging and exciting project.

[emmalucybevanxd]

Agency/Client: AMVBBDO/ Guinness Project: Guinness Storehouse Pitch

This was an intensive pitch preparation, which was essentially the ux for the full site. It consisted of user journeys for 4 “types” of persona (emotional attitude towards browsing/ purchasing) as opposed to traditional personas - fast emotional, slow emotional, fast logical and slow logical - information architecture and production of existing sitemap with colour coding to show shift to new sitemap/ architecture and highlighting sequence of pages for each difference user journey, sketches and formal wireframes of most pages within the site, including the purchase journey on both desktop and mobile.

AMVBBDO won the pitch!

[emmalucybevanxd]

Client: Personal Project Project: EmoTweetion

EmoTweetion (Emotion in Tweets) began life as an experiment, as I was looking to learn Processing and visualise large data sets. A large part of my academic research has been in Emotion in HCI/ Affective computing and exploring wether volumes of data can be used in Sentiment Analysis (even on a very rudimentary level) seemed a really interesting idea.

EmoTweetion looks at the Public Stream Twitter API, filtering for a large set of keywords, grouped into categories (using the 8 emotions from Plutchik’s emotional model) and “strength” of emotion (strong, default and weak, e.g. Rage, Anger and Annoyance.) It then visualises each tweet that matches a query by: 

creating a bubble to represent each Tweet that matches a keyword, bursting from the origin point in the centre of the emotion wheel out at the angle of their category on the wheel

colouring the bubble in its respective category colour

sizing of, and allocating speed of movement to, the bubble, determined by its ‘strength’

Additionally, the petals of the emotion model itself are a subtle, glanceable mood indicator of Twitter, as the percentage of tweets allocated to a particular category at any one time, are represented as shades of grey (white being 100%, and Black being 0%)

The original app, allowed a user to place themselves within the context of the Twittersphere by giving them a place to enter their name and tell it how they were feeling, which then gave them their own named bubble and added them in to the category that their tweet matched. This was to counteract the idea that when people feel a certain (often negative) way, they are alone in their situation. This is more often, not the case and by sharing feelings, users could see (in an anonymous way) how many others also shared their feeling. You could also mouseOver any Tweet to read the contents of the bubble (as long as you were quick enough!)

Updates to this app are on-going, to add back in a lot of the functionality that moving from Processing 1 to Processing 2 removed. Processing 3 still runs the app with no problems using the updated, Processing 2 code. 

Several improvements, bug fixing and additional functionality are planned, including accounting for track limitations - essentially where a proportion of matched tweets are above the limit you’re allowed to view - “Ghost Tweets” (the random white translucent ones,) adding back in the original mouseOver functionality, fixing some odd behaviour with MouseOver and building the whole thing from scratch in Node. (There doesn’t seem to be any other way to get it live on the web!)

[emmalucybevanxd]

Client: MA DfIM Project: Emotizoa

One of my MA projects was focused on Emotion in Human Computer Interaction - Affective Computing. I had an idea about living, breathing, emotive shapes that ultimately one day, would be a recorded visualisation of a user’s physiological recordings throughout the day, made into living digital art that would evolve to learn the wearer’s emotions, becoming more and more accurate with input from the user.

A fellow colleague was intrigued by the idea and asked if they could join me to build something interactive. And so began Emotizoa - a digital interface for the non-verbal communication of emotions. It is based on Plutchik’s emotional model, featuring 8 basic/ universal emotions and represents each one as a moving, breathing creature, hibernating until they are interacted with (emotional protozoa = Emotizoa!) When brought into the ‘active’ area, they come alive and combine with each other to form secondary emotions.

We were asked to present the project at Create09, and had the opportunity to build a touch-screen unit and re-purpose the app to work with it.

Here’s a short video of the interface on the touch screen we built at Create09

[emmalucybevanxd]

Client: Create09 Conference Project: Emotizoa touch screen

Here’s a short video from Create09 of the Emotizoa interface on the touch screen we built

[emmalucybevanxd]

Client: Brand Fuel/ Cocoon Networks Project: Cocoon Network London

Cocoon Networks were a new entrepreneur facility and service that brought together a co-working space, mentoring, labs space and funding. While finishing their physical building, they employed Brand Fuel to create their brand design and corporate website to build interest in the service before it launched.

I created concept diagrams to communicate the articulation of the brand into IA for the site, put together sitemaps and PDDs, created some templates and a few mock-ups of pages to hand over to the visual design team.  

[emmalucybevanxd]

Client: JWT/ The Army Project: Army Officer Recruitment microsite

This was one of the nicest projects I’ve undertaken so far - mainly because ALL of the content already existed in print form. It’s very rare that clients provide actual, real content, and this was luxurious! It didn’t mean it was easier in all aspects. It gave me the opportunity to review all of the content, properly work out how to realise it in digital form, suggest copy updates and concentrate on displaying all of the content. 

This was a fully responsive project (across three layout sizes), with 7 days to work out IA, page layout and build a prototype.