Ruka Hair

Redesigning web mobile experience to IOS native app

Concept project

Client

Ruka Hair

Services

UX Design UI Design

Industries

Beauty e-commerce

Date

November 2023

App Screen with open sidebar
App Screen with open sidebar
App Screen with open sidebar
Problem

Currently users can only view, buy and engage with Ruka on web. By not having an native app, users have a limited experience. More specifically, how might we leverage the benefits of native apps to help enhance Ruka’s focus on fostering community within their brand and most importantly provide a ROI?

Project Goal

Address the ways in which native ios features can help begin to solve some of the pain-points in the web mobile e-commerce site.

Solution

Creating an ios native app that improves user experience of the Ruka brand, increasing user retention and sales.

🔗 Figma File - Screens and Demos
🔗Demo Videos
DISCOVER & DEFINE

Using my UX expertise, I conducted heuristic analysis of the existing desktop and mobile website, as well as the brands wider digital touch-points. I was able to define and synthesize the key major pain-points.

💔 Limited functionality of the ‘Community Styles’ feature

The feature offers only basic MVP functionality, lacking sufficient product details to help users make informed purchasing decisions quickly. For users who want to continue on and make purchases, this journey is disjointed and takes them out of the 'Community Styles' feature.

💔 Unintuitive and Clunky Navigation

Whilst attempting to scroll through community style posts, the interaction flow hinders smooth browsing relying solely on small arrow icons to navigate.

💔 Fragmented User Journey

Users face multiple steps from social media platforms to reach the website after engaging with brand updates like restocks and sales, creating additional friction which may lead to user drop off.

Here is what the community styles feature currently looks like on web mobile, before implementing the improvements.

IDEATE

By combining my knowledge of native app capabilities with the key pain points identified, I developed designs that directly address these issues, leveraging the unique features and advantages of iOS apps.

✅ Enhanced experience

The updated feature now includes detailed product information—front-loading the product image, link, and reviews directly in the community post. Additionally, Apple Pay integration allows users to make purchases within the Community Styles feature, streamlining the buying process.

✅ Intuitive interaction gestures

Navigating between community posts is now a lot more intuitive as it relies on native IOS swiping interactions, which is more instinctive to user experience. I also incorporated filter chips to enhance search efficiency, enabling users to quickly browse and filter content by desired product type

Filters demo
✅ Push notifications

Push notifications can provide direct, real-time updates on restocks and sales, allowing users to instantly access relevant product pages with a single tap, eliminating additional steps and reducing the risk of user drop-off.

REFLECTION
What would I do if user research was within scope of this project? (Process step 04)

🎯 Test the existing experience, to define benchmark metrics.

🎯 Test the improved version, iterating and implementing feedback in an cyclic manner.

🎯 Develop and deploy to receive live feedback and monitor metrics to evaluate design impact on ROI.

What would I do differently?

💭 Recognizing that small to medium-sized businesses may not always have the resources to develop a dedicated app, I would explore how to enhance the user experience by leveraging native iOS features such as deep linking, Safari AutoFill, and Apple Pay. These features can provide a more seamless and engaging mobile experience without the need for a full app, ensuring improved user engagement and conversion at a lower cost.

EXPLORE

Created on framer.

EXPLORE

Created on framer.

EXPLORE

Created on framer.