User interface, user experience, digital product design.

User interface, user experience, digital product design.

hello@christianharries.com | 07803 373 248

Christian Harries: Christian Harries:

A bit about me

ExperienceSkills Process

Christian Harries27 years old, UI/UX and Digital Product Designer

With a user-centered approach to design, I like to explore how people interact with products and products interact with people. I am always looking at why products are the way that they are and by putting the user first I design products that are functional, beautiful and able to provide the user with the best experience.

Additional information and references available via LinkedInhttps://www.linkedin.com/in/christianharries/

Adobe Creative Suite: Photoshop | IllustratorInDesign | Lightroom Muse | Premiere Pro

Microsoft Office:Word | Excel | Powerpoint

Google Suite:Docs | Sheets | Slides Forms | Analytics

Prototyping: Sketch | XD | Figma Framer | Marvel | Invision

Languages:HTML | CSS | SQL

Other: Zeplin | Principle | Origami Cyberduck | Atom | Buffer

Learning: After Effects | Spanish

Concept mapping Interviewing/transcribing Competitor analysis Business model/Lean canvas

Affinity mapping Personas/Proto personas Tasks analysis Experience mapping User goals/stories Jobs to be done Problem/Hypothesis statements Design studio

Storyboarding User flows/wire flows Low/mid fidelity wireframing Paper prototyping User testing Information architecture High fidelity wireframing

Atomic design Design guidelines Research documents

Arch Design: Design Director (2014-2018)Leading the creative team in designing market-ready products for businesses of all sizes.

Experience Haus: Digital Product Design 003 (2017)Learning about the principles of digital product design, research and stakeholder management while applying these skills to a real client looking to launch/develop a new product.

SET Squared: Pre-accelerator program (2017)Pre-accelerator program focussed on making our business financially viable and generating enough user need to be scalable.

Fast Forward: Pre-accelerator program (2015)Six week pre-accelerator program introducing us to business model generation, marketing and branding. The course finished with a pitch to over 60 investors, grant providers and incubation managers.

Ravensbourne: BA (Hons) Design Products (2010-2013) Throughout the course, we learned how to solve problems using design thinking, research and user testing. I have worked with many clients including Barclays, Marks and Spencer and Airfix.

Key aims

01: Make sure our courses are always affordable and high quality.

02: Enable anyone, anywhere to turn their talent into a 2nd income.

03: The average online course completion rate is 8 percent, how can we drive this up?

Experience Haus has been taking their “Digital Product Design” course and creating a smaller digital version of it.

After building the course on Teachable they have found some problems/things that could be done better, because of this they want to use the same techniques that they teach on their course to create a new platform with a better UI, features that people actually need instead of just want as well as a proper mobile experience.

Create a new platform where people can easily create online courses that are affordable, high quality and have high completion rates.

Primary research

“If you got a certificate at the end of it I may pay a bit more, I wouldn’t want to show it to anyone or anything but it would be nice to have digitally.” - Christopher Christoforou

“If I were to make a course I would want it to be structured like a blog post with images and text.” - Daniel Kemery

11 Students 12 Teachers

13Interviews

Primary research

82% of people have taken an online course.

68% of people say price is the main factor when deciding to take an online course.

What would persuade you to do a digital course over a physical one?

What benefits would you offer students outside of the course content?

31% of people have taught a course before.

Of the people who have taught before 100% have taught a course in person while only 12.5% have taught digitally.

2Surveys

What would persuade you to use a specific platform?

“Ease of use/accedibility.”

“Lots of visual aids and emphasis on application.”

“The site would need to be easy to navigate and look solid.”

“How much you would get paid but ultimatly the time comitment involved. If it required less time or was adaptable around your life then that would be better.”

Defining the problem I realised that while the

student experience is important the teacher

experience defines what kind of courses

get made and thus how likely students are to interact with

and complete them.

With this in mind I was able to go forward

with the design of the interface knowing it was fit for purpose.

“As a user I would like to earn more money so that I can afford a better lifestyle.”

Experience Haus needs a way to let teachers see how their students are doing, because it will help ensure students complete their course.

