Mesa Moving & Storage
Mesa's mission is to provide fast, reliable and affordable moving services with a customer-centric attitude.
This is a project I worked on during my time at G/O Digital as a senior designer on a small digital marketing team. I was in charge of discovery, wire framing, prototyping, illustration and UX/UI design on this website redesign option. I really enjoyed working on it and was pleased with the final design.
Target User
Millennials with moving/storage needs
My Role
UX/UI Designer
Problem
How do we highlight the company’s services in a way that reaches millennials.
My Process
2. Architect
1. Discover
Content Review
My first step was to review the content and design of their current website from top to bottom. I took plenty of notes in preparation for the client interview.
Client Interview
I jumped on a call with two of the company's stakeholders along with one of our project managers. We walked through the entire site and I asked many questions about their likes, dislikes, needs and their competition to make sure we knew all the issues that needed to be addressed during the redesign of their site. We discovered their goals were to highlight the company’s services in a way that would reach millennials. They shared a few sites they liked that used illustrations heavily and expressed that this was the direction they wanted to go with for the redesign.
Competitive Analysis
To understand who the competition was, I analyzed several of their competitors’ sites. I looked at different aspects of their sites including the design style, how they organized their services, and how they incorporated contact forms.
2. Architect
Wireframe
I made rough hand drawn wire frames of the home screen using the information gathered from discovery.
Prototype
Using the wire frame as a layout guide, I then designed a mid-fidelity prototype of the home screen. Once complete, I jumped on another call with the two stakeholders to go over the prototype. I walked them through each section of the home screen to make sure the layout addressed all of their needs as discussed during discovery. Both stakeholders were happy with the layout, so they signed off and we were ready to move into hi-fidelity design.
3. Design
Illustration
I started by going through the layout of the homepage and creating a list of all the illustrations I would need for each section. Then I did research on the type of illustrations I wanted to do for the project and found some tutorials on how to do them most efficiently. I started with the hero image, and once finished, I used it as direction for the rest of the illustrations and icons.
UI Design
I used a combination of the completed illustrations and the company’s colors to develop a color palette for the rest of the page. I then picked a clean, minimal font that worked well with the established style. With the illustrations, font and colors chosen, I applied them to the mid-fidelity prototype to create a high-fidelity mockup of the home screen.
Client Presentation
Again, I got on a call with the client and our project manager to present the design and get the final sign off for designing the rest of the site. I walked through each section explaining my design decisions and how they addressed their goals. They were very happy with the design and said it was exactly what they were looking for.
What I would do differently
Unfortunately, the client came back later and told us a higher up wanted to go in a different direction. Since I was already working on another project by then, another G/O Digital designer ended up finishing this project. If I could do it again, this is what I would do:
- Make sure I know all stakeholders before start
- Create a style guide and get buy in before design
- Add illustration animations