CONFIDENTIAL
pavan kanwar Lean UX UI Design
case study UX UI Contract. Working a startup towards an MVP.
1. Strategy, Brand & UI. 2. Personas. 3. User Journeys. 4. Wireframes. 5. Visual Design.
* A more holistic compilation of my design & development skills documents is available on request. Each document title is as follows: Design Studio or IDEO inspired processes (in context), User Interviews, Observations, Site Maps, Conceptual Models, Heuristics, Analytics, Requirements Specifications, Tying UX & UI & Brand together, UI Assets, Icon Design, Wireframing interactions vs. Static Screens. Invision Mobile App Prototypes. HTML5, CSS3, Javascript, JQuery, AngularJS. Hobby learning: Pi-Bot: Robotics & Programming, Coursera HCI & Gamification, Udacity, Bloc.io Android.
1. Strategy, Brand & UI Project:
Rentr, a Property Management Mobile App built with Phonegap for iOS & Android.
Alleviating user pains & creating a great experience. UX. A strategic review of the application’s core functionality & users started from the landing page. Working from the very basics we questioned the product positioning in line with the speed to market that could be gained by keeping iterations simple and clear. The following only shows the before and after, as opposed to screens which were created during discovery to eliminate or select alternate strategic routes. For each we created a 3 word tag-line to make the message concise & set the scene on first impressions. Routes ranged from ‘broadcast your property’ (across the web & social media) or ‘pocket property manager’. Decisions driven through discovery sessions unveiled dependencies on the tenant half of the rental equation.
Strategy The client (propco) was building a beta version of their mobile app to secure their next round of investment. Stakeholder interpretation of investor expectations were conflicting with user-centricity and so restricting potential scalability. We were able to kill two birds with the same stone by working towards a solution which intuitively promoted revenue generating features in the midst of a seamless user experience.
Branding I recreated the logo in Adobe Illustrator, made it retina ready and provided options to the client on tag-lines which appealed to both tenants and landlords.The balance between focus on landlord and tenant was considered. A tag-line would confirm whether this was a “pocket property manager” or a “property finder” etc.
UX & UI The design was made ready with break points for multiple devices & retina screens. Information Architecture & Flow through the site was confusing, overwhelming & broken. Each feature needed breaking apart and putting back together to both speed up delivery time & quality of output. Touchpoints don’t convert by default.
before
/ Inspiration
Learning from the best. Design & interaction Patterns from Flipboard, Airbnb & Sphere.
Great Design Flipboard not only illustrates clean design, but clear branding, hierarchies of information, the use of a swipe engages the user rather than strains, and finally but foremost, consistent messaging which influenced the users’ immediate experience of the application.
We also delved into examples of the Sphere & Skype App product tour / intros which also highlighted the prerequisite of team & stakeholder clarity on priority features & a focus on flat design, transitions & iOs or Android guidelines.
after
1 2 3
4
Strategic redesign Pre Beta Solution.
1. Flat Design. No top bar. An example of open, flat design & iOs guidelines. 2. Strategic & Retina Ready. New logo, tagline & icon. Creating a feel of ease & simplicity. Hidden house in bespoke r. This r also forms the apple touch icon. Retina ready graphics & guidelines. 3. Tone of voice. Sleek flat targets respectable landlords & tenants. Tagline was amongst many to explore the USP & Tone of Voice. 4. Hierarchy & Priority. Hierarchy for login options changed & nested inside Landlord & Tenant sections so the user experience starts smoothly rather than ambigously, from the landing page. Unique tours for either landlord or tenant would also be nested inside the relevant section. Property Search button added to trigger a flow through this feature.
Responsive Design 1. Balanced, organic dynamic between landlord & tenant. Whereas the Tenant had previously been completely ignored in the specifications now the tenant was a critical part of triggering engagement or completing actions. 2. Testimonials Social Proof sections to increase conversions. 3. Interactivity A sleek demonstration of what the app could do to incentivise downloads. 4. Lean quick delivery to solidify vision & gather data. This was hacked together using code from responsive templates based on Twitter Bootstrap. The post Beta solution was to be built on Foundation by zurb, having drawn insights from analytics plugged onto this site. The actual site has yet to go live. Invision screen visible here.
Strategic review & Scrum Processes & Post Beta Solution.
The founder of Instagram points out that the best products often start out as features. I designed various solutions which took a solutions based approach to understanding the key user pains along with stakeholder expectations.Recommended focus on either one feature or one USP. For now it was agreed a suite of tools in one place was the USP but that this could be an avoidance of due consideration. Investors had invested on the basis they could sell referencing & insurance solutions. Unless the user felt compelled, why would they buy? Focus on one feature such as broadcasting your property across the web, or organising referencing for new tenants could reduce user confusion and manifest competitor differentiation. Excess features were cut which meant less to be tested. Lean, user centric & agile approach to positioning, design & development. Notably every project requires a focus on human aspects throughout. Pseudo Scrum: No product owner had initially allocated for any single team member to have a unified view over the entire project. Processes prescribed by industry leaders, then adapted to the dynamic of this team facilitated open collaboration and discovery phases for each feature in context to intended sprints.
How not to plan in hidden hierarchical silos:
How to plan collaboratively, truly drilling down into products or features:
Small Tactical Teams. Source: Real Life Responsive Web Design: Vitaly Freedman
Stakeholder & investor buy-in: Design Studio, Web 2.0 Strategies, Lean Startups, Lean UX.
We identified potholes that needed avoiding and mapped out the aformentioned open methodology along with lessons from: Lean Startup by Eric Ries. The Wide Lens by Ron Adner. 4 Steps to the Epiphany Steve Blank. IDEO & Google Ventures, Design Sprints. The Art of Thinking Clearly, Rolf Dobelli. Web 2.0 Strategies, Amy Shuen. Quick high fidelity comps built a clear picture on how the core strategy manifests from the landing screen design and impacts the flow through the the rest of the app. A complete property manager would naturally lead down an entirely different path to an app that made it easy for landlords to reference check tenants. All with varied weighting or focus on the key users influence the user journey. The first strategic seed was to be defined and agreed by all stakeholders through Design Studio methods as prescribed by the Lean UX Manifesto. Such methods ensure buy-in and generation of work. Decision makers were empowered & features were now designed rapidly, collaboratively and democratically, wherever possible.
3. Personas
From demographics to motivational & behavioural data.
NAME
TYPE
VALUES
X PREFERENCES Y PREFERENCES
FEATURE MAP
Stage One.
Exploratory. Immersed. Lean. With no time or budget to conduct one-to-one survey of 30 + users segmented to represent different extremes (to find patterns and move from demographics to behavioural or motivational data) we took a smaller set of 5-10 users. This exercise also generated buy-in for Persona Development, the need for more data & set a strong precedent for a unified vision. Finally it enabled us to merge user needs with business goals. Where business or user goals conflict or complement becomes apparent immediately.
* The above shors how Stage 1 Personas were structured to easily map out different motivations & behaviours. for Rentr
4. User Journeys Solving real life problems.
Tracking Touch Points Optimising flow & conversions.
Throwing static screens together can make it easy to underestimate user motivations. When checked against personas & context (preferably based on tangible demographic & behavioural data rather than assumptions) a user journey can place focus on how much we are making users think & so, how likely they are to complete an intended action. The flow was broken down and every touch point then numbered so it could be referenced for optimisation. Particularly helpful to speed up conversations with disparate, remote teams. Decisions were reviewed considering the utility of the app for the sake of utility over users. In this specific feature the user could click to call an alternate landlord from GumTree in one click. Much easier than downloading an app. Solving real world problems in the digital world or making them easier is not the same as creating complex experiences online that could otherwise be achieved in one click and a phone call. Touchpoints were now treated with the same sensitivity (and space) that you would offer a customer who walked into your store:
Wireframes
Designing user interactions vs. static screens.
Interactions & IA
Focus on transitions not screens. I mocked up the wireframe as requested and used this opportunity to illustrate foundations for better flow, the difference between designing static screens and the flow between states. Concieved a simpler navigational structure for the site, more intuitive design & interaction patterns.
AFTER
Simpler Navigation:
-
All the navigational options were nested within one My Properties My Tenants
of three logical headers & the design implementa tion to take inspiration from Airbnb.
My Income
complicated & arduous. The latter being obvious motivations for a Landlord to not DIY their rental and have a dedicated estate agent instead.
Before: Super Long Arduous Scroll This shows only 2 of 5 scroll states within one super long screen. Observing users frustratedly scrolling through this overwhelming amount of work illustrated to stakeholders & investors that there was a need to consider transitions.
After: From arduous to magic out of a hat. Each part of the form was reconsidered, nested, hidden or minimised by default to then rise out of white space, using a sleek JQuery animation, appearing once the previous field has been completed. I recomended the user of Analytics Tools to measure conversions or drop offs prior to further optimisation. The three main steps are now up for review with due consideration of optional or cumpulsory fields. Hidden fields were still implied with breadcrumb
1. 2.
appear
navigation. 3. 4. 5.
hidden but implied
5. Visual Design Exhibition stand for ARLA Conference
An opportunity to clarify product strengths & recreate assets to future-proof an already well regarded brand.
before This needed fixing before it had implications on the UX priorities or their UI designs & a new website. The enterprise logo on the left represented the cut out of a key. Quite genius and a strength to be kept.
nfc?
Old device. Although we loved that Sony Ericson, this now cheapens the brand.
strong concept
PROPCO [mobile]
Outdated devices removing to make brand future-proof. Ovals needed removing so we could work in stronger correlation with the core (sleek and strong) propco logo. Pantone & RGB colours also chosen to prepare brand for a new styleguide which enabled predictability, consistency & vibrancy across different media from print to ipads.
CONCEPT EXPLORATION
The conference stand was to include two screens. This shows cables working their way from core & sub products into the screen.
AFTER >
screen 1 - web
screen 2: core
that’s all for now folks! Thank you for reading to here. Elements of rentr and other projects
Pavan S. Kanwar