Volkswagen

Deliverables and solutions for Volkswagen

Design solutions | UI/UX deliverables

Attention to details and making sure that the design passes accessibility tests.

User interface design, UI/UX deliverables, wireframes and prototyping. Modifying design concepts and finding solutions.

UI/UX deliverable tools:

– Adobe XD;

– Zeplin.

Agile management tools: TargetProcess, Kanban.

Gunnebo

Creating a style guide, user flow, modifying design solutions for accessibility, QA and creating UI/UX deliverable

Style guide | Design solutions for accessibility | UI/UX deliverables

Attention to details and making sure that the design passes accessibility tests.

User interface design, UI/UX deliverables, wireframes and prototyping. Modifying design concepts and finding solutions. All based on existing personas.

In this project the design is delivered in modules and elements instead of fully created prototypes.

UI/UX deliverable tools:

– Adobe XD;

– Zeplin.

User flow

Wireframes

Prototyping

Style guide

 
WATCH PROTOTYPE IN ACTION BELOW

 

 

Apoteket

apoteket-website-homepage

UX research and strategy, Optimising website and mobile application

UX research and strategy | UX process and WoW | Usability and User tests | Design solutions for accessibility | Style guide  | Deliverables

Building a mature understanding for accessibility in the organisation and leading UX. 

Apoteket is Sweden’s top pharmacy with a long history. Their goal is to reach out and be available to everyone in need. The organisation cooperates with different partners in healthcare. They also own numerous services and offer high quality products.

Assignment & Responsibility

Lead UX Designer also Trusted Advisor, working in cross-functional teams. Similarly, keeping close contact with Product Owners and Stakeholder. Ultimately, my main assignment has been optimising and creating new design for Apoteket’s e-commerce website. I worked with their mobile application and some other services. In order to fullfil my assignments I introduced and developed innovative Ways of Working (WoW) and contributed to their UX Design Process. As a result, production speed increased and so did team involvement. 

Design-process

Further more, together with team effort we created and modified various toolboxes. Regular retrospectives and brainstorming together on a regular basis resulted to generating successful ideas. Also, I introduced latest instruments to perform better in monitoring for UX and help the marketing department understand their customers. Finally and above all, as Accessibility Ambassador, one of my main tasks has been making Apoteket’s digital products more accessible by following existing accessibility guidelines like WCAG (Web Content Accessibility Guidelines) and testing their products. As a result, all team members, including stakeholders, have greater understanding of why this specific topic is important to everyone and how the organisation benefits from thinking Inclusive Design.  

Activity

• Stakeholder interviews

• Collaboration with client and product owner

• Full collaboration with development team

• Team workshops

• Design studios

• User tests

• UX and Accessibility workshops

• Sketching & wireframes

• Creating prototypes

• Accessibility research and report

Deliverables

• Information architecture & structure

• User and UX flow

• Wireframes

• Prototypes

• User Interface (UI)

• Style guide

• UX Strategy

Tools

Design processes and prototyping

Sketch
Adobe XD
Overflow
Sketch-XD-Overflow

Handoff and versioning tools

Abstract
Overflow

UX handoff to Development team deliverable process

UX-deliverable-process-Apoteket

UX handoff to Development team. Handoff deliverable process for Swedish pharmacy Apoteket AB

Design process

  • Discover & Define
  • Develop & Deliver
  • Evaluate & Maintain
UX-Design-Process-Apoteket

UX design process for Swedish pharmacy Apoteket AB.

Apart from focusing on UX a lot of effort had been invested in modifying our work process creating a more effective and healthy environment.

Workshop_design_sessioner_Apoteket_pharmacy

Workshop, design sessions and studios for Swedish pharmacy Apoteket

Random sketches and wireframes

Random sketches and wireframes

 

Accessibility

  • Research, report and workshops
  • Funkify
  • WCAG (Web Content Accessibility Guidelines)
  • Lighthouse
  • Stark
  • Etc 
apoteket-contrast-changes-a11y

Accessibility example on an element. Changes before/after on contrast, size and text according to WCAG (Web Content Accessibility Guidelines)

WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface.

Provide ways to help users navigate, find content, and determine where they are according to Guideline 2.4 Navigable (WCAG). Below is an example of how a QA can be perceived.

Accessibility keyboard test

Accessibility keyboard test.

 

Examples on deliverables and prototypes

Working process in Abstract on Product page

Working process in Abstract

 

Prototype in Sketch

Prototype in Sketch

UX flow in Overflow

UX flow in Overflow

 

 

 

Testing knowledge base page in a test environment to see it matches criteria, currently the accordion flow does not not react accordingly:

 

User test on hi-fi prototype:

Sticky buy button
https://xd.adobe.com/view/a67c4296-8e0b-44f8-6219-d33fbb9c474b-d04d/?fullscreen

Short description: Login state, top navigation

Note: For some reason the link does not always show floating bar after XD updates.

