Ralph Nakhle
Ralph Nakhle
User Experience professional and teacher

Outcome: Smarthome gateway concept design.

Role: Interaction design / UX / Visual design support.

Team: Associate Creative Director, Industrial designer, Interaction designer, Visual designer.

Target audience: 35 to 60 years old apartment owners with a focus on woman.

 

The project started with a two day intensive workshop with the client. The team defined technical limitations, the design direction, and the targeted audience. I had previously prepared a handful of archetypes to get a head-start and help steer the conversation. The 5 archetypes that were presented covered different scales of tech savviness, design affinity and brand orientation. Every different combination was matched with two of the 10 most relevant psychological needs. The archetype that was identified as the most fitting to the client's strategy was Eva Sommer: A working lady in her 50s with an average income and a family that is looking for safety and convenience.

An ideation session with all participants in the workshop took place. Similar ideas were grouped together to find the main thought directions. The process helped clarify the general direction and steer away from ideas that were not feasible or appealing.

User interviews were set with friends and family to test the early stage stimuli concepts. The insight was that the gateway needed to be easy to install, for everyone and friendly looking.

A second iteration brought the team to a more concise concept: A starter kit comprised of a smarthome gateway and user friendly controller.

After making a list of sensors and protocols that should be included in the hardware, I designed a user journey, and designated a key interaction for each step. This allowed the project's scope to stay concise and to the point.

I also designed a 5 step onboarding process. For a technology that looks unfriendly and complicated, there’s a great advantage in turning the tedious process of unboxing into a signature experience. I leveraged the Design Language System that was built in a previous project for the same client to accelerate my design process.

The interaction design model I worked on reflected that same simplicity. The intention is to have anyone be able to control home appliances upon first time use. The simple drill down model allows the user to navigate throughout their rooms, scenarios, and devices with the same controller. Users that wish to have several controllers can dedicate one controller for each room, allowing them to access the room's devices faster. The user navigates by swiping or taping the touch screen. The controller screen is also clickable at the top and the bottom. It is used as a switch button to control the devices.

On this project I had the chance to work closely with the industrial designer on the out of box experience. We focused on creating a harmonious experience between unpacking the device and the first time use flow on the mobile app. When the user opens the box the photosensor on the controller detects ambient light and the controller turns on. It then guides the user through the steps they need to complete before they are setup.

The project's duration was 2 weeks.

Gateway_HeroShot.jpg

Outcome: Design concept / prototype / documentation for product implemented.

Role: Lead interaction design / In-field research / Visual design support / Documentation / Main spokesperson.

Team: Creative Director, 2 Interaction designers, Strategist, Visual designer, Design technologist.

Target audience: Everybody from blue-collar workers to executives that own equity.

 

The first phase of the project started with research and immersion. The strategist and I spoke to all main stakeholders to identify their business requirements and aspirations. We also interviewed some of the client's customers and some of their current end-users. The main pain points we identified were: There is no overview of tasks that users need to complete, the information on the platform is overwhelming and the users do not know how much their portfolio is worth.

After the interviews I crafted 4 archetypes that the team presented to the client's customers. After several iterations we settled on three archetypes that represented well the scope of users, their needs and pain points. Lynn is the user that most requires learning as she does not know much about how equity works and what it means to her. She sees it as a savings account. Ellie is the finance-savvy and opportunistic employee. She looks for accuracy and performance in the tools she uses. Greg is the executive that favours practicality. He is very time-conscious and looks for easy-to-use solutions that keep him moving fast.

During the research phase I also prepared a competitive and trends analysis. This helped the team better understand what benchmark solutions are on the market and what features will help differentiate our work.

In the second phase of the project we designed the concept. The team started with a story board that covered the main key flows of each archetype. We then identified 8 design principles to guide our design decisions and doodled some features/ideas that we thought the platform should cover.

The team established the new sitemap of the platform then started with design work. I was responsible for wireframing the homepage, the plan details page, the onboarding flow and the transaction flow.

I worked in fast iteration cycles. I scheduled frequent checkins with the client to make sure we remained content accurate. This process allowed us to identify new business requirements and better understand the system's complexity. The image below showcases the improvement of the home page over several iterations. The homepage's objective was to provide all the information most users needed to make a trading decision. Market share prices, portfolio actionable value and a task manager provided important information at a glance. The user was also able to access the summaries of their different plans. Only decision-relevant values are shown for enhanced clarity and accessibility.

While designing the transaction flow, I also worked on the details page. I broke down the page based on the same structure I created for the summary. The total value of the plan is first presented and then broken down into two main sections: Available and locked. Available shares can be traded, locked shares are still restricted and cannot be traded. The user can drill down into each section to scrutinise the different allocations they have and see when restricted shares vest.

The rest of the flow focused on providing transparency of upcoming steps and on simplifying the steps into digestible chunks with one decision to make at a time.

1. The user goes from their overview page to their plan details page.
2. The user expands the available section.
3. The user analyses the allocations and decides to trade.
4. The first trading steps asks the user to chose the type of transaction. The user chooses to trade based on current market prices.
5. The user chooses the quantity they wish to trade. Real time calculation is provided based on the user's input.
6. The user verifies the order's total, checks bank account details, accepts terms and conditions and places the order.
7. A confirmation page appears. The user is notified about the date on which to expect their transfer and the location on the platform where they can find their transaction's status.

The onboarding flow was all about guidance and peace of mind. The process is critical since signing up to the platform in non-mandatory. This flow mostly answered Lynn's needs.

1. On the first step instructions are presented in a friendly and reassuring tone. Lynn’s expectations are set through clear “feed-forward” that explain forthcoming steps and what supporting information is required.
2. Lynn is reassured along the way. In this step, she is briefed on how her personal information will be used to enhance her experience.
3. On the personal details step, Lynn is asked to confirm or complete her information. To add a personal touch, she is given the opportunity to choose an avatar or upload a picture.
4. Disclosing financial information is sensitive. Lynn is reassured, and informed on how it will be beneficial to her. This helps her trust the platform better.
5. Information that is non-mandatory during the onboarding can be skipped.
6. Lynn is briefed about terms and conditions. She accepts before moving on to the final step.
7. Onboarding concludes with a short summary of the steps Lynn just completed. She's ready to start using the platform.

The end of this phase was concluded by developing a click-through simulator that enabled the client to share the new design and direction internally and with their existing clients. I worked closely with the developer to find the most efficient way for building the simulator. I oversaw the quality of the visual design and development, and provided all assets to the dev. The simulator contained a hidden menu that was used as navigation and enabled an overlay for every step explaining the benefit and rational behind it.

I presented the simulator to several of the the client's customers. Feedback was positive and customers were exited to get their hands on the new product.

In the last and most extensive phase of the project, the team (reduced to 3 people now) worked with the client and their development partner to implement the solution. We worked in 2-week-long sprints. Design was always one sprint ahead of development. User stories were concise and the team worked on improving and documenting the concept design to be production ready.

The compositions below are a demonstration of the difference of detail and considerations between production-ready and concept design.

During the development phase the team directly worked using visual assets and not wireframes. The team's comfort in visual design helped us increase our velocity. I set up the entire documentation system. A section was dedicated to the Design Language System where all overarching rules and reusable elements were documented. The rest was sectioned by user story pages. Every user story page started with the rules and logic of the specific module. An annotated flow diagram or composition followed to explain how success criteria were answered. States showing different use cases were then presented and described, along with transition and functionality details. The last section contained all redlining and annotated links to the typography, colours and elements sub-sections of the DLS.

The project's duration was 27 weeks (9 weeks of concept design and research + 9 sprints).

Mockup3.jpg