Lenovo Launch Rework
Lenovo is one of the world's leading personal technology companies, producing innovative PCs and mobile internet devices
Reworking an existing layout for desktop into a mobile web experience for an agency as they did not have enough internal bandwidth to handle this additional work that they were not expecting
The team had already completed the desktop experience of this launch and gotten tentative approval and needed these elements reworked to work on a mobile before the client would sign off fully on the project.
I came in and turned this workaround in 2 days and they were able to meet with the team later the same week and provide them with what they needed in order to move forward with the project
If it isn't broken don't fix it
Since the team had gotten signoff on the majority of the desktop site already, I decided to take a different approach to my initial concept phase approach of either whiteboarding or sitting down with a pencil and a notebook
Instead, we took the existing website components and printed them at a smaller size to explore how we could reuse the existing elements in a smaller format for the launch.
This was an exploration of how to add a mobile navigation and reuse all of the existing components. You will see the final designs enhanced this idea into a more fully formed idea
- Ths initial concept was to reuse existing elements to make a responsive site. This was early on in using responsive sites so I was still learning how to approach them
- These were used as initial conversation points and additional brainstorming was done alongside this on whiteboards, but this general concept and idea was what was focused on in the overall concepts
This was an exploration of more of a landing page concept reusing all of the existing components from the approved desktop designs.
These were used as initial conversation points and additional brainstorming was done alongside this on whiteboards, but this general concept and idea was what was focused on in the overall concepts
The wireframes for the multiple product launch were essentially the same, with one exception the A706, which had additional information the company wanted shown that were not in the others.
780, S920 and S980
The only differences between the layout for the P780, S920 and S980 was the content in each section.
- Main header
This is persistent between all sites and allows for branding to remain consistent in all areas
- Main header Copy & Image
The main header copy & image were specific to each product
Learn more was the consistent Call to Action (CTA) throughout all of the product pages
- Persistent navigation
Since the pages all were focusing on the same 6 areas (Screen/Form/Camera/Power/360 View/Video) we decided to make that always in the same spot on every page to ease consistency of navigation
- Navigation to other Phones - CollapsedFooter/Social Share
Navigation to Other PhonesThis is where we had a huge challenge in figuring out the best approach in how to accomplish showing the multiple phones. What we came up is a tray where when one is expanded, the others would stay in this collapsed state so you could see that there were other areas you could explore
Once you click the learn more button, the page above would load with the proper content based on whichever you clicked on, and the others would stay collapsed
Knowing what I now know this could easily be solved with a hamburger menu and would probably fight for that - but the idea was that they didn't want the menus hidden because this was a multiple product launch and all needed to have the same weight
This was the first project I had ever worked on that had a solely mobile focus and therefore the learning curve was both steep and not yet complete.
Knowing what I know now the approach I would present would be entirely different and definitely more focused as mobile design, in general, has become more focused, but I do feel this was the best we could do at the time we did it and with the knowledge I had at that time