The re-design of MentFort’s website was our last project in school, which was our exam work. We had a client who wanted us to investigate a possible re-designing and develop a design suggestion for her current website to fit her company’s key activities.
Work process
Using design thinking methods throughout the work process. With timed workshops, timed design phases and a backlog to make sure we could deliver the prototype before the deadline.
Time and tools
Tools: Figma, Microsoft, Miro, Photoshop Designed by: Camilla Carlsson and Dan Karlsson Project time: 30/11-2020 18/12-2020 Client: MentFort
Goal
First and foremost, we wanted a happy client where we could feel that we meet her business requirements and that she thought it was a good fit to implement on her website.
Our goal of this project was to deliver a clickable prototype for a design suggestion of her website.
Empathize
During the empathize phase we wanted to get to know the client more and understand the task in hand. We involved her in timed workshops together focusing on her business and her needs. To achieve this, we used models such as; The value proposition canvas, business model canvas, the golden circle, mood board (based on the clients perspective), color alternatives and brand personality spectrum, competitive analyse.
Define
From the empathize phase we got several insights which we could work further with during the define phase.
Gathering all data from our empathize phase using affinity mapping we could narrow down our focus area, which was:
Re-brand the website so that it works for both B2B and B2C Re-focus on the clients key activities An accessible website A website with a Nordic touch but can work on the global market
Ideate
Once we got our focus areas in place we worked in Miro to do a card sorting to structure the content. We later transferred the card sorting to an IA (Information architecture) using color codes to describe internal content/links vs external content/links.
Prototype
Wireframes
After our cardsorting we spent a great deal into research and discussion around the area of rebranding and how we can put the focus on the Mentforts key activites. Once we were happy with our wireframes we made user testing to make sure the structure was clear and consistent throughout the design. With the insight we got from the user testing we could continue moving forward to the mockups.
Content
Whilst working on the moodboard we started to look at the content together with the client. Focusing om Mentforts key activites, SEO and a warm tone of voice to appeal to both of her target audience.
MockUps
As we had previously had had workshops with the client in the early stage of the project, we knew which direction she wanted to go in terms of look, feel and who her target audience were. With that in mind we could look deeper into what colorcodes would match with the clients direction.
Design suggestion given to MentoFort.
Testing
Final testing before handover documentation was done with few users. Due to corona times all testing were conducted digitally over teams sharing the screen and taking notes while the user were conducting the test. Few tweaks were done before handing over the prototype to MentFort.
Prototype
We wanted to present the prototype with a clean look and with a modern touch. We did not want too much animation to aviod disturbance for the users, focusing instead on a responsive website, hover functionalties on buttons as well as input forms. It was also important for MentFort to continue using accessibility funtionalites using a plugin.
The mediakit was part of the handover documentation to make sure a smooth transision from us to the future devlopers. In the mediakit we demostrated for example; buttons, color codes, grid systems, fonts, icons and logos as well as all compontents.
Result
We reached our goal to make our client satisified with the suggestion of a new design showing off in the prototype. The new design highlights the companies key activites as well as a cleaner look. The plan is to implement the new suggested design onto her website in a near future.