The Mobile Assistant
Luxury Retailer / Mobile App Design
Our client was a luxury department store whose goal was to create a brand-new digital experience from scratch. They wanted a native mobile app to help their customer prepare for the milestones in their life. The team created mid-fidelity flows for the entire app and tested the concept to validate that it was something users wanted. Unfortunately, the project paused right as we started high-fidelity designs.
My Role
I was one of two UX designers on a team including a Scrum Master, a UX Researcher, a few Product People, and a Tech Architect. I was responsible for creating wireframes for high-fidelity designs, and prototypes, and assisting with user testing.
Methods & Skills
Competitive Analysis
Wireframing
Prototyping
UI Design
Design System
Data Viz
Tools
Figma
Jira
Confluence
Miro
Timeline
Oct 2020 - Dec 2020
Design Challenge
The goal was to create a brand-new digital experience for the client to engage with their customer for more than just shopping. We did not want to create another eCommerce app but curate a personal experience for each customer. The client wanted this app to be an “easy button” for their users.
The Process
Understand
Hook Framework
I joined the project at the end of the strategy phase. The team was still brainstorming how to keep customers engaged with the app. How do we create an experience to make users want to come back for more? We followed the Hook Framework, which would engage customers' habits and keep them hooked to the app.
Key Feature Hooks
We defined three key features for the MVP of the app. This included booking services, a daily recommendation feed, and a calendar of upcoming milestones.
Validation
The client was hesitant about doing any user research and testing. The team was concerned about this since the features of this app were highly experimental and lacked any user validation. Luckily, we convinced the client to do a user test to validate the concepts.
Understand
Wireframes
The senior designer and I hit the ground running to build a prototype. She focused on the daily recommendations flow. I designed the service page and calendar event flows. We started by creating some wireframes.
Daily Recommendations
Events Calendar
Services
Understand
User Validation + Testing
After completing the wireframes, I created a mid-fidelity prototype with all the flows. Our UX Researcher worked with the client to find the right target audience. From there, I sat in and listened to the user test taking notes for the UX Researcher.
Results
As a result, a majority of users showed excitement for the app. They specifically liked that the app would remind them of events (birthdays, weddings, anniversaries) and provide gift recommendations for each occasion. Overall, the app received positive feedback to iterate on high-fidelity designs.
Explore
Design Explorations
Onboarding Experience
The goal of the Daily Recommendations Feed was to curate content for the specific customer. How would we do this? The team decided to create an onboarding quiz experience. The client was unsure what questions were needed for this experience. I brainstormed ideas to share with the client hoping it would spark ideas or help narrow down topics.
Scrolling + Transitions
The Daily Recommendations feed had a variety of content using both horizontal and vertical scrolling. I started to explore and define when we should use one over the other. I looked at other social media apps using similar scrolling techniques for inspiration.
Horizontal Scrolling
Horizontal Scrolling: Separates content and categories. For example, promotions for products, editorial pieces, and services offered
Vertical Scrolling
Vertical Scrolling: Use for collection of items or images related to content Example: The product images
Explore
Hi-fidelity Designs
Before the project suddenly ended, I explored high-fidelity designs for the login. Below are some of the initial concepts. For NDA purposes, I replaced the company name.
Visual Typography Effects
For a brief moment, I did explore how we could be decorative with typography. Below is one exploration. The animation was made in Adobe After Effects.
Results & Reflection
This was my first project out of college. Even though the project only lasted a few months, I gained so much experience. I learned about the agile process, t-shirt sizing, and story mapping. Furthermore, I improved my communication and presentation skills along with client management. I learned how to use Figma and now am a Figma Wizard. Additionally, it was eye-opening to participate in the user test and see how users interacted with my prototype.