Project 1

Project & Goal Outline 

Our project 1 focuses on redesigning an existing website that doesn’t quite function to a great extent. In addition to redesign, we would also have to present a client report based on the client, their website, and our redesign. 

After splitting up into our designated groups we were quick to outline our ambitions and goals as well as sign a contract. We felt that it was important to be vocal about our goals, motivation, and effort to get an idea how much work we wanted to put into the project. Our agreement was that we do everything required of us, and when we have time we can add more functions, make it more appealing, and etc. 

We have also made a timetable and a set of goals to accomplish within that time frame, but also to note down what we accomplished. 

Finding Bagger Blomster

It took us quite some time to find a website that was semi-functional, mediocre looking, and just in general badly designed. Upon many searches on the internet, my teammate found a local flower shop not so far from here. Both my team and our supervisor thought it was a great website to redesign as there were many components still missing, though it was quite easy to navigate. However there was a lack of personality, value, and design to the actual website.

User-testing on the Original Website 

We conducted several user tests of different types to see how a regular user would navigate around a website and what sort of difficulties they might run into. 

Our first round of testing was based on Think-a-loud retrospective probing. Where we allocate around 5-10 minutes for the user to browse around the website as much as possible and pretend to buy flowers. At the same time the users would think aloud about what they are doing, feeling, and thinking. Afterwards we would ask them a set of questions to follow up on their experience. 

• What did you think of the design of the website?
• Was the website intuitive? Was it confusing?
• What works?
• What does not work?

Our general findings were that it lacked basic things such as contents, name of the business, colour theme, low quality photos, and important information. 

Alongside with think-aloud-retrospective-probing we have also conducted Open card sorting. Where we write down major features of a website on index cards, and we ask users to organise the cards into categories in which makes sense to them. 

Mood Boards, Style Tiles, and Wireframes 

One of my group members was fortunate enough to talk to the actual owners of the Bagger Blomster flower shop.  She then understood the personality, mood, vibe, and value of the shop. A moodboard was first created to ensure that we had some sort of vision going on. 

We created different versions of style tiles with each improvement we felt that we were giving more value and life to Bagger Blomster through their website redesign.  We wanted to incorporate different fonts which reflect the personality and value of the business but are also legible at the same time, as well as include colours that were bright and lovely like flowers. In the second round we realised that we needed more down to earth colours and drew inspiration from the sunflower picture. We also included icons from a royalty free base to give us an idea of the theme we wanted. At the end we went for more cooler and earthy tones to ensure that it wasn’t too much for the eye to handle. We opted for a blue pastel hover as it was easy on the eyes but also easily distinguishable. Another one of my teammates also recreated their logo to further reflect their personality and value. 

Drawing inspiration from all sorts of online platforms in which you can purchase different products, we drew up a wireframe. Consisting of basic elements and layouts we really started to get a feel for this project and what we can do.

Prototype Phase 1 

To the best of our abilities and effort we made the redesign as close to finish as possible. The reason we did this is because we wanted as much feedback as possible from our work. With our colour theme added, photos of the different flowers they provide in their shop, shipping services, and a contact page we were able to conduct another round of user testing. 

We used the same set of questions we used to review the strength and weakness of the original Bagger Blomster Website to ensure that we can keep these tests controlled. We received again similar answers of small basic functions, and were quick to resolve them in the final round of the prototype. 

Prototype Final Phase 

Using the constructive criticism we got from our usertesting, and to the best of our abilities we improved and edited the final phase of the prototype. For example we added more features such as a dropdown menu, search filters, personalised messages, contact pages, and about us, and more interaction with the different flowers available. We made sure that before adding the final product into our client report every single function and interaction worked smoothly. 

Client Report

Though creating the Client Report was pretty much straight forward, it was hard in the sense that we had to prioritise certain information over others as we had a time limit for presenting. However, we may have gotten confused at one point, along with many other groups, that when presenting to our client, the client does not have the same knowledge as us. They are not familiar with principles such as CRAP, or the different user testing methods. One of the feedbacks we got as the first group to present was that these things could scare or overwhelm our client so it is best to tone it down to a level that they can easily understand it. I also got some personal feedback on my speech. I read off word to word on an index card as I was not confident enough to just have key words in Danish to guide my speech. I know that I had the option to present in English, but I wanted to push myself to present in Danish. Now I know that next time I should really try and use keywords to guide me as it’ll make me sound more sure and confident and cancel doubt when presenting to my client.