portf olio

Size: px

Start display at page:

Download "portf olio"

Jane Lawrence
5 years ago
Views:

1 portfolio

2 MY ROLE is to work within cultures and advocate for users and usability. I have recommended design changes to companies while working at Checkealos (a user experience testing company) in order to help retain, engage and increase their clients. I did this through a series of A/B testing and user experience analysis with the Checkealos team. As a designer at Checkealos, a company started in 2014, part of my challenge has been to establish and implement user experience orientated designs, tools and process to guide and help grow the Company. As a core member of the design team I helped inform cultural change and my work has helped convince various companies see that planning for usability can be part of good development practice.

4 I am Isoken Omusi-Ehue aka ICE As a UX Designer and Researcher I have led the UX and visual design for a start up company rebranding their identity. I ve helped devlop website and app launch in a fast-paced agile environment. As well as helped to analyse companies UX prformances.

5 My Tool kit Here is my UX toolkit for creating innovative and user-centred products. PROCESSES Prototyping Lean & Agile UX Creating Personas Information Architecture Wireframing Site Mapping Experience Mapping Affinity Mapping User Journey & Flows Low, Mid & High Fidelity Design Studio SOFTWARE Sketch Invision RP Axure Photoshop Illustrator Keynote Proto.io SOFT SKILLS User Research User Interviews Empathy Efficient Communication Listening Team Work Presentations Client Disscusion

6 Contents Checkealos Website Misty Brand attributes Checkealos App

7 RE-DESIGN OF CHECKEALOS Website Vsual Branding App Background Checkealos is an online usability testing platform that provides customer behaviour insights to create engaging digital user experiences. About project Since Checkealos started in 2014 they felt that the brand was not uptodate with their current comapy. The main was the redesign of the front face including branding, website, social media, merchandise, and event products. While Working there I also provided support in the role a UX analysist for various companies

8 WEBSITE Project Re-Design of front end of website Role UX Designer Problem Checkealos had an extremely high drop off rate for new users who enter the page, possibly reach create an account, then leave the page. The existing on-boarding was narrow and included a static screen with a marketing video followed by some information which in English didn t make much sense. The process was uninspiring and confusing, and failed to explain the unique selling point's (USPs) of Checkealos to the user. Deliverables High Fidelity Prototype, Website Client Checkealos Solution A redesigned on-boarding flow that would inform first time users of the USPs of the app while encouraging them to engage with the service. Seperate pages for people based on their exact roles containing universal and a page for first time users containing a video that provides a straightforward explanation of the company and what they have to offer.

Process Personas Competitors Analysis As part of the brief, the client provided three personas that represented a cross section of Checkealos customer base.

Ben is frustrated by sites that lack order confirmations and likes things to be well organised. Alex dislikes overy complex sites and uses social media to research.

9 Process Personas Competitors Analysis As part of the brief, the client provided three personas that represented a cross section of Checkealos customer base. Jen likes websites to have good purchasing information and to have clear concises data on what you recieve. Ben is frustrated by sites that lack order confirmations and likes things to be well organised. Alex dislikes overy complex sites and uses social media to research. From Personas we were able to understand fustraitions, create user stories, user flows and understand what affects their actioons To gain a better understanding of how user experience testing platforms onboard users and encourage them to purchase testers from them or sign up as a tester I looked into a number of Checkealos' competitors. The key insights we uncovered where: Sites with effective on-boarding flows had few static screens and intelligently guided the user through the. Also the majority of competitors displayed their unique selling points as part of the on-boarding process and offered users a low barrier of entry, and access to customising their needs.

T SWOT analysis was a process we used as a company to identify the companies strengths, weaknesses,

10 Process Exsisting product Reviewing the exsisting product and higlighting key aspect and issues created a basis of understanding S.W.O.T SWOT analysis was a process we used as a company to identify the companies strengths, weaknesses, opportunities and threats. Through the process we also looked at ways in which clients have previously said have affected their engagement and retention on the site.

Process Feature prioritisation Card Sorting As part of the swot analysis with the marketing team they highlighted many key features that needed to be considered for the company.

