Mobilosphy Home Page Redesign

Task: Look at mobilosophy.com. Re-design the Hero page (first thing you see when you go to the website), and adapt to all break points. We’d like you to list out your process from beginning till end.

Time Spent: 4 hours

1. Research

Asked questions — Who is the primary audience? What is their goal?

I would like to do proper research on this by observing how clients choose their agencies, interviewing them, etc. and create a persona.

Due to the lack of time, I created a fake persona with assumptions:

I looked at dozens of other competitor sites such as:

http://ustwo.com/

http://www.pixeldotcreative.com/

http://www.hugeinc.com/

https://parall.ax/

http://www.mjdinteractive.com/

https://thoughtbot.com/

Takeaways:

• The brand and personality of each agency needs to shine through the first moment of the landing page.
• The user might be confused as to what distinguishes these many different agencies or services.
• Many agencies offer case studies, or publish additional blogs, articles, magazines, etc.

2. Redesign Overview:

Considerations:

• Reduce text (redesigned using tl;dr versions)
• Maintain consistent, crisp color palette
• Consistent visual aesthetic personality — use of rounded boxes, centered elements, card style

Section 1 — Landing

Victor’s thoughts: Ooh, pretty. What is ‘mobilosophy’? I heard they were an awesome digital agency, is this right?

Impressions: Really beautiful and focused, but lacks content and affordances to user as to what “mobilosophy” is.

Design changes:

• changed color scheme to be more consistent with the rest of the site (the warm tones to sudden blue/white was somewhat disconcerting)
• added a video to the background because there isn’t very much content/info provided to the user even though the background picture is very pretty. A video would offer the user extra information while making efficient use of the space.

Section 2 — About

Victor’s thoughts: tl;dr. Seems to be a digital agency. Cool.

Impressions: How to create visual impact to match the precision and impact of the words? How to really drive to the client the value added of the company?

Design changes:

• Visually formatted the definition of the company to be clear
• Did a mini sales pitch to potential client by emphasizing how important “mobile” device is and linking it to “mobile” meaning change.

Section 3 — Leadership

Victor’s thoughts: Cool team, I think my friend is a friend of that person in the bottom corner?

Impressions: I don’t really know how important the team is to the overall goal, which is to get to the client. If personal referrals are important, or the the client really cares about who the team is, then this is a great place for leadership. Otherwise, perhaps move it further down the page? What are the main use cases for this section?

Changes:

• Reformatted pictures to rounded rectangles
• Reformatted all headings to be bold and punch with some color

Section 4 — Services

Victor’s thoughts: Whoa, lots of stuff. They sound legit. Definitely need digital strategy. Don’t know what the system architecture stuff is though.

Impressions: “About,” “Services” and “Process” seem to have some redundant information. The three icons get the message across, but also seems sort of canned or like stock icons. The gray text is hard to read and small, so it doesn’t seem to signify importance. Instead of offering a list of services that the client might not understand, perhaps try offering a case study instead? That lends credibility and allows the client to draw comparisons of services offered. Especially as we talked about during our conversation, if Mobilosophy specializes more in certain industries that can be a selling point through case studies targeted at a specific audience.

Section 5 — Process

Victor’s thoughts: Okay, concept looks really good. Where to go after this? Oh okay, click this little white dot? Design, cool. Next is probably develop? Yeah. (doesn’t finish entire process)

Impressions: Very pretty, like the sample mockup on the right and the sub-headings. The navigation through the dots is a serious problem.

Change:

• Created a visible sub-menu that changes the content of the page on hover over. The user can see immediately what the four steps in the process is and go directly to that.

Section 6 — Clients

Victor’s thoughts: Ooh, they seem to have quite a lot of clients. Heard of some of these like Nestle. Do they help startups / smaller clients too? Don’t know the others…

Impressions: Great to have past clients, but there isn’t any additional information given. If a portfolio in getting hired in UX is just as important as a portfolio as getting hired for an agency is, then this needs to be a prominent section.

Change:

• Created a card format that darkens the image and the logo / name comes on top and the ability to learn more about that client project (desktop)
• Created a card format that that offers large images that gives hint on the nature of the project, followed by the name of the client in an easily scrollable format (mobile)

Rest of it — looks great, did not change.

Victor’s lasting thoughts: They’re based in NYC and so am I. Great, let’s shoot them a message. I do have some concerns, like whether they’ve worked with clients in my space before, and whether they work with startups.