UX research & Wireframes

In the first phase, I conducted comprehensive research and analysis to understand the current handmade jewelry e-commerce website. The research helped me identify key pain points such as difficult navigation, irrelevant filtering and search, poor mobile experience and unclear UI design.

(1) User Persona

Based on the research, I created a user persona, Tina Garcia, who would be a target user for this app. For the time-strapped shoppers like Tina, it is important to seek simplicity andefficiency in their experiences. From her fictional descriptions, challenges and needs, I could get an idea of how I get priorities to build because it helps to empathize with potential users and their needs.

(2) User Scenario

The user scenario helped me to understand what the target user, Tina would need to take to achieve her goal in using the app. From Tina’s viewpoint, she may utilize her short break to purchase unique accessories for her upcoming dance festival. It led her to download the app and explore items quickly. Captivated by unique accessories, Tina started her journey to purchase the item with a 10% discount coupon as a reward of signup.

(3) Empathy Map

Creating the empathy map helped me to understand how Tina, a target user, says, thinks,does, and feels when she engages with the ‘Twinkle by Stella’ app. From having it, I could specifically catch Tina’s pain points and needs from her perspective in the browsing and ordering system.

(4) Journey Map

The journey map was created to illustrate the end-to-end experience that Tina, a target user has with the ‘Twinkle by Stella’ app over time using. Covering actions, thoughts, emotions and opportunities across the 5 phases: awareness, exploration, decision, purchase, and post purchase, it helped me to understand and improve the overall user experience.

(5) User Flow

The user flow is critical for mapping out Tina’s path through ‘Twinkle by Stella’ app to complete her goal of ordering jewelry. Designing this detailed user flow, I could visualize each step that Tina, a user target would take from browsing items to completing purchase. By having a clear user flow, I was able to design an intuitive interface that guided Tina smoothly through each step, reducing the user frustration and increasing the chances of a successful purchase.

(6) Wireframes

Based on the UX research and analysis process, the wireframes for the ‘Twinkle by Stella’ app were created using Figma. Consisting of a total of 9 key screens, the low-fidelity wireframes were without colors and images before the development of the high-fidelity prototype. In creating wireframes, I prioritized an intuitive design and layout interface so that it aimed to tailor to target users for easy navigation. By positioning the search bar on the top, target users can sort or filter what they want unlike the other jewelry e-commerce apps that I researched. In addition, accordion icons on the product description would be beneficial for the target users who want to get large amounts of information in a small page without leaving the page. In the order completion page, the estimated delivery time would be shown to help release frustration on delivery information from target users.

Prototype

(1) High-fidelity Prototype

The high-fidelity prototype was developed following phase 1. The consistent visual cues and pink beige and beige color palette were chosen to deliver the soft and elegant feel and represent the final product. By adding a splash screen with the logo, the app immediately delivered brand recognition to a target user. I maintained consistency in the UI design throughout the app for a seamless and intuitive user experience. Additionally, signed-up target users will receive a discount coupon pop-up message to help target users get feedback on where they are on. For the images, free licensed ones from Unsplash were used.

(2) Interactive Prototype

For the next process, the interactive prototype was integrated to validate the design concepts of ‘Twinkle by Stella’. It was a challenge to develop the interactive prototypesbecause I had to check that it accurately represented the functionality and user experience of the final design app. Whenever the functionality was inconsistent, I had to refine the prototype iteratively to achieve the level of accuracy. Each iteration aimed to improve the final product and ensure a seamless user experience.

Usability Testing

The goal of the usability testing for the 'Twinkle by Stella’ app was to evaluate how effectively the design for the app meets the needs of target users. It was conducted with a predetermined cohort and additional participants like family members for two weeks through Maze. The test results showed that the majority of testing users successfully completed 6 target tasks.

• - Task #1: Locate the category
• - Task #2: Search for the time
• - Task #3: Check customer reviews & Add to cart
• - Task #4: Update quantity and check price
• - Task #5: Sign up and apply for a discount coupon
• - Task #6: Confirm the applied coupon code and pay

The testing result received a usability score of 68 with the average rating of 4.7/5, assessing the overall effectiveness and efficiency of a design with the app.

(1) Finding

I found some pain points from the usability testing results, leading to close to 50% of high misclicks:

• - Complex and unnecessary process design
• - No feedback for updating
• - Task #3: Check customer reviews & Add to cart
• - Unnecessary checkbox icon (perceived affordance problem)
• - Difficulty in finding the X and register button

From the Maze report, I discovered that some testing users encountered challenges with the task #4 and #5. They became frustrated due to multi-step navigation and confused by the lack of feedback when updating their order quantity. Additionally, they were frustrated by an unnecessary checkbox icon, which caused confusion. Some testing users were unable to find the closing X icon and the register button, resulting in misclicks.

(2) Solutions

Based on these analyses, I came up with some adjustments to address these pain points:

• - Simplified the cart screen and replaced the existing button to enhance user experience.
• - Modified user-friendly UI elements and added clear feedback upon updating for better usability.
• - Removed an unnecessary checkbox to reduce screen clutter.
• - Unnecessary checkbox icon (perceived affordance problem).
• - Replaced the X icon with clearer UI icons and highlighted the register button to increase user engagement.

Feedback & Refinement

(1) Feedback

In addition to the Maze result, upon completing the project, useful feedback was given by the instructor. It was about considering keeping the layout grid and side margins consistent, and increasing white space as design appears a bit crowded when creating the prototype. Also, it should ensure icons, shapes, and alignments are proportionate. Along with the great interactivity, she added that it would be best practice on mobile apps to have a bottom navigation to house the main nav items and a hamburger nav for any secondary items.

(2) Improvement

The refined version was adjusted based on refinement and solutions to pain points, focusing on adjusting spans, the proportion of icons, increasing white space, revised nav and UI/layout elements on the checkout screen.

Result from Project

The entire journey for this project was a great learning experience in creative thinking and problem-solving. I was able to discover the importance of user-centric design and the impact of testing and refinement. Through the UX research, I gained insights into how to build an intuitive app tailored to a target user. The prototypes created based on the research helped me to practice the application of a clear navigation, UI elements, and user experience. Although the testing result didn’t meet my expectations, the overall project not only improved my design skills but also enhanced my perspective to empathize with users and create solutions that effectively meet their goals.