11 Process Feature prioritisation Card Sorting As part of the swot analysis with the marketing team they highlighted many key features that needed to be considered for the company. We used this process in order to ensure that we are using the most neccesary features that have high impacts for the users in our personas The client provided a sample list of products which needed to be categorised in order to create a useable navigation system for the site. My team and I embarked on a number of card sorts, where we asked volunteers to arrange index cards with products on into logical categories.

Process Site map Sketches Sketching enabled ideation around potential screens and determined which layouts and features would work best together, and how they would also translate in other devices.

12 Process Site map Sketches Sketching enabled ideation around potential screens and determined which layouts and features would work best together, and how they would also translate in other devices. This process formed the first visualisation of the website design. After doing a number of card sorts it became clear that people tended to organise the products in three main ways; Solutions, and who uses. The final sitemap includes the global elements, search, account, about us, blog and basket which are attributes that are available on all pages of the website.

Process Wire framing, Screen Testing and Refinements Creating wire frame prototypes in axure from screen sketches allowed for users to interact with low fidelity page designs.

13 Process Wire framing, Screen Testing and Refinements Creating wire frame prototypes in axure from screen sketches allowed for users to interact with low fidelity page designs. Once a main design was decided on these were made into high fidelity prototypes. Through iteration and testing designs and button placements were revised. Testing with users brought feedback that was used to add new feature ideas and drop features that were found to be annoying or confusing. After these refinements I went on to create the current checkealos website with wordpress.

clearly explains Checkealos USPs straigh

14 Final Outcome Created an completed the offical checkealos web page in which I also created all the icons and banners A redesigned on-boarding flow, a website that clearly explains Checkealos USPs straigh away and keeps the user engaged with the service immediately.

15 Responsive

16 VISUAL BRANDING Project Re-Branding Role Graphic design Deliverables Logo, Slogan, Presentation, Social media Banners, Business cards, Company merchandise, MWC display board Client Checkealos Problem Chckealos is a user experience testing platform that has been providing user experience testing and customer behaviour insight for various platforms such as, websites, mobile apps, ecommerce, games, prototypes since As the brand was devloping and changing they needed to create an image which upheld and protrayed them. Solution With this in mind I set out to create a a logo that portrayed the company with a new geometrical logo that utilised a digital feel and by styling its main symbol the eye of Checkealos as the compound shape. The new deisgn has strengthened its identity as balanced and relevant. The wordmark is complimented by Helveticas type face, which is used for all visual communications.

17 Process A brand is defined by a person feelings about a product, service or organisation. You can t control what someone feels about your brand, but you can influence it. This means designing a preferred customer journey that encompasses every customer touch point including: the identity (logo), web presence, messaging, customer service, point of sale, signage, quality of product and service. Being new to the team I interviewed each team member on what they do and their style of approach to customers

18 Process Brand attributes With the whole team i then carried out the brand attribute excercise below in order to create the definition of the company

Deliverables Social media banners EAL S don t say

the design as part of PR s business strategy.

Among key deliverables were branding guidelines,

invoices, business cards and presentations.

19 Deliverables Social media banners EAL S don t say logo lean, do lean The key objective was to elevate the design as part of PR s business strategy. The new brand identity was launched in Among key deliverables were branding guidelines, new website, social media banners, updated invoices, business cards and presentations. With an adjusted to theirexsisting brand guidlines with the shades of blue and grey.

Deliverables In 2017 it was the first time

Congress (MWC) and it was straight after the

Also during MWC worked with the team to in

21 Deliverables In 2017 it was the first time Checkealos was present at the Mobile World Congress (MWC) and it was straight after the re-branding. Also during MWC worked with the team to in selling, presenting and showcasing their product to clients. At the mobile world congress, I was able to gain various new clients. I was also able to also create a connection between Checkealos into the South Korean market with a company called Toothlife

