User interface design

An overview of some of the user interface design projects I have produced

Self-serve password reset: Raisin GmbH

2022

Background
I designed the self-serve password reset function to replace Raisin's previous process, which involved users manually contacting Raisin's Customer Service teams to request a 'change password' PIN letter to be sent physically to their home address in the mail. This process was both frustratingly inconvenient for the user and costly for the business, both time-wise and financially. My role was to research best practices and subsequently design a self-serve password reset function that resolved all of the issues associated with the manual process and which incorporated the principles of best practice for this type of function. Once I fully understand what constituted best practice, I began the design process.

Design Sync Huddle

My role: UX/UI Research and Design
Team: Product Owner (Berlin), Technical Research & Discovery Team (Berlin), Front-end Software Engineers (x2 Berlin), Back-end Software Engineers (x2 Berlin), Digital Marketing Manager (UK)

During my design process I liaised with the Berlin-based UX and Graphics teams and shared my work-in-progress at 'Weekly Design Sync Huddles', which are basically remote ideation and feedback opportunities where all team members can share and align thought processes. The Miro board here exemplifies how Huddle attendees contributed by adding comments and discussion points, under subheadings; 'likes' , 'dislikes', 'have you considered?' and 'I have a question', helping to establish a list of 'takeaway' points for design consideration.

Raisin Password reset screens 1 - 4 Raisin Password reset screens 5 - 8 Raisin Password reset emails
Designing the interface
  1. The first step was simple; adding the 'Forgot your password?' link to the relevant section of the login screen
  2. The first screen in the forgotten password journey is often met with frustration and potentially a little embarrassment on behalf of the user, therefore I wanted to use an understanding, lighthearted tone of voice in the initial dialogue; hence 'Don't worry, it happens!' as an introductory message of reassurance. The users is prompted to enter the email address associated with their Raisin Account in order to receive a reset link via email. Submitting the email address triggers the actual email (refer to image A) and displays screen 3.
  3. The user is prompted to check their email inbox (or junk mail) in order to access the reset link email.
  4. Once the user clicks the 'Set new password' link in the email, they are returned to screen 4 in the reset flow where they are guided through the process of creating and confirming a strong, new password. This constitutes the first authentication, as part of the two-factor (2FA) process used to verify the user.
  5. Clicking the 'Reset password' link loads screen 5, where they are prompted to confirm their identity by sending a verification code to their mobile phone. This is the second authentication in the 2FA process.
  6. Users enter the verification code which was sent to them, click 'Continue' and are taken to screen 7. A large proportion of Raisin's users are quite elderly, potentially falling into a 'vulnerable' category, therefore we anticipated potential issues whereby verification code and mobile phone familiarity could become obstacles in the process for some users. I added a 'Try another way' link, which takes users to a Customer Services page where they can receive direct assistance from trained Raisin staff.
  7. AAt this point, the user has completed their password reset and they are rewarded with a large, green affirmation. The user also receives a 'success' email (refer to image B) as a second confirmation of successful password reset.
  8. The 'Go back to login' link loads the log in screen once more, where the user's email is now pre-entered and the curser is pre-positioned in the password field, ready for the user to type in their new password and complete their login.

The technical implementation of the password reset function relies upon an open source identity and access management software tool and the user flow is designed to take advantage of the innate security features of this tool.

The new functionality was rolled out group-wide, across all Raisin platforms in Q2 2022, greatly improving both the experience for users and internal business processes.

The issues associated with the old process
  • Manual process, taking several days to complete
  • Negative impact on CS time (2021: 11,000 requests for manual resets)
  • Provides a poor user experience
  • High cost to maintain
  • Less secure; manual interventione
The value I added with the self-serve process
  • Faster process taking just minutes to complete
  • No impact on CS time
  • Provides a superior user experience
  • Lower cost to maintain
  • More secure, (2FA); no manual intervention
Creadoor - viewing a client project


Mobile navigation design: Missguided

2017

Background
Missguided is a fresh and vibrant online store that aims to stay on top of the latest trends in order to provide their customers with the best that the fashion world has to offer. Missguided’s vision is to be the world’s largest, coolest, most fun, relevant and aspirational fashion brand for millennial women. Inspired by real life, it is bold, straight talking and forward thinking.

For four and a half years, I worked as part of Missguided’s in-house e-commerce team at the company's Manchester-based HQ, initially as their solo UI Designer and later as Senior UX Designer.

Project
In 2017 I initiated a project which explored the way in which users interact with the site's navigation on mobile devices. This was driven by the the company's desire to offer a fun and unexpected experience for the user, without of course compromising intuitive functionality.

My proposal was that when a user taps the burger menu to access the navigation, instead of the navigation sliding into view, the current page shrinks slightly and slides partially off-canvas to reveal the navigation beneath. Although this behaviour is counter-intuitive, once revealed, the navigation can be scrolled and expanded in the usual, intuitive way. Tapping anywhere on the partially off-canvas page restores it to it's original size and position, obscuring the navigation once again.


Here is an early prototype video demonstrating the animation which reveals the search function and then the main navigation menu.


My initial idea was well received by internal stakeholders and I built several iterative prototypes of the new menu feature to test with real users in moderated user tests in Missguided's in-house UX lab. The feedback and insight gleaned from these user sessions proved invaluable and shaped the direction and outcome of the final design.

The range of products offered by Missguided is extensive and varied, therefore it was critical that the menu content structure was optimised to match our user's expectations. For this reason, the project also involved refining the taxonomy and information hierarchy within the navigation. I facilitated closed card sorting tests, both within team ideation workshops and more importantly, with Missguided's own users, to finalise the navigation menu and establish a final optimised structure.

E-commerce user interface: SIMMI

2018

SIMMI are a London-based footwear retailer, offering the latest footwear trends at affordable prices, for global-minded girls. SIMMI are constantly inspired by the bold and accomplished women of the world, whether it be in their daily lives or on their social channels.

I designed the fully responsive 'Ghost' user interface for SIMMI Shoes Magento 2 Enterprise e-commerce website.

Project purpose

The main emphasis was to create a beautifully minimal, 'barely there' design, which allowed SIMMI's vibrant lifestyle and product photography undistracted attention. This was achieved by incorporating a transparent header design which 'floated' over the background imagery.
The results were published during Autumn of the same year, catapulting SIMMI into a new phase of growth.

Creadoor - viewing a client project

UI Design for Creator Marketplace: Creadoor

2018

Creadoor is an online marketplace where individuals and small enterprises can find and hire creatives to create high-quality photos and videos, to promote their business.

Creadoor - viewing multiple client projects

I designed two user interfaces for the Creadoor marketplace; one for clients who are searching for content creators, the other for content creators who want to display their profiles to attract potential clients.

Want to know more?

If you would like to know more about my work, or have a new opportunity you want to share with me,
please email: