Who are the users? 

Based on research and feedback of the live product from the baudigital team, it was easy to define a distinct user group.

• 40 years or older
  
  

• little experience with digital applications
  
  
• mostly using an iPad for sampling with current product

Qualitative user interviews

Before starting with design-thinking I wanted to find out how users feel about their current experience with the app. We asked active users one by one for feedback in order to hear about current product problems. In that way we are able to generate quick wins for the app.

UX review 

While reviewing the current application inhouse user testing revealed certain usability problems which needed to be improved.

• Comprehensible main navigation is missing
  
  

• No clear and partly wrong hierarchy of call-to-action buttons
  
  
• Product images are overlaid in selected state
  
  
• User does not know where he currently is

Product constraints

The following points had to be considered during product development:

• The product should not be completely renewed and the basic code of the elements should be retained.
  
  
• The improvements in the user interface should be implemented with as little effort as possible
  
  
• The product should function as a white label solution and must not have too limited branding
  
  
• Two product versions:
  
  a) Marketing version as a sneak peak to offer prospective condo owners a glimpse into the product
  
  b) Full version with purchase completion, massaging function for contracts, appointment overview, document storage

Considering constraints in
product development during planning saves a lot of time and money during implementation.

The concept

To ensure that the user flow will be more efficient in the future, it has been adjusted so that only the needed actions will be available in the user interface.

Taking a look at other products helps gain inspiration for possible interaction solutions without focusing too much on one path.

Wireframing

In the first wireframing phase, the aim is to visually depict the user flow and to show several solutions for interactions of the interface. Heuristic interaction rules are used preferably so that the usability is as easy as possible to understand.

Prototyping and testing

In order to test a prototype, it is important to me to work with realistic content in order to represent the product in the best possible way. Low fidelity wireframes and placeholder texts are not suitable for this, as they distort the actual image of the product and can irritate the user in the test.

Working with real content in prototypes takes more time, but generates more realistic feedback during user tests.

Check out the sneak peak of the marketing prototype:

The prototype was tested on users who were already using the live product. This gave us the opportunity to prove improvements to the previous product faster and at the same time identify weaknesses in the new product approach.

We also tested the new product on users who had not yet come into contact with the live product, but who corresponded to the target group. User testing helped us to validate our product vision and gave us the chance to focus on product features and workflows for real user needs. 

Design System

Based on Material Atomic Design, I created a design system in Figma for further feature development. It maintains design consistency and creates an easy way to prepare handoffs for developers.

Collaboration with developers

During the entire concept phase, I worked closely with the lead developer in short design sprints. In that way it was easy to identify potential limitations in the implementation early on and to develop a concept that would require as little effort as possible while still providing the best possible user experience in terms of usability.

User interface design

The user interface design is based on Material Atomic Design patterns to make it easier to maintain the design system and allows developers to use already coded presets for a fast implementation. 

Marketing version:

Full version:

The outcome

Sonderwunsch Manager was improved in the following points:

• User guidance has been simplified so that even users with little digital experience can find their way around the product
  
  
• Improved hierarchy of the main navigation and call-to-action buttons, while the base code remained mostly the same
  
  
• Marketing and full version work as white label solution (B2B)

Before   |   After