Design and testing

While testing the idea of bolt-on services to make courses more affordable I discovered that people still expect a certain amount from any platform.

“I don’t think you should have to pay for that, you already paid for the course right so why do you have to pay to talk to the tutor?”

Final outcomeAfter two rounds of design and testing I made a high fidelity

version of the interface with a revamped

user flow.

“I would debate even having custom text

because I think it would be a bit too

much for people…It’s kind of like

customisation for the sake of it.”

“I like it, it’s straightforward,

for that amount of information you

kind of do need to have it straightforward

otherwise it gets a bit too jumbled

up and intense.”

Feedback

Key aims

01: Develop an enterprise product that can grow with Ravensbourne.

02: Embed TBCP into the learning curriculum and college’s infrastructure.

03: Allow pedagogical development through staff using the platform.

Ravensbourne wanted to build a searchable, digital archive of work produced by both Undergraduate and Postgraduate students as well as staff research papers.

After they had built an initial UI we were brought into develop, test and expand upon the platform until it was ready to launch to both staff and students for use within Ravensbourne.

An internal, college-wide application where both students and staff can access past Contextual Studies submissions including dissertations and research papers.

The initial brief called for an existing design

to be developed into a prototype that would be

rolled out to students, however we quickly noticed some issues

with the design that had to be addressed first.

From not having established where the

words for “browse” come from to not

being able to properly add metadata to new

files the design clearly needed a round of

iteration and testing before moving onto

development.

Initial design

author

author

course

course

tags

tags

tags

tags

author

2

3

4

“The screen is only so big so if you have too

many terms users would have to scroll a lot, it wouldn’t bother me to scroll down the

screen once but if I had to do it two

or three times that would get annoying.”

“It’s not a good idea for students to search

via grades, we live in a society of mass information, we are

more concerned with them getting access to

quality information.”

User testing

16Interviews

After testing a demo version with

staff we made it available in the

library to aid 2nd year students with

their dissertation preparation unit.

Student demo

As the project grew over time a

structure of icons, symbols and rules

were created to ensure that any new pages and features would

remain consistant throughout the

platform.

Bachelors

program

photography in badly lit places

4

Atomic design

As TBCP started to scale we built admin

tools for the core Contextual Studies

team to update it with new work as well as managing user permissions for the constantly rotating roster of sessional tutors

and new students.

Developing an enterprise product

Having given 15 presentations, 5 workshops and

onboarded 1300 students over the period of 2 years

TBCP is becoming a university wide

resource that is being integrated

into the curriculum.

Integration into the curriculum

Key aims

01: Explore how Ken can use data to create a better music experience.

02: Have a complete visual prototype ready to be filmed in 12 days.

03: Develop the prototype further based on user feedback.

Using Artificial Intelligence, Ken reads your body in real time to understand the way you feel about music. Using this data Ken curates playlists of music to help maintain or change your emotional state.

In a small space of time, Ken needs a working prototype that can be used during filming of their Kickstarter video.

Create an app that uses data from wearable technology to automatically suggest playlists of music based on your emotions.

As the prototype had to be made in a very short timeframe we

quickly discussed the user goals and turned

them into a low fidelity interface.

User goals

As a user, I would like to

train how the AI works so that I

can ensure it understands my listening habits.

Listening to music

Ken’s primary benefits come from working in conjunction with the smart headphones and wristband, however it was still important develop a product that people can

use without having to rely on them.

Playlists

In additon to the smart playlists Ken creates, users can make their own ones based on specific song titles, genres of musics as well as filters that can

grow your playlist over time.

Transparent dataUsers are able to see

exactly what data Ken collects about them

over time.

By digging deeper, they can see in-depth

information on their listening habits such as the location, time,

data and emotions felt while listening to

a particular song.

Swipe right to navigate through more content.

Song information

Places you havelistened to the song

Emotions felt whilelistening to the song

Dates you havelistened to the song

After linking all the screens in Marvel the prototype was filmed

in context for the Kickstarter video.

Kickstarter video

Further development

