Wireframe V2 - Homepage (Signed In)
Bling
A desktop eCommerce website connecting makeup enthusiasts with each other and with vegan & cruelty-free beauty products
Background
Bling is an eCommerce beauty website with a goal to bring technology and trust to the beauty industry. Their mission is to make beauty product research easier, faster, and smarter. Bling provides ingredient analysis, cruelty-free status, vegan status, and reviews for beauty products. Users can research their current beauty products to determine if those products are 100% vegan and/or cruelty-free.
The Challenge
Our client's initial product consisted of only a basic landing page and very simple product pages which did not incorporate product pictures or methods of purchase. She wished to transform Bling into an eCommerce and social media website where users can research products, write product reviews, connect with friends, and purchase products through affiliate links on the site.
She also wished to maintain the "simple and cute" style as well as keep the existing color scheme and logo.
The Solution
Our design team developed a more robust and welcoming site so users can immediately discover new products, search for vegan and/or cruelty-free products, or sign up to create a profile and connect with other makeup enthusiasts.
We also incorporated an eCommerce feel to the site with user-friendly navigation in the form of an identifiable site search in the top navigation, footer navigation, product reviews, product pictures, and a wish list feature.
Role
UX/UI Designer and UX Writer on a team of 5
Tools
Figma
Process
Research
Ideate
Wireframe
UI Design
Reflection
01. Discovery & Research
01.01 Client Brief
Bling's founder identified her vision of what Bling should provide for users. Her main goal was to develop the site into a trusted tool where users would be able to:
Connect with other makeup enthusiasts
Discover new vegan and cruelty-free products
Share product reviews
Purchase products
We also identified that Bling's users are predominantly vegan or cruelty-free product users and makeup enthusiasts. They range in age from 20-40 and are mostly female.
01.02 Client Questions
After reviewing our client brief, the team wanted to clarify a few key points of the founder's vision. We developed a list of questions in order to gain a better understanding of what existing social media and eCommerce websites the founder liked.
Our main takeaways from our client's answers were:
For social media comparisons, she liked TikTok's simplicity and disliked Facebook's overall look/feel.
For e-commerce, she liked Amazon's search feature and its prompt to buy other similar products.
She also liked Etsy's overall look and feel.
We also determined that while our website design would incorporate affiliate links, it would be important that the founder could easily update the website later as she intended to eventually transform the site into a more traditional eCommerce platform.
01.03 Competitive Analysis
The client provided social media and eCommerce websites that she felt best reflected the functions and designs she desired in the Bling website design. These were TikTok and Facebook for the social media aspects of the site and Amazon, Etsy, and Ulta for the eCommerce features. The team then focused on conducting competitive analyses on those websites for our initial research.
Summary of Findings
Analyzing UI details from both the social media and eCommerce platforms, we identified that:
Users need to be able to create a personalized profile
Navigation should be clear, obvious, and easy to use
The site's feel should be clean and simple
The site should have clear calls to action especially where purchasing or reviewing a product was involved
01.04 Existing Platform Review
Next, our team reviewed Bling's existing website which operated solely as a search function for users to determine whether a specific brand was Vegan and/or Cruelty-Free.
In addition to the ability to create a profile and wishlist, we identified that the following features needed to be added to transform the site into an eCommerce and social media platform:
Simple navigation so user could browse and discover new brands and their respective products.
An ability to sort, filter, and "favorite" products.
An ability to search for friends or get friend suggestions.
The option to review products.
An ability to purchase products (through affiliate links).
02. Ideation
02.01 User Stories
After conducting our research, the team created 18 user stories to determine the core needs of the user when using the Bling website. We then sorted them from the highest to the lowest levels of importance. Our goal was to utilize the most important tasks for the user in order to develop a minimum viable product (MVP).
After gaining client buy-in on which tasks she deemed the most important, we had a list of 12 Must Have user stories which we organized into 6 topic categories.
Must Have User Stories
Onboarding
As a user, I want to be able to login and create an account so I can add and save reviews.
Search for Brands & Products
As a user, I want to be able to search for brands and products so I can find more information on products I may want to purchase.
As a user, I want to be able to search for specific products so I can find products quicker/more efficiently.
As a user, I want to be able to sort products based on criteria such as: price, reviews, vegan, etc. so I can find products that fit my needs more efficiently.
Write & Find Reviews
As a user, I want to be able to write reviews on brands and products so I can keep track of products I have reviewed and may or may not want to purchase again.
As a user, I want to be able to write reviews on brands and products so I can let other consumers know whether or not they should buy these products.
As a user, I want to be able to see who in my network has rated brands and products so I can see trusted reviews from people I know.
As a user, I want to be able to view reviews of brands and products so I can see other experiences users have had with a product.
Brand & Product Information
As a user, I want to be able to easily understand if brands and products are cruelty-free, vegan or not, so I can make informed purchases.
Wishlist
As a user, I want to be able to create a wish list of brands and products so I can reference the list when shopping.
As a user, I want to be able to add brands and products from wishlist to cart so I can buy products that I’ve wanted quicker and more efficiently.
Purchasing
As a user, I want to be able to purchase a product on an affiliate website.
02.02 Site Map
Next, our team developed a site map in order to ensure that when we began the next step of wireframing, that we didn't forget any screens which would be needed for the flow of each user story.
Developing a site map was also integral to helping us determine our information architecture and how to structure our navigation menus.
02.03 User Flows
To ensure that our users could use the site effectively to complete their tasks, our team lead created user flows for two of the main tasks: Searching for Products and Creating an Account.
The user flows helped us determine that our site map and information architecture were sound before we moved on to designing low fidelity wireframes.
02.04 Sketches
Next, the team decided to have each member produce one or two sketches of a possible home page and also divided up the other screens.
My assigned screen was the Register a Brand page and I created an iteration based on the user stories and on the client's original google form previously used to gather Brand information.
This allowed us to gain a better understanding of what each team member envisioned for the overall site redesign.
02.05 Homepage Iterations
Low Fidelity Home Page Wireframes
In order to solidify the design style for Bling, we decided to each create a low fidelity wireframe of our home page sketches.
We then met to determine which home page design best fit the user needs while also being while also providing a pleasant user experience. We ended up pulling features and designs from several wireframes to create a more unified home page that captured what was needed to for users to effectively complete user story tasks.
02.06 Low Fidelity Wireframes 1
Once we decided on a home page design, we used that, our sketches, and the user story tasks to inform the design for wireframes of other pages.
Utilizing low fidelity wireframes allowed us to determine how dense information could be on the pages without overwhelming the user. Wireframing also gave us the opportunity to make major changes to page layout as needed.
02.07 Low Fidelity Wireframes 2
After client feedback on our first wireframes, we created a second iteration of wireframes which incorporated:
Flows for users not logged into the platform
Clarifying confusing placement of some buttons and the flow of the site
More spacing between elements on the home page
Separated Login and register pages.
A header with clearer navigation.
More effective filter and sort systems for products and reviews.
UX Writing/Copy
At this stage in the design process, we also reviewed our UX copy to ensure our wording was strategic and allowed users to intuitively find what they wanted on the website.
In a collaborative meeting, I made suggestions for clearer copy in areas such as the hamburger menu's navigation, the bottom navigation, and the wording used for buttons and links. My goal in updating the UX writing in these areas was to ensure that the user had a very clear idea of what would happen when they made a menu selection or pushed a button.
03. Design
03.01 Brand Platform
Before moving on to high-fidelity wireframes, our team developed a brand platform. Each member of the team shared what their vision for Bling's brand platform would be then, while incorporating the client's existing logo and colors, we created a brand platform by sharing our likes, dislikes, and whether or not a style or color fit the our client's vision.
-
Our Moodboard helped us capture the fun, simplistic, and cute look the client wanted.
-
Our Inspiration board allowed us to identify UI that fit our brand attributes of Charming, Fun, Simple, Trusting, and Organized.
03.02 UI Component Library
Throughout the wireframes and high fidelity design process, the team lead and I created components, variants, and button states to ensure continual consistency throughout the project.
In order to stay organized and ensure easy access for other teammates and the project's developer, I created a shared UI Component Library.
03.03 High Fidelity Screens
Once our team received positive feedback on our second iteration of wireframes, we began developing high fidelity screens. We went through multiple iterations to ensure the UI and overall design fit the client's vision while also ensure total functionality for all user flows.
We designed over 130 screens and maintained consistency by utilizing our component library and style guide.
A snapshot of some of the 130 screens designed.
03.04 Prototyping
Our next step was to create a prototype of the website. Though we didn't conduct usability testing on the updated website, creating a prototype allowed us to ensure that the user flows worked and that we hadn't left out any required screens.
A small snippet of our Developer Handoff file
03.08 Developer Handoff
Once our high fidelity screens were approved by the client, I created a developer file for hand-off to the client and developer. This file contained annotations regarding interactions, element spacing, and font sizes. It also demonstrated the intended screen flow.
In addition to the developer file, we also provided the style guide and UI component library for more seamless development.
04. Reflection
Looking back
I really enjoyed helping flesh out the Bling website. It was an exciting challenge to add elements of both eCommerce and social media to the site while still maintaining the heart of Bling's purpose - to make product research easier, faster, and smarter.
Some key takeaways from this project were:
Communicate early and often. This was especially important as we dove deeper into wireframe iterations. Communicating with the other 4 designers was key for ensuring consistency throughout the design.
Collaborate and annotate. Some of our best designs came about when two or members of the team were able to work collaboratively on a design together. Since our team was spread across four time zones, this was not always possible and the next best option was to ensure we annotated our designs to clarify screen flow and interactions.
Looking ahead
I look forward to seeing the Bling website in the future. While our final iteration of the website incorporated an ability for users to purchase items through affiliate sites, our team ensured that the existing design would account for a shift to direct sales on the site in the future with minimal changes.