|Project||mydlink Site Redesign|
|Date||Aug to Oct, 2015|
|Services||UX Consultancy, Design|
|Responsibility||My role was to identify key information users need on landing pages and make sure they looked good on different screens. And helped product team get mydlink website redesign on the roadmap.|
|Tools Used||Sketching, HTML/CSS/jQuery|
Notes: The UI and Logo shown in this use study are the design I built and finished early Dec 2016. The UI and some other component styles have changed since then, as the visual team may have some changes to it after my work with them was finished.
mydlink site has not implement responsive into their website since this platform still were available to mobile users. My design manager, Emma Lee, asked me for help for giving some ideas of site redesign. Not only for the purpose of making site responsive, but providing some useful information users in need. I started the work right after discussion.
Though there was no limited time for this work; we, after discussion, all agreed with making features’ flow of IP security cameras first. These included some landing pages and other logged in pages. Those were actually and currently primary activities happened in our site.
I started by understanding of who will come to our site, I supposed there were three main kinds of following users:
Each of them has their own purpose and the things they care about. I tried to think from their perspective view by talking to real users and gathered some questions from them.
To response their questions, I did two different ways. I thought from their perspective views to give out product information they can easily make sense. I mean to make it easy to understand. Like we enter the shop for product purchase, we might ask for some suggestions based on our needs from basic, advance to other particular features. So thinking about that makes me write much relevant contents to our users.
I also did a lot online research to entrust the visitors how security systems can help a lot by telling about the facts and numbers. These are good resources as content.
Structure contents not in order to improve readability but serve for the purpose of what you want to achieve. Except of the heading area I left for marketing to promote something, I deduced our goals is to sell more devices on our website. So thinking about how to convince visitors in our products in a few seconds before they leave was important, this structure of landing page would mainly served for User 1 and User 2. Check the whole Site structure.
I sketched a bunch of page layouts for landing pages while thinking about the structure. This allowed me communicate and got a multiple of variations out quickly and iterated them before setting on one for prototyping.
Wireframing in HTML gave us more realistic sense of how the design feels. They are interactive using hyperlink, active states, dropdowns, and animations. It helped for actually communicating and collaborating with teammates compared to verbose document. On the other side, it allowed users to play around it to share their feedback. For testing on creative strategy and usability hypothesis, it actually worked better than static wireframes. (Log in to see other features flows)
I threw back this work and found out I might make a wrong decision on which type of user I should focus on. The reality is users come to the site mostly for the services instead of products (Scenario: people discovered products at D-Link site and bought it somewhere and registered it at mydlink site for cloud service. They had knowledge of D-Link ahead of mydlink). The product user, User 3, is what we should focus on instead of visitors.
So about contents priorities, it is supposed to highlight service after purchase, frequency questions, and camera utility like which location is better to put on camera...etc. Better service quality can raises product selling as well, at least for mydlink.
I always think about what contents might impact our users the most by reflecting my user research. To avoid making a wrong UX strategy, I would incorporate sketch board to engage my teammates, PM, and developers for getting better picture of our product and service before jumping into my work.