Burda Style Homepage and E-commerce Redesign

 

 

Goal:

To help BurdaStyle users find all the features offered through the site, navigate through patterns quickly, and have a seamless checkout process.

Project Type:

Class

Team:

Solo

Tools:

UX Check (Jakob Nielsen's 10 Heuristics), Balsamiq, Sketch, Marvel, Invision

Process 

Stakeholder Interview/Brand Research
Heuristic Evaluation
User Research (Task Analysis, User Interview, Research on Site Forum)
C&C Analysis
Creating User Personas
Feature Prioritization (card sorting)
Paper to Balsamiq Wireframes
Usability Testing
High Fidelity Wireframes
Prototype

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. 

Business goals: 

Sell patterns
User on-boarding
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.

Findings:

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.

Research Questions


Tell me about your lifestyle.
When do you go on BurdaStyle?
How often?
What features do you use on the website?
Tell me more about them.
Why BurdaStyle?
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.

 
 
 

Synthesizing research

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. 

Artboard1.png
Artboard.png

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.

 
Screen Shot 2017-10-26 at 9.00.52 PM.png
 
 
Screen Shot 2017-10-26 at 9.02.18 PM.png
 
 
Screen Shot 2017-10-26 at 9.02.34 PM.png
 

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.

    

 
 
 

Prototype Features


Guest checkout

The 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 ADs

Distraction 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

Prototype

 
 
 

Next steps

Second Heuristic Evaluation

Test new prototype with more users 

Create another user flows

Search optimization and consistency of images on search and patterns

Repeat process.