OVERVIEW
RESEARCH
DEFINE
DESIGN
VALIDATE
FINAL DESIGN
CONCLUSION

Re-design Frisp website to make our website more appealing to our digital customers? - Frisp Marketing Team

Sure, the rebranding was yielding good results, but despite having proper/updated SEO strategy, AdWords, and everything correct, the Frisp website was still not gaining enough customer attraction. Frisp marketing team simply wanted us to redesign in order to make it more appealing. We knew we had to redesign the website to reflect new rebranding scheme but that just wouldn't suffice.  

Supported by the physical rebranding (Label and Sachets) it was clear that we had two major user demographics. Frisp marketing team had conducted an intensive research to come up with the information prior to this phase regarding their product and customers. They were clear that their targeted user group mainly focused children between the age 8-14 and fitness enthusiasts, but this wouldn't necessarily work on digital design because I didn't think there were that many children between 8-14 who would buy products online (credit cards and parents supervision).

INITIAL OBSERVATION

USER PERSPECTIVE

We had a few hypothesis on why the website was not working for Frisp, but our main observation was Users were unsure if they landed on the correct page of Frisp. We came up with this hypothesis based on extremely high -bounce-rate provided by the marketing team. The look and feel of the frisp (actual product/sachet) looked nothing similar to the look and feel of the website, the logo was different and there was no picture of actual product anywhere on the landing page.Later during the testing phase, this hypothesis was validated with users, which turned out to be true.

In this phase of our design process, we will be looking into common design/usability flaws in the existing frisp website. The whole purpose of this design exercise was to aid user-researchers on their research process and help us find out common flaws to help us prevent these issues on the redesign of the website.
We will be dividing the initial page of frisp into 4-sections: Navbar, Hero section, Content and Footer and look at them individually to look at the usability flaws.

We conducted heuristic evaluation as a part of usability test on our old frisp website. We used Nelson's Heuristic evaluation framework as a guiding principle for this evaluation.
We hired 3 evaluators based on our persona sheet, and each of the evaluators were called-in at a different time of the day. The reason behind calling evaluators separately was to avoid them talking with each-other to avoid influence on their test result and also to make sure that an observer could watch whats going on with one participant at a time. During the evaluation, the evaluators would share their finding/comments to the observer and the observer would record/note the findings down. Other than that there were no communications between observer and evaluators.

Note: The name of evaluators have been changed in order to protect the confidentiality.

Based on all the data we collected we tried reframing the problem, so that every time we are about to make any decision, we would think of this question in our head and see is it contributing to what we are trying to achieve.

Reframed Problem Statements

We started with some Lo-Fi prototyping simply by using a texter and our drawing board. We came up with at least 6-sets of wireframes and decided to proceed with the ones below. The whole concept of these prototypes were to make sure, that we get the initial ideas or basic picture of what the site is going to look like. we haven't used any colours and have left the components and other detailed ideas of website so that we don't get attached to any designs that has been done. We were sure that these wireframes from the initial prototyping phases were going to be changed in an immense amount once we start building the visual design.

The lo-fi wireframes were enhanced into Mid-Fi prototypes to get an approval from the board, which was to be further designed into a Hi-Fidelity prototype. We started working on our first version of our frisp_high fidelity prototype. The picture below is our first version of the prototype.

 

 

Now that we have at least one page and some form of design consistency going on,  we needed a structure for the website for rapid prototyping, so we came up with a design system to aid us on design. We made sure that we created nested components/symbols so that it was highly customisable

 

We had first iteration done and dusted, we incorporated everything included In the design using the frisp website and decided to run the usability test it with our first set of users that were recruited. We gave participants to complete scenario based tasks that would test the usability of the main function of the website. This phase was really essential and it allowed us to make important decision on our final design.

SCRIPT for usability test session

 

We took notes of the areas/ tasks where users were struggling and seem confused, unsure of what they were doing. The short interview session at the end of the session helped us more on figuring out what needed to be changed.

After several iteration and design validation later, we decided to replace the existing frisp website with a new one. The implementation was done using WordPress . The decision to use WordPress was made because, the existing Frisp's website was built using WordPress and it was the platform familiar to everyone working at Frisp. There were few hiccups during the launch, but everything was fixed and the Frisp website is now up and running.

The current frisp implementation can be viewed at: frisp.com.au

According to the frisp team, the rebranding has yielded a very positive result and increased sales of frisp. They have decided to add more Frisp products to their existing product space and they are positive that it'll be a success.

It has been reported that the customer bounce rate has decreased drastically. We are yet to find the exact numbers on these reports. Overall, Frisp seems to be doing great with rebranding project.