22 RECORDING APP Project Checkealos mobile app Role UX Designer Deliverables Axure Prototype of app Problem Chckealos is a user experience testing platform that has been using othe companies devices in orfer to record, recover and retain user interaction with mobile apps. This lead to them taking on large scale projects involving mobile application thus a loss in oppurtunity and potential revenure Solution The app allows their testers to share experiences of using various mobile websites and apps. Client Checkealos Screen interactions and voice feedback will be recorded and uploaded as soon as the tester has completed the feedback project. It wouldn t be stored on their your device.

Process Personas To develop a deeper understanding of how the users' will work and possible road k we used personas to creat user tories, user flows and have them test out protoypes.

23 Process Personas To develop a deeper understanding of how the users' will work and possible road k we used personas to creat user tories, user flows and have them test out protoypes. From this key fustrations and needs where noted onto cards Card Sorting Card sorting will helped me to understand the expectations of Checkealos users. It was very useful as I had already looked into the previous program they used and how they used it so I could understand the needed content.

Process Design Studio With the agreed design principles in mind, we started generating ideas around how George would; a) discover new tests and, b) engage with these tests.

24 Process Design Studio With the agreed design principles in mind, we started generating ideas around how George would; a) discover new tests and, b) engage with these tests. From our first design studio, clip-making emerged as the most compelling idea because it, allowed us to make sure testers new when there were tests avaiable and easily access them. Feature prioritisation From the design studio it was clear to see what features where needed and we could further decide how to incoperate them for the best response. ie notifications

25 Process User flow We knew from the start that maintaining a level of simplicity around navigation and functionality would be key to keeping users engaged from the moment they first opened the app. The userflow maps out how various screens relate to each other and how users will navigate between them.

26 Outcome With the use of axure I was able to create an interactive hi-fidelity prototype. Due to my time in the company ending I could only make the first version and not make any later refinments or see user experience responses First Prototype

27 USER EXPERIENCE DESIGN Project Form and Function: Dring hands Role Product Designer Deliverables 3D Render Problem Use visual emphasis to make the design intuitive, draw attention to areas at the right times of operation. Consider how it fits in with a target lifestyle. Reduce the visual detail to enhance and clarify it s function. Embody your design with an interesting story that has reason behind it. Offer the consumer a well reasoned product that will meet their functional and emotional needs. Solution Drying hand often occurs when our hands are wet due to cleaning. I have design a way to clean hands with mist without getting hands wet. This is suitable for small resturants that may serve finger food and wish to provide a way to sanitize hands quickly prior to eating.

28 Process Human centred design research Empathy Map Fly on the wall Intrerviews Low cost and effort, this method is an easy way to begin behavior research. Unlike other observation methods, Fly On The Wall separates the researcher for any direct involvement, which minimizes bias Creating Empathy Maps is useful for synthesizing research data in order to better understand the users. Empathy Maps are great for creating Personas, identifying users Interview is the verbal conversation between two people with the objective of collecting relevant information for the purpose of research which also

29 Process Function: simplicity, hierarchy, distilled Affinity Mapping To make make connections and to determine common themes from our interviews it made affinity Map of our responses. This enabled us to determine repeat issues and pain points, and helped us decide what issues to focus on when moving forward. Brain storming From the affinity mapping i could then expand on the points into more ideation and filter these based on the issues brought up

30 Process Sketches

This gave the oppurtunity to compare against values, socialise with them,

31 Refinement Prototyping Refinement Studied the design in 2D and 3D prototypes to then make and tweak more. This gave the oppurtunity to compare against values, socialise with them, and decide how how successful they are. Also to see how do these physical attributes harmonise with the designs function

32 Outcome MISTY is a hand cleaning system created for restaurants which releases a soft warm mist containing bacteria cleaning agents that is fixed to a flat surface. This allows you clean hands without worrying about having to dry them eradicating the use of hand dryers and paper towels

Portfolio. Mihai Marin

Portfolio. Mihai Marin Portfolio Mihai Marin Case Study No. 1 AXA Insurance - Travel Insurance: Redesign Quote & Buy Journey The Brief As a result of the Travel Quote & Buy journey not being fully mobile optimised, it was becoming