Gårdssällskapet

Mobile website rework - Loyalty program

--Illustrator --Figma --Photoshop --Workshops

Mission

Rework of mobile platform and concept for future implementation of a loyalty program

Gårdssällskapet was a school project in where we were to work with a real client. In this case our problem to solve was a future one. Gårdssällskapet was looking for a explorative solution on how to retain customers and how to attract new ones. They had seen an increase of activity on their platform through mobile visits and wanted to make their mobile platform more inviting. Another future idea they wanted to explore was an implementation of a loyalty program.

"Make our mobile platform more user friendly and loyalty program ready"

Process

When starting the project the first action that was taken was a analysis of the systems current state. This was made to analyze the flow and where, at the moment, there could be problems and where improvements could be done. There was also an element of looking into loyalty programs and determining what was suited for this situation.

A cognitive walkthrough of the current system was preformed with specified tasks in order to locate the problem areas. These problem was later categorized and rated to be able to find patterns and clusters of problems.

Decisions

It was important to clean up and simplify their current mobile platform. Both to make it easier to use since most of their orders were now being done on a phone but also to make way for a loyalty program to be introduced. At the start a clean-up of the UI was done with improvements to the navigation and general flow. This was to create a better understanding for both first time users and for regular customers.

Design

The design had to follow their current color pallets and their brand image but was enhanced by adding some highlight colors at pain points. This was to ensure a smooth experience for a customer and so that they could easily follow their steps and quickly change something if they did something they did not like or intend to. The highlight colors were also introduced at certain points to reveal possible actions.

Wireframe

When the tests had been completed and categories of problem had been discovered, the sketching process began. The main parts of this was to update the current UI and to implement the solutions found to the existing problems. It was also of importance to add the look of the new loyalty program and how it could be implemented into the design.

By following the sketches and previous research, wireframes were produced in order to have a better look and feel of what might become their new interface. It also gave opportunity to see if the new intended flow made sense and was good for the new scenario. Users were asked to once again come in and discuss this new flow and changes were made accordingly in the cases were it seemed appropriate.

Prototype

For an even better look and feel digital mockups were created to further boost the sensation of a working system. This also gave an opportunity in seeing the design in full color and see how everything would be sewn together.

When all the frames of the digital mockups were done, the real prototyping started. With Figma the prototype was brought to life.

Here we can see the first prototype that was created with the new flow and redesigned interface. There was only time to make on working prototype since the project only ran for four weeks.

Learnings

By working with a "real" client I learned the importance of having a close communication with them helps everyone. To be able to discuss the problem on their level and see too that the problem is understood from all ways.

Make sure the client approves of design choices and always have an argument to why something was done in a certain way. It makes everything much more fluent and will result in a better end product. Also the importance of structured research to be able to adhere to the actual users! If they don´t like it why should someone else.