Burda Style Homepage and E-commerce Redesign
To help BurdaStyle users find all the features offered through the site, navigate through patterns quickly, and have a seamless checkout process.
UX Check (Jakob Nielsen's 10 Heuristics), Balsamiq, Sketch, Marvel, Invision
Stakeholder Interview/Brand Research
User Research (Task Analysis, User Interview, Research on Site Forum)
Creating User Personas
Feature Prioritization (card sorting)
Paper to Balsamiq Wireframes
High Fidelity Wireframes
What is BurdaStyle about?
BurdaStyle is a magazine company started by Franz Burda's wife. Her goal was to bring fashion and sewing to a larger community, especially those that couldn’t afford designer clothes. BurdaStyle.com is an online extension of the magazine. It’s an online community for users to buy patterns and share ideas.
Who are the users?
Fashion enthusiasts, fashion designers, people who enjoy sewing.
Make affordable patterns available for the public
Inspire users to be more creative with sewing and fashion
Create a community for the users
Finding Common Ground
Step 1. I would conduct a stakeholder interview to understand the business goals and intentions for the redesign. Since this was a class project to redesign the user flow of navigating through patterns and checking out, I did not conduct a stakeholder interview. Instead I did research on BurdaStyle mission and business goals to first understand business needs.
Heuristic Evaluation: Measure the Design Before Involving the User
Step 2 : I am a strong believer in using resources available to make any process easier. I use the app UX check to conduct the heuristic evaluation on the site. Jakob Neilson's 10 usability checkpoints give a good overview of possible interface problems when combined with user research.
High cognitive load to use the website.
Distractions include ADs and social media icons through out page.
Aesthetic and minimal design issues, due to display of much unecessary information on pages.
Major problems with flexibility and effiency of use Accelerators such as search bar and advanced filters unavailable.
User Research, It's not just any design, it's User Experience design
What are the user needs? I read thoroughly the forum on BurdaStyle and saw what users were talking about with each other regarding the usability of the website. My next step was to find users who actually use the site and have them do a task analysis. I asked them to find a specific pattern and buy it through the site. Lastly I interviewed users to understand their needs and goals for using BurdaStyle.
Tell me about your lifestyle.
When do you go on BurdaStyle?
What features do you use on the website?
Tell me more about them.
Are there similar sites you use?
Task Analysis:The task analysis helped to create a user journey map that aids with telling the story of the user through the site. This in forces the goal of creating for the user and fixing exactly the pain points that are causing the problem instead of fixing problems that don’t need to fixed.
Need/Task:Buy a pattern
Interactions:Quantitative data: The task took 21 steps to complete, with users having to leave the site to verify their account. I tracked the clicks and scrolls for the qualitative research.
Qualitative research: Tracking emotions during each step of the process.
Findings:Users were the most frustrated when it came to the checkout process of the site. There were many unexpected steps in the process such as filling out a Capcha question, and signing up as a member.
A few members decided to drop out of the process because they had to sign up, or PayPal was not available. Other frustrations included not being able to find the specific pattern due to search problems and filtering on the website.
There were two types of users for this project. One user who did not become a member, but wanted to purchase patterns. Another user that was an active member, participated in discussions, shared projects and utilized all the features of the site.
The C&C Analysis, because someone already did it and it works!
I do love research, yes. It's not only fun, but it provides deep much insight before solving a problem. The competitive and comparative analysis is one that comes in handy in every project. For this project I focused on brands and sites that were given to me by users during the interview. I also looked at sites that had a big product selection similar to burdastyle to see their organization patterns. Lastly I compared the checkout flow of popular consumer sites such as Asos and Forever 21.
Designing for the user
Using all the research above and personas developed, I designed the webpage according to what the user wanted prioritized. The navigation prioritization was simply done through cardstorting. I asked users to organize features offered on the site from most important to least important.
Designing the checkout flow, I used the C&C analysis to see what were the methods that users are already used to when purchasing products. The most common is a three step checkout process. I incorporated that into the design. The greatest pain point for the user was during the checkout process when users were asked to login and fill in the Captcha.
Low Fidelity Wireframe
Simple sketches on balsamic helped visualize the over design idea quickly. Since the project was focused on E-commerece the changes were mostly related to making the task easier. The C&C analysis and the user research shaped the features that would be added.
After testing these wireframes with the users, I found iterations needed to be made.
1. Click instead of Hover on all links
2. Delete Add to Cart on Product list page
3. Make text more readable by increasing opacity.
5. After Add to cart, create a link to check out straight from there instead of going to the top.
6. Move Pdf documents so its aligned.
Guest checkoutThe most important button added to the website was the guest checkout, seen on sites we compared with. Although BurdaStyle has many users, some users just wanted to buy a pattern quickly without having to sign up.
Shopping cart fits on one screen- the scrolling and clicking added extra steps for the users.
Reorganization of the navigation- organized by users during card-sorting
Selecting multiple filters on product list page- Users who understand patterns were very specific about the design
Removal of ADsDistraction from main business goals
Pay with PayPal- Members specifically dropping out of the checkout flow due to no safe way to purchase patterns
Homepage prioritization- Patterns, blogs, and member projects were the most important for the users Remove captcha - Answering CAPTCHA questions made users anxious during the checkout process
3 step checkout process- mental model (users are used to seeing it and are comfortable with it)
Download PDF after buying pattern- Allows the user to further explore the site
Second Heuristic Evaluation
Test new prototype with more users
Create another user flows
Search optimization and consistency of images on search and patterns