Buywith is a online shopping livestream platform.
Influencers, experts, celebrities and store reps can host virtual shopping event, create direct sales for brands and retailers.
1. Design process
Problem
The main redesign goal of the app is to make the interface usable, sterile and pleasant for the user. One of the main problems i've been dealing with is Placing the relevant features in a limited
space area. For example - User navbar placed on the top left and catagoriezd uncorecctly. Chat window displayed on top of the live session without its own territory.
Solution
For accomplished that goal,
i had to find solutions for the user's comfort needs and avoid visual overload during the shopping experience.
Re-design the mobile platform, rearrange and properly manage the real estate space in order to create
a better, aesthetic and reliable user experience.
Tools
Miro
Figma
Xd
My Role
UIUX Designer :)
Team
1 UIUX designer
1 developers
1 project manager
Overall Timeline
8+ weeks
Discovery & Research: 2+ weeks
Design & testing: 6 weeks
Persona
Why did i need personas?
The persona is based on research I conducted for a group of women and men aged 22-30 with a similar background and identical aspirations, who are involved in online and social shopping. The purpose of building the persona was to examine the user pain points and their conduct in a personal buying process without the accompaniment of a host or influencer.
What information did i specify for the persona?
The research also revealed that there are people who prefer personal support in the buying process with specific recommendations. Every person I interviewed had 2 or 3 potential influencers who fit their lifestyle, preferences and personal taste. Conclution - online buying can help users with convenience, but charges them with wasting time on returning products and buying uncorrectly. For a target audience involved in social networks, buying expirience with influencers can be reliable and save the feeling of despair and lack of understanding.
How did the persona effect the design process?
The persona influenced the design process by helping me map and rank the main features that would help the user in this unique shopping experience. The strategy was to choose pleasant, temporary and intimate colors. The design had to be experiential and aesthetic in order to enable a comfortable and clean buying process.
I used this model persona in the entire design process.
2. Hight-Fidelity Wireframes
I created wireframes in order to test components and features combien in one world. It helped me to communicate with the product's “big idea” rather than the specific details. I used Figma for this.
To solve the specific problems i had to make about 50 - 60 iterations include other responsive screens. I found out that a correct rearrangement of buttons and chat allows for a better visibility of the product details and enables a clearer/faster purchasing experience. Here some of that.
3. UI Design
Once the usability issues were resolved, I moved on to design the final screens in Figma.
My goal was to create a visual identity that aligned with the brand’s values and message. Also, I’ve checked the competition and took a deep dive into my mood board of references for inspiration.
The visual style i followed is fresh, modern, clean, intimate and friendly.
I designed for a standard device of IOS and Android. My final design is accurate and sterile and it reflects my learnings about my users. They all have a common goal of having confidence shopping experience with their influencer.
USER LOGIN
DASHBOARD
Responsive live screen
This new feature allows you to play and manage the influencer showtime live screen. You can minimize, enlarge and hide the video at any stage according to your convenience during
the live session.
CHAT
Long press for copy/past
With a long press, you can copy
a selected product from the listed items for sale and paste it into to comment give a feedback
or review easly and fast during the live session.
DISCOUNT FEATUR
CART SESSION
INFLUENCER RATING