Skandia

UX research and strategy, Optimising website and mobile application

UX research and strategy | UX process and WoW | Usability and User tests | Design solutions for accessibility | Deliverables

Building a mature understanding for customer experience, design thinking and accessibility in the organisation.

Note: this an ongoing project which means the are design solutions that are not presented on this page and some are yet to be updated.

Skandia is a Swedish pension, bank and insurance company. It was formed in 1855. Skandia was the first insurance company in Sweden to offer both fire insurance and life insurance. Apart from insurance they work in the banking sector and own Skandia Bank.

Assignment & Responsibility

Support cross-functional teams and help understand the need of UX and how the company benefits from that. Skandia works in SAFe which can be misleading and many times do not take UX in account. We try to keep close contact with Product Owners and Stakeholder in order to integrate UX, inclusive design and understanding for design thinking with the help of design workshops, webinars, innovation evenings etc. In order to fullfil my assignments I contribute to creating a working Design Process. As a result teams get more involved, mature in understanding what customer experience is and why we need to understand our users to create products they need. Another very important part of the design process I have been involved in is doing user tests and gathering customer feedback and data. One of the most challenging parts of this project apart from the design process and framework has been making user tests and gathering data more frequently, also implementing tools which often need to go through thorough security checkup.

I normally choose Double Diamond as a design process and try to integrate it to the organisations working process.

Activity

• Stakeholder interviews

• Collaboration with client and product owner

• Full collaboration with development team

• Team workshops

• Design studios

• User tests

• Sketching & wireframes

• Creating prototypes

• Accessibility research and report

Deliverables

• Information architecture & structure

• User and UX flow

• Wireframes

• Prototypes

• User Interface (UI)

• Style guide

• UX Strategy

Tools

 Prototyping, flow diagrams and user tests

Sketch
– Invision
Adobe XD
Overflow
– Miro
– Useberry
– Teams

Handoff and versioning tools

– Invision
– Sketch
– Miro
– Power point

UX handoff to Development team deliverable process

Guideline for deliverables

The Tab reborn

This project focuses on large companies and their needs to keep track on budget. Our main users are Account administrators and HR. The platform was originally built for small scale companies, was researched, tested and built according to their needs. When going through the platform we realised that if we need to adapt this platform to large scale companies which is over 200 employees we need reconsider some priorities on how the user reads needed information – that is how the tab concept was born.

Earlier the use of tabs were canceled due to accessibility issues, not being responsive and not seeing the use of it for our clients.

This is how the company plattform looked like. All information were in modules and places after one another.

Getting to know our users

We had did some research with experts, service, gathers best practices and most importantly interviewed and tested our users. That way we were sure that our users need an overview just to see briefly company agreements in total, then search for individuals when needed and also have access to CSV, excel, when to add/delete individuals etc.

Focusing on accessibility

As a designer who genuinely works towards inclusive design I have helped Skandia with awareness about accessibility and inclusive design. Today both designers and developers try to build Skandias products making them more accessible. It is a process that takes time and for now it is implemented gradually to different focus areas and being planned.

Speak your user’s/customer’s language

Creating more independent features with the right information and process in order to reduce pressure on customer service and have happier clients has been my main focus. We had to understand that they way we speak inhouse is not the same customers speak. User’s normally need to see keywords that they understand to be able to solve a task and if we don’t use recognizable terms the customer either just leaves creating drop-offs or contact’s customer service which in turn creates ques and frustration at the service desk. Together with Copywriters we worked on improving Skandia’s menu for their website, for both logged in users/customers and visitors, the first stage of the improved menu is live for visitors. Next stage to be continued for logged in users. In order to make sure that this hypothesis works the menu has been monitored.

I also contributed in introducing new tools such as Miro and even testing tools due to our remote work. That way we made collaboration easier.

Mobile application

Conducted user tests and guerrilla tests where we got to test our hypotheses which resulted in some iterations. During the tests, we caught other things that can be improved in Skandia’s mobile application and website. Test subjects were primarily customers who shared with us their insights in other areas. An important part of the work process was to develop transparency with stakeholders and the team altogether. They could participate and observe in user tests, get a look and listen to who we create design for. Thanks to online tools, we were able to create an environment where the customer / user felt comfortable and was not disturbed by the number of people who participated in the user test.

As a facilitator, I needed to adapt to the digital type of testing, where I created a system to perform user tests with the tools we had access to. We primarily used Teams. In other projects we tried Lookback, but questions about safety and storage arose. Another tool we used for the tests was Useberry, where we could collect heatmaps and the trip to see pressure behaviors when we do not see it behind the camera.

To understand why customers press the screen as they did, we analyzed which parts are most available depending on phone models. We worked together with customer analysts to investigate which devices and browsers customers use, as well as their most visited pages and trends. Speaking of trends, that also is an important for new design solutions. Another very important topic has been awareness of accessibility guidelines and inclusive design altogether.

>