Rob Newport
UX design portfolio
01
2
Keel
Here are some pieces form the projects I have worked on at Keel.
3
Medela is breastcare company which is a market leader for Breast pumps. They have a number of prducts and cater to individuals as well as professionals.
#HowIFlex landing page
3.
We created this landing page for a new range of products created by Medela. The #HowIFlex campaign was aimed at promoting this new range. The purpose of this landing page was to promote this campaign by having information such as, posts from mums using this range. 1.
The page contains 4 sections: The header, the hottest topic of the week, the comments from other mums and Flex products. 1. The header introduced this page ad explained was this campaign was about. 2. This then lead to the hottest topic of the week which was the post with the most likes and some comments from other mums. It also has a CTA to post your own comment on facebook.
4.
2.
3. The third section shows comments from mums. The comments come from Facebook and Instagram.
4
4. The final section leads to Flex products. This allows the mums visiting on the site to explore the range and incentives them to buy these products.
Here are some of the wireframes I produced before creating the example on the prevous page.
For the wireframes, I annotated all the information down so that I could produce it in a more efficient and organised manner.
5
Here I was exploring how the reply component should look visually.
After having chosen the how it will look like, I sketches different layouts we could use within this reply box.
When we got the design, layout, structure approved, we proceeded to style it up. We didn’t spend much time doing this because the project got put on hold.
6
We used the assets which are in use on their website to stay within brand guidelines and also keep this part of the website consistent with the rest.
Here are the mobile version we also created.
7
My role in this project was to assist the UX designer. He created an original layout and asked me to do come up with one too. He incorporated the ‘hottest topic of the week’ section to his. He asked to me see if it was possible to take comments from Facebook and Instagram and incorporate them into this website.
Email template
We were asked to create an email template for this client. A member of the team created a starting point and I was asked to create it and I then suggested some changes which were then out forward to the client. They then got approved and are now being used by them.
We produce for them 2 different templates so that they could have a choice when sending out a newsletter. We gave them a choice because some formats the second version was more adaptable than the first option.
8
Starting point
PFP Landing page
This second section shows off that PFP is a product which is proven to work through the tests it has passed. It gives the viewer an initial sense confidence, which is then reinforced when going through the page. The visual of the product allows the viewer to rest their eyes after the video and can observe it with greater focus. Further information is also available by clicking on the CTA which leads to the online brochure.
The header contains a video which demonstrates what PFP is. This is an appealing form of media which gathers interests from the viewer. For those who come onto this landing page from a Google add (for example), it is a good introduction to PFP.
The third section showcases two videos which give further detail as to what PFP is. Videos are used to do this because it is an engaging medium. They will explain the purpose of PFP by explaining it in more detail. This will show the viewer why they should choose this product over an other.
This is the beginning of the targeted information. Here viewers can choose which healthcare area corresponds to them and get the information which is the most relevant to them. They can click on the ‘find out more’ which will reveal the chapters available for download. There are also links to the products which they will be interested in.
9
This final section allow viewers to download white papers which give detailed information as to why they should trust Medela. This section is used as a reinforcement that Medela are experts in their field.
PFP Product page
This third section reveals more details about the benefits which are outlined in the second section. This part is targeted at people who do not know much about the product and want to gain a deeper knowledge about it. It is hidden because the viewer may already know about the benefits and just wants a quick reminder.
This final section shows the two other products available under PFP. This section is present because one (or both) of the other products could be of interest to them. This makes getting information about it fast and conveniently.
The second section contains short and clear arguments about the product which outline the main benefits of using it. The aim here is for the viewer to very quickly understand why PFP is a useful product. The ‘Read more’ CTA reveals further details about the product.
The fourth section provides the viewer with downloadable white papers. This help the viewer to trust and have confidence in Medela. A link to the brochure is also available so that they can see how this product will fit in their professional day.
10
The header contains a video which demonstrates what PFP is. This is an appealing form of media which gathers interests from the viewer. For those who come onto The aim of this first section is to introduce the product to the viewer. The product is shown at different angles so viewers can get a clearer picture of it. Next to it is the name of the product and a short description about it. There is also a button which will lead them to get into contact with their local sales rep. Landing page from a Google add (for example), it is a good introduction to PFP.
Ebook
We created an ebook for our client. This book collated a lot of their knowledge on breastfeeding and was put in an easy to use format. My role was to check that all details (pt size, colours, images) were correct.
Click here to view the ebook.
I was also asked to assist in the imagery selection. This book is now available in 14 languages, which I copy and pasted into each version of the book.
11
I was also in charge of migrating these books to the new platform of the program we used (Instant Magazine).
02
12
Reader
During my 10 week course at General Assembly I was able to choose a project of my choice and I choose to improve reading articles online
13
I chose to create a better platform to read articles online. I choose this area because it’s an activity which many take part in (including myself) and is one which could be improved on.
I started this project by thinking : The problem I suspect is that people do not always read what they save online (articles, books…). I conduct interviews with people who read articles online aging from 24 to 59.
I distilled my findings through an affinity map and these were my takeaways: •Newsletter subscriptions are rare. •People read more on browsers than through apps •People read both at work and at home •People read for both professional and personal reasons. •People tend to have loads of tabs open
It turned out that saving articles wasn’t the problem, reading the ones which were open on their browsers was.
14
• Younger people don’t always manage to read every article as they have loads of articles open. Older people tend to open fewer articles and read all of them.
15
I distilled my findings to create my persona. I was able to see the most common patternas and see where the most users were in order to design for the majority.
From the scale I was able to create my persona John on whom I would base my project.
Age: 24 Young professional who graduate within the past year. Uses an iphone and knows how to use it pretty well.
Behaviour: He’s out 4/7 nights.(P.H.) He is social and loves music. He reads articles at work to either learn about a task he needs to accomplish or reads articles which interest him in subjects he likes.
Goals: His goal is to find information for work quickly. When reading for pleasure it’s too entertain himself and keep himself up to date with what’s going on in the world.
“I often forget what the links lead too” “I very rarely read all the articles I have open” 16
Name: John
Story: John likes to read articles online.(A.N,M.C,J.H,P.H) He reads for both pleasure and for work just about every week day.(A.N,M.C,P.H) When reading for pleasure he mainly reads about the news. Keeping up to date with current affairs is a habit he has had for a long time and likes to know if anything will impact him directly or indirectly. When reading for work, it is to learn a new term or some information which he needs to complete his reports.(M.C,P.H) He reads on desktop the majority of the time (very rarely on mobile).(J.H,P.H) He reads only on browser because he likes how easily he can navigate between tabs, he feels more constrained on mobile.(A.N,J.H,P.H) He opens many articles everyday but only very rarely manages to read all of them because he always has so many open and forgets what they are about after a while.(M.C,P.H) He sometimes leaves those tabs open for days before closing them without having read them. His main reading time is doing office hours, mainly whilst having short breaks and at lunch for personal reading, but at any time he needs too for work purposes.(M.C,P.H)
I than went onto looking at competitors too see what features they offered.
–Clear level structure –Cross platform access – Can create different groups for content –Ability to annotate articles –Offline reading available – Searching for notes based on tags, group, source,content
– Very complicated to use; i.e not user friendly
–Cross platform access – Extract text from website (distraction free) – Shows you how far you are through the article – Ability to go back to website if wanting too –Offline reading available
–Poor organisation ability
–Sense of community –Having in say for which writer gets paid – Content from other sites and also their own – Offline reading available – Articles recommended to you based on passed reading –Clear navigation –App also available –Save article – Personalise what content is recommended for you – Ability to search by article name, author, topic
– No organisation available for saved articles
–Very simple to use –Easier to digest open tabs –Does what is says –Can reorder tabs
–Not visually pleasing
The competitors combined have most of the features I will be needing. None however have way to organise what you want to read, which is the queue attribute for effective reading.
17
Reflection
User goal: read articles online
Requirements:
Design elements:
He clicks onto Chrome (his browser of choice, he loves the extensions he can download) and goes to read the news as he does every morning. He loves reading it; he likes knowing what is going in the world and in London. He scrolls through the content looking for content interests him and selects the articles he likes(A.N.). He starts reading the first article, about Brexit of course (surprise surprise), he wonders if that is all the UK can talk about at the moment (the moment being for the past 18 months). He goes onto the second article and finds out a term he doesn’t understand, so searches for it(A.N., P.H., M.C., J.H.). He then sees a word on this 2nd article another term he doesn’t know and searches for that one too.
• Access topic he wants to read • Ability to select articles which interest him • Ability to go from one article to another • Ability to search for unkown words
• Button to topics • Search feature • A ‘tab-like’ system • Dictionary
At lunch time he gets his lunch from the fridge (he made it the night before, he wants to save money on lunch so he can buy more vinyls, even though he has more than he can count). When he sits back down at his desk to eat, he browses for articles which are of personal interest((A.N., P.H.); articles about music, about design thinking, about food. He reads them quickly because he wants to go around the vinyl shops for the rest of his lunch break.
• Browse articles of personal interest
• Browse feature
When he gets home that night, he finishes reading one of the articles he started at lunchtime but couldn’t finish because he wanted to read it with more intent as it really interested him(M.C.).
• Finish reading articles which was started on an other device
• Cross-plateform syncronisation
Tuesday he does the same routine. On Wednesday at lunchtime, he gets a notification which tells him he hasn’t read one of the articles he has open (he’s had it since the previous Friday). It was a news article about a new product which interested him, but he has heard all about it from his friend he met over the week-end and he had a look at a similar article during the weekend, so he decides to close it(A.N., P.H.).
• Be reminded of old articles open • Delete article which is no longer of interest
• Notification for old articles • Editable reading list 18
John’s at work on Monday morning, he’s just poured a cup of coffee (instant which he dislikes, but that’s all there is) and sits down at his desks. He switches his computer on and waits for it to load. It’s taking ages but it’s Monday so he’s not in a rush to start (you know that Monday feeling).
19
Having my persona and knowing my competitors allowed me to see how he would use my idea which informed on what steps need to be present and what features will allow him to accomplish this goal.
20
Once I had my workflow I created a very basic paper prototype to see if my flow made sense.
Click here for the paper prototype
From this I created a list of features which will achieve the goal (reading the articles they have set out to read) the user is wanting to do.
Must
Log-in
Search
Explore
Sign-up
Log-in
Reading queue
Should
or
Read articles history
‘Delete or Keep’ notification
Display text and image only
Could
Dictionary
Saved
Dictionary
‘Number of articles read’ tracker
Save articles
Offline reading
21
I used the ‘Must, Should, Could’ method to prioritise my features because it is a new digital product so it doesn’t matter how hard it is to code, these features are what makes is different from other competitors.
3
22
I then went on to the sitemap to know which element is on which level. This helped me to connect the different screens together.
23
I then created more detailed wireframes, thinking where each element should go.
When showing them to some of my users (John personas) the feedback I received was about knowing where they were on the website and how to use the reading queue.
“Top section could be better”
“No button to search is confusing”
24
“How do I get back to the previous menu ?”
“Can I hide the list ?”
I then revisited my wireframes and updated them.
Easier navigation
25
The header has been improved
Improved search button feel Simpler sign-up
26
To see how Reader works click here
03
27
Food waste
This project was an RSA competition brief. Our aim was to tackle any food waste problem, in any way we wanted.
28
FP
FoodPlan is an app which helps you to waste less food by knowing what you’re going to cook and what food you have at home (no need to buy food you already have).
What if ...
The Benefits
Supermarkets helped you waste less food through FoodPlan.
Can easily be achieved if the supermarkets agree to work in conjunction with FoodPlan.
Loyalty Card
Information is easily accessible.
Waste less food Save money.
Meal planning is a simple way to tackle food waste.
Reduced energy and resources wasted Reduced carbon footprint.
Improved image Increased brand loyalty.
29
The technology already exists.
The journey
Select meals at the beginning of the week and the ingredients are added to the sopping list.
5.
Meals selected shown when cooking.
2.
Check stock before shopping and deletes food he already has.
6.
The app indicates which recipes should be used first based on expiry dates.
3.
Information on screens informs of expiry dates and quantity.
8.
Press ‘Cook’ button once the meal is selected to update the stock list.
4.
Updates stock list information (expiry date, quantity) through QR code on the receipt or by scanning a loyalty card.
9.
His stock list is now up to date and he can check it when he wishes.
30
1.
This is the cooking screen (pretty explanatory).
Shopping list, it tells you the quantity you have of each ingredient and how close it is to expiration.
31
This is the recipe screen, it shows you the recipes you have selected and informs you as to which ones should be cooked first.
Thank you