While listening to a song users can adapt the bass to match your environments background noise. In addition they can manually train Ken to recognise their listening

habits, this helps Ken create smarter playlists.

Each song changes the colour of the background

to a gradient of the artwork's two most prominent colours.

In addition, a set of brand colours are

applied throughout the app to visualise

different types of data.

Colour

Key aims

01: Create an app that can be used to gather user research.

02: Educate users about the effects of plaque and dental health.

03: Turn the act of checking your dental health into a habit people want to do.

Plaque Checker is creating a way for people to check their dental health on the go with a proprietary algorithm that can detect the level of plaque on someone’s teeth by analysing photos taken within the app.

Plaque Checker needs a minimal viable product to gather user research as well as to show to potential investors during their seed round of funding.

Combining digital design with a proprietary, state of the art algorithm to give people a way to get high quality dental advice on the go.

ResearchTo help take better

photos of your teeth Plaque Checker was

creating a product that fit on to your phone.

I researched into the different types of phones people own

to ensure they would cater to the largest possible audience.

After collating survey results, website findings

and statistics from the Raymond James report

we saw that the most popular phones to

design the mouthpiece for were the iPhone

6S and Galaxy S6.

109Survey

Responses

46.3%

7/7 6/7

54.1%

Apple

iPhone 5, 6, 6S, SE, Galaxy S6

iPhone 6 Plus, 7, 7 Plus, Galaxy S7 Edge

Apple

Android

Android

49.3%

24.8%

What brand phone do you have?

Of the people that were planning on upgrading 50% of them would choose an Apple phone while 31.25% would choose Samsung.

Of the people that were planning on upgrading 48.7% of them would choose an Apple phone while 46.7% would choose Samsung.

Which phones do companies supply cases for?7Websites examined

What brand phone do you have?

Sketches

As part of the interface a few visual assets had to be created

including icons and banners.

Visual designAs Plaque Checker’s

brand is about health and wellbeing I chose

to reflect that by using soft colours and thin

line strokes within the illustrations.

As the nature of some medical conditions can be unappealing to see through photography, illustrations are used primarilly throughout

the app.

Health education

For those who want to learn more about dental health a series of short articles and videos is accesible within the app.

Purchase products from partner brands

Tracking progressOver time users

see their progress charted both as

weekly reports as well as a gallery of

previously taken photos and scores.

Key aims

01: Redesign the interface to be more visually appealing to users.

02: Restructure the user experience to make using TeamXp seamless.

TeamXp provides learners and audiences with a unique first-person view of an unfolding interactive narrative. Players make decisions within experiences that are either self-paced and fully automated or facilitator-led with a human in the loop.

As the product is targeted at large-scale companies the interface needs to be redesigned to make it feel more like an enterprise product that is worth its large price tag. 

Redesign the interface and experience of a scenarios-based training application to make it feel more like an enterprise product.

UX ReviewOne of the main

challenges users often faced was not knowing the difference between design and live modes as the changes aren’t

visual until you perform a specific action.

Additionally, on small screens there isn’t enough space

to show all of the icons and no way to

navigate horizontally.

Information architectureThe menu items

were reorganized into groups based on the context in which they would be used.

By clicking on the ‘Library’ icon you

see all the scenarios you have made, the libraries associated

with them as well as options to edit them.

Changes the workspace

Sharing between the editor and facilitator

Actions that can be done in any workspace

Secondary menu for accessing information about your scenario

Adding contentThe ‘Content’ icon was replaced by a

‘+’ button and moved to the whiteboard, this

was not only to save space but because

contextually it made more sense to have it in the whiteboard

where all the scenario’s content is displayed.

Design structureBy standardizing

elements including text, buttons, and colours I was able

to quickly create an adaptable interface.

Users can change the device preview to have their own phones appear.

Active

Backgrounds

Static

Title DinPro Medium 24pt

LabelDinPro Medium 12pt

SubtitleDinPro Regular 16pt

Implementation Conducttr has begun

to slowly roll out UI updates to TeamXp.

Additionally, they are using the new

interface design as a guideline when

adding new features.