ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
BootsWebMD Mobile Homepage
Role: Creative Direction, Design, UX, UI
Adobe XD, Balsamiq, InVision, Illustrator, Photoshop
Objective
My team tasked with creating a responsive BootsWebMD mobile homepage that mirrored the BootsWebMD desktop homepage, but taking into consideration a few challenges. Being that the initial BootsWebMD desktop site was built earlier as stand alone and non-responsive, an effort was made to construct a new responsive mobile version. Challenges were that there was an incredible amount of information that had to be implemented in able to fit mobile specs, as well as a consideration for continuous scroll navigation. There were also some important features, however, that we were going able to transitioned over, and we had to find alternate workarounds. Those were instituting a dynamic lead module alternative, site navigation, and article page formatting.
Process
KICKOFF
RESEARCH
DESIGN
LAUNCH
MEASURE
REVISIT
• Discovery
• White Board Session
• Surveys
• Usability Testing
• Initial Sketches
• Wireframes
• UI Libraries
• User Testing
• Internal Testing
• SEO
• Feedback
KICKOFF
An initial kick-off meeting was conducted with both the US and UK BootsWebMD teams to solidify budgetary and timing constraints, as well as page view and visit expectations.
Discovery
We then instituted a discovery meeting to solidify which parts of the desktop site elements we wanted to be carried over onto the new BootsWebMD mobile site, as well as any features unique to the mobile platform and any updates to the existing UI and page navigation. We then identified strategies and ideas on how we were going to go about solving the afore-mentioned navigation and article page issues.
White Board Session
From there, conducted a white-board session with the Web Development, Brand Content and Account Management teams to identify any further page requests and unique features we felt should be included. We also conducted a hybrid competitive analysis interview with users of the main BootsWebMD mobile site to identify any pain-points or inconsistencies with that side's user experience.
RESEARCH
Surveys
We then sent out surveys to a selective group of our US audience and team members to critique their experience and pain points when navigating the WebMD site. What elements worked and didn't, page load duration, and content quality.
Usability Testing
We also had our audience navigate, real time their user journey as they navigated the main WebMD site. Again, we asked for feedback on page load and content and speed.
DESIGN
Initial Sketches
We then instituted a discovery meeting to solidify which parts of the desktop site elements we wanted to be carried over onto the new BootsWebMD mobile site, as well as any features unique to the mobile platform and any updates to the existing UI and page.
Wireframes
With information and brand requirements gathered, I started to concept initial low-fidelity wireframes and page flows layouts to plot out page navigation and information hierarchy.
UI Library
I then solidified all UI variables and any special CSS requirements for build with the Web Development team.
LAUNCH
User Testing
After initial approval of UI and page specs, high-fidelity concepts were then mocked and presented once more for final build. We then conducted a user testing session and identified any remaining issues with the approved UI and page flows. An Accessibility Audit was also conducted to address special needs issues of our visitors.
Internal Testing
We also conducted an internal testing matrix with our US and UK team members who were more experienced and familiar with how tools and layouts worked.
MEASURE
SEO
We tasked the internal SEO team to keep track of numbers throughout the first year of launch to make sure we were on target with page views and duration goals set before. A year and a half after launch of the BootsWebMD mobile site, mobile visitation increased 16% over the desktop version, proving our initial speculations that the UK audience were not only more receptive of a mobile experience of the site, but they also had more time to initiate site visitation and duration.
REVISIT
Feedback
Overall, we were very pleased how the transition to a co-brand WebMD site was. There were a few challenges though, such as article pages not being able to translate over to mobile as well as pagination. Also, the European nomenclature of daily life was another issue to get used to. The other challenge we faced was having to write in a European style. All in all, the co-brand took in a respectable revenue, surpassing $4 million in revenue at